?
最近进行二次开发的时候有个图片用背景图要旋转一定角度。
下图中如果只给.question添加背景通过CSS3的transfrom rotate肯定是会影响文字的展示。
所以把背景图放到伪类中进行旋转就可以完美解决这个问题了,话不多说,上代码。
.des-item-7 .inner-box .question{ position:relative; font-size: 16px; font-family: CenturyGothic; font-weight: 400; color: #000000; cursor: pointer; } .des-item-7 .inner-box .question::after{ content:''; position:absolute; right:0; top:50%; width:15px; height:9px; transform:translate(0,-50%); display:block; background-image: url('{{ "question_arrow.jpg" | asset_url}}'); background-repeat: no-repeat; background-position:right 0 center; } .des-item-7 .inner-box .active::after{ transition:all 0.5s; transform: rotate(180deg); }
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |