css动画旋转代码
2018-02-08 21:21
363 查看
有很多朋友都说字体 图片以及一些简单动画 要做旋转效果 都说要用js或者jq 才能去做这个特效。。
今天我们用css 就直接做旋转特效。话不多说 直接上代码
css样式
div{
width:120px;
height:120px;
line-height:120px;
margin: 20px;
background-color: #5cb85c;
float: left;
font-size: 12px;
text-align: center;
color:orangered;
}
/*效果一:360°旋转 修改rotate(旋转度数)*/
.img1 {
transition: All 0.4s ease-in-out;
-webkit-transition: All 0.4s ease-in-out;
-moz-transition: All 0.4s ease-in-out;
-o-transition: All 0.4s ease-in-out;
}
.img1:hover {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
<div class="img1">效果一:360°旋转 </div>
这样旋转代码就出来了
今天我们用css 就直接做旋转特效。话不多说 直接上代码
css样式
div{
width:120px;
height:120px;
line-height:120px;
margin: 20px;
background-color: #5cb85c;
float: left;
font-size: 12px;
text-align: center;
color:orangered;
}
/*效果一:360°旋转 修改rotate(旋转度数)*/
.img1 {
transition: All 0.4s ease-in-out;
-webkit-transition: All 0.4s ease-in-out;
-moz-transition: All 0.4s ease-in-out;
-o-transition: All 0.4s ease-in-out;
}
.img1:hover {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
<div class="img1">效果一:360°旋转 </div>
这样旋转代码就出来了
相关文章推荐
- 通过css旋转字体示例代码
- CSS动画集合 可直接生成动画代码 – AniCollection
- CSS 实现加载动画之五-光盘旋转
- 关于css旋转动画
- Android版网易云音乐唱片机唱片磁盘旋转及唱片机机械臂动画关键代码实现思路
- 纯CSS3悬停图标旋转导航动画代码
- Android中补间动画1----Animation的基本使用代码实现(平移,缩放,渐变,旋转)
- Qt 旋转动画(纯代码)
- 代码创建 WPF 旋转动画
- 代码创建 WPF 旋转、翻转动画(汇总)
- wordpress多说评论插件中设置圆形旋转头像css代码
- css3360度旋转动画
- CSS3 3D旋转动画代码实例
- H5旋转切换动画效果代码。
- 动画效果之渐变、缩放、平移、旋转<代码实现>
- 程序员210行纯css代码制作日出动画特效
- 动画旋转示例代码
- css制作旋转花朵小动画
- CSS 实现加载动画之一-菊花旋转
- js+css实现文字散开重组动画特效代码分享