动画
<!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>
