我的背景图片有一个指向右侧的箭头.当用户单击按钮时,所选状态会将箭头更改为指向下方(使用图像精灵中的不同背景位置).
无论如何使用CSS3设置动画,所以一旦单击按钮并且jQuery为其指定一个"选定"类,它将从右到下以动画(仅90度)旋转？(最好使用带有指向右侧的箭头的单个图像/位置)
我不确定是否需要使用变换或关键动画帧.
我正在尝试用图像制作一个漂亮的背景，但我希望重复图像以填充屏幕，不透明度设置为 0.5 并旋转 45 度。我尝试了很多方法来实现这一目标，但没有成功。有人有主意吗？
在此 Codepen 中，我将图像旋转且不透明，但无法使背景重复工作。
.background {
height: 500px;
width: 500px;
position: relative;
display: inline-block;
padding: 100px;
border: black 3px solid;
}
.background::before {
content: "";
position: absolute;
overflow: hidden;
width: 100px;
height: 100px;
left: 0;
top: 0;
z-index: -1;
opacity: 0.5;
background: url(https://cambridgewords.files.wordpress.com/2019/11/funny.jpg);
background-size: contain;
transform: rotate(45deg);
background-repeat: repeat;
opacity: 0.5;
}<span class='background'>HElloWorld</span>