css 背景图像的简单CSS旋转。可用于元素状态更改(打开,单击,悬停等)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 背景图像的简单CSS旋转。可用于元素状态更改(打开,单击,悬停等)相关的知识,希望对你有一定的参考价值。

.title {
  position: relative;
  padding-right: 20px;
}
.title:before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  top: 0;
  right: 0;
  background: transparent url(../img/accordion-arrow.svg?x) center center no-repeat;
  -webkit-background-size: 1.4rem;
  background-size: 1.4rem;
  transition: all 500ms;
}
.title.open:before {
  -webkit-transform:rotate(90deg);
  transform:rotate(90deg);
}

以上是关于css 背景图像的简单CSS旋转。可用于元素状态更改(打开,单击,悬停等)的主要内容,如果未能解决你的问题,请参考以下文章

CSS:在一个元素上缩放和旋转多个 SVG 背景图像 - 没有 JS 可能吗?

图像预加载技术(用作悬停状态 CSS 背景图像)似乎不适用于 Chrome

CSS入门(背景各种属性的详解垂直居中和过渡效果的详解渐变效果的简单讲解)

react, css) 淡入淡出的过渡 css,当背景图像用 className 改变时

HTML5/CSS3 - 如何制作“无尽”旋转背景 - 360 度全景

html CSS3仅旋转背景图像,而不是element.html