说起css3的旋转效果，那就要说为什么不用js去实现，CSS3的动画效果，能够减少对JavaScript和Flash文件的HTTP请求这是原因之一。但是css3可能要求浏览器执行很多的工作来完成这个动画效果的渲染，这有可能导致浏览器响应缓慢,因此，在使用一些复杂的特效时，大家需要考虑清楚。不过这样的现象毕竟为数不多。其实很多CSS3技术能够在任何情况下都大幅提高页面的性能。就这一条足以让我们使用CSS3。
HTML代码：
文章图片
CSS代码：
.closeBox{
display: inline-block;
width: 50px;
height: 50px;
transition: transform 0.5s;
-moz-transition: -moz-transform 0.5s;
/* Firefox 4 */
-webkit-transition: -webkit-transform 0.5s;
/* Safari 和 Chrome */
-o-transition: -o-transform 0.5s;
}
.closeBox img{
width: 100%;
}
.closeBox:hover{
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
文章图片
HTML代码：
-
信息公開
文章图片
- 資訊
- 白皮書
- 關於我們
- 幫助中心
【纯css3实现下拉箭头、关闭按钮旋转效果】CSS代码：
.menu>ul>li.has-sub a img{
margin-left: 10px;
transition: transform 0.5s;
}
.menu>ul>li.has-sub a:hover>img{
transform: rotate(180deg);
}
文章图片
文章图片
推荐阅读
- javascript|客观评价 增长趋势比 vite 还猛的 TailwindCSS
- html|Vue项目实战
- 前端|【前端面试必知】行内块元素之间的空白间隔是什么原因引起的
- html|移动端签字功能
- UI5|CSS 初学 （五）边框
- css|CSS两栏布局的实现和水平垂直居中的实现
- 微信小程序|微信小程序从入门到精通-基础篇（1）
- 网页设计|前端网页设计期末大作业-写真工作室网站(资源链接在文末)
- css|css的相对定位和绝对定位