<img src="https://img-blog.csdn.net/20141018180818656?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSFRYX0hlbGxvV29ybGQ=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><!DOCTYPE html>
<html>
<head>
<title>@keyframes(动画)</title>
<meta charset="utf-8">
<style type="text/css">
.div_keyf{
width: 130px;
height: 100px;
-webkit-animation: hehe 5s;
}
@-webkit-keyframes hehe{
from{background: #F92672;}
to{background: #E8D81F;}
}
.div_keyf2{
width: 130px;
height: 100px;
-webkit-animation: hehe1 7s;
}
@-webkit-keyframes hehe1{
0{background: #12E8E3;}
50%{background: #12E86C;}
100%{background: #F03424;}
}
.div_keyf3{
width: 130px;
height: 100px;
background: #eee;
}
.div_keyf3:hover{
-webkit-animation: hehe1 7s;
}
@-webkit-keyframes hehe1{
0%{background: #12E8E3;}
50%{background: #12E86C;}
100%{background: #F03424;}
}
.div_keyf4{
width: 200px;
height: 30px;
background: #6CED34;
border-radius: 20px;
margin: 100px 100px;
color: #000;
text-align: center;
line-height: 30px;
cursor: pointer;
/*在这里linear表示线性变化,infinite表示一直循环,*/
/*-webkit-animation:haha 2s linear infinite;*/
/*旋转属性,deg表示度数(角度)*/
/*-webkit-transform:rotate(90deg);*/
}
.div_keyf4:active{
-webkit-animation:haha 2s linear infinite;
}
@-webkit-keyframes haha{
0%{-webkit-transform:rotate(0deg);}
25%{-webkit-transform:rotate(90deg);}
50%{-webkit-transform:rotate(180deg);}
75%{-webkit-transform:rotate(270deg);}
100%{-webkit-transform:rotate(360deg);}
}
.div_box-shadow-dd{
width: 3px;
margin-left: 200px;
margin-top: 200px;
height: 3px;
color: #fff;
background: #fff;
border-radius: 100%;
/*PS:第一个:左右,第二个:上下,第三个:模糊度,第四个值是表示扩大 缩小;*/
box-shadow:0px -10px 0px 0.7px #333,
10px 0px #333,
0px 10px #333,
-10px 0px #333,
-7px -7px 0px 0.5px #333,
7px -7px 0 1.5px #333,
7px 7px #333,
-7px 7px #333;
-webkit-animation:haha1 .8s linear infinite;
}
@-webkit-keyframes haha1{
0%{-webkit-transform:rotate(0deg);}
25%{-webkit-transform:rotate(90deg);}
50%{-webkit-transform:rotate(180deg);}
75%{-webkit-transform:rotate(270deg);}
100%{-webkit-transform:rotate(360deg);}
}
</style>
</head>
<body>
<!-- <div class="div_keyf">
动画1(红遍黄)
</div> -->
<!-- <div class="div_keyf2">
动画2(蓝变绿在变红)
</div> -->
<!-- <div class="div_keyf3">
动画3(蓝变绿在变红 hover)
</div> -->
<!-- <div class="div_keyf4">
动画4(蓝变绿在变红 hover)
</div> -->
<div class="div_box-shadow-dd">
</div>
</body>
</html>
css无限旋转
最新推荐文章于 2024-06-13 09:21:50 发布