CSS3动态效果学习笔记

作者：袖梨 2022-06-25

@keyframe 规定动画
一般是跟animation一起用

animation : 规定动画的名字规定动画的时间规定动画的速度曲线。
@keyframe 定义动画的名称{ 动画时长的百分比。{一个或多个合法的 CSS 样式属性} }

目前大部分浏览器都没有支持@keyframe 和animation；所以要分浏览器书写
@keyframe
1.safari和chrome浏览器
@-webkit-keyframes myfrom{
from {top:0;}
to {top:200px;}
}

2.Firefox浏览器
@-moz-keyframes myfrom{
from {top:0;}
to {top:200px;}
}

3.Opera浏览器
@-o-keyframes myfrom{
from {top:0;}
to {top:200px;}
}

animation
1.safari和chrome浏览器
@-webkit-animation : myfrom 5s infinite
2.Firefox浏览器
@-moz-animation : myfrom 5s infinite
2.Opera浏览器
@-o-animation : myfrom 5s infinite

例子

代码如下

复制代码

  CSS3动态效果demo

  word" content="CSS3动态效果demo">

     animation
     动画属性
     @keyframes：
     规定动画

源代码

     animation-delay：
     规定动画何时开始

源代码

     animation-iteration-count：
     规定动画次数

源代码

     animation-direction：
     规定下次动画逆向

源代码

<textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;"><div class="cont1 conns">animation-delay：规定动画何时开始 </div>

<br />
body{background-color: #000;}<br />
.cont{<br />
 border: 1px solid #fff;<br />
 float: left;<br />
 width: 250px;<br />
 height: 250px;<br />
 position: relative;<br />
 box-sizing:border-box;<br />
}<br />
.conns{white-space: initial;}<br />
.cont a{<br />
 position: absolute;<br />
 top:50px;<br />
 left: 5px;<br />
 color: #e3e3e3;<br />
 word-wrap: break-word; <br />
 display: block;<br />
 width: 5px;<br />
 text-decoration: none;<br />
}<br />
.cont1{<br />
 width: 100px;<br />
 height:80px;<br />
 margin:0 auto;<br />
 background-color: #999;<br />
 color: #fff;<br />
 padding: 10px;<br />
 position:relative;<br />
 overflow: hidden;<br />
 animation:myfrom 5s infinite;<br />
 -webkit-animation:myfrom 5s infinite;<br />
}<br />
@-webkit-keyframes myfrom{<br />
 from {top:0;}<br />
 to {top:150px;}<br />
}<br />
@keyframes myfrom{<br />
 from {top:0;}<br />
 to {top:150px;}<br />
}

<div class="cont2  conns">animation 动画属性,@keyframes：规定动画 </div>

<br />
.cont2{<br />
 width: 80px;<br />
 height:80px;<br />
 margin:0 auto;<br />
 background-color: #999;<br />
 color: #fff;<br />
 padding: 10px;<br />
 position:relative;<br />
 overflow: hidden;<br />
 animation:myfrom 5s infinite;<br />
 -webkit-animation:myfrom 5s infinite;<br />
 animation-delay:2s;<br />
 -webkit-animation-delay:2s;<br />
}<br />
其余css同第一个<br />

<div class="cont3  conns">animation-iteration-count： 规定动画次数</div>

<br />
.cont3{<br />
 width: 80px;<br />
 height:80px;<br />
 margin:0 auto;<br />
 background-color: #999;<br />
 color: #fff;<br />
 padding: 10px;<br />
 position:relative;<br />
 overflow: hidden;<br />
 animation:myfrom 5s infinite;<br />
 -webkit-animation:myfrom 5s infinite;<br />
 animation-iteration-count:2;<br />
 -webkit-animation-iteration-count:2;<br />
}<br />
其余css同第一个<br />

<div class="cont4  conns">animation-direction： 规定下次动画逆向</div>

<br />
.cont4{<br />
 width: 80px;<br />
 height:80px;<br />
 margin:0 auto;<br />
 background-color: #999;<br />
 color: #fff;<br />
 padding: 10px;<br />
 position:relative;<br />
 overflow: hidden;<br />
 animation:myfrom 5s infinite;<br />
 -webkit-animation:myfrom 5s infinite;<br />
 animation-direction:alternate;<br />
 -webkit-animation-direction:alternate;}<br />
其余css同第一个<br />

<div class="cont5  conns"> </div>

<br />
.cont5{<br />
 margin: 6em auto;<br />
 font-size: 10px;<br />
 position: relative;<br />
 border: 1.1em solid rgba(255, 255, 255, 0.2);<br />
 border-left: 1.1em solid #ffffff;<br />
   -webkit-animation: cont5 1.1s infinite linear;<br />
   animation: cont5 1.1s infinite linear;<br />
}<br />
.cont5,.cont5:after{<br />
 border-radius: 50%;<br />
 width: 10em;<br />
 height: 10em;<br />
}<br />
@keyframes cont5{<br />
 from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}<br />
 to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}<br />
}<br />
@-webkit-keyframes cont5{<br />
 from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}<br />
 to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}<br />
}

<div class="cont6  conns"> </div>

<br />
body{background-color: #000;}<br />
.cont6{<br />
 height: 120px;<br />
 width: 120px;<br />
 margin: 50px auto;<br />
 border-radius: 50%;<br />
 background:linear-gradient(left,#fff,#000);<br />
 background:-webkit-linear-gradient(left,#fff 10%,rgba(255,255,255,0) 40%);<br />
 background:-moz-linear-gradient(left,#fff 10%,rgba(255,255,255,0) 40%);<br />
 background:-o-linear-gradient(left,#fff 10%,rgba(255,255,255,0) 40%);<br />
 background:-ms-linear-gradient(left,#fff 10%,rgba(255,255,255,0) 40%);<br />
 position: relative;<br />
 -webkit-animation: cont6 1.1s infinite linear;<br />
   animation: cont6 1.1s infinite linear;<br />
}<br />
.cont6:before{<br />
 height: 50%;<br />
 width: 50%;<br />
 background:#fff;<br />
 content: '';<br />
 display: block;<br />
 border-radius:100% 0 0 0;<br />
 position: absolute;<br />
 top:0;<br />
 left: 0;<br />
}<br />
.cont6:after{<br />
 height: 75%;<br />
 width: 75%;<br />
 margin: auto;<br />
 background:#000;<br />
 content:'';<br />
 display: block;<br />
 border-radius:50%;<br />
 position: absolute;<br />
 top:0;left: 0;<br />
 right: 0;<br />
 bottom: 0;<br />
}<br />
@keyframes cont6{<br />
 from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}<br />
 to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}<br />
}<br />
@-webkit-keyframes cont6{<br />
 from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}<br />
 to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}<br />
}

<div class="cont7  conns"> </div>

<br />
body{background-color: #000;}<br />
.cont7,.cont7:before,.cont7:after{<br />
 height: 25px;<br />
 width: 25px;<br />
 border-radius: 50%;<br />
 animation:cont7 1.8s infinite ease-in-out;<br />
 -webkit-animation:cont7 1.8s infinite ease-in-out;<br />
}<br />
.cont7{<br />
 position: relative;<br />
 top:0;<br />
 margin: 80px auto;<br />
 animation-delay:0.2s;<br />
 -webkit-animation-delay:0.2s;<br />
}<br />
.cont7:before{<br />
 content: '';<br />
 position: absolute;<br />
 left: -50px;<br />
}<br />
.cont7:after{<br />
 content: '';<br />
 position: absolute;<br />
 left: 50px;<br />
 animation-delay:0.4s;<br />
 -webkit-animation-delay:0.4s;<br />
}<br />
@keyframes cont7{<br />
  0%,<br />
  80%,<br />
  100% {box-shadow: 0 2.5em 0 -1.3em #ffffff; }<br />
  40% {box-shadow: 0 2.5em 0 0 #FFF;}<br />
}<br />
@-webkit-keyframes cont7{<br />
  0%,<br />
  80%,<br />
  100% {box-shadow: 0 2.5em 0 -1.3em #ffffff;}<br />
  40% {box-shadow: 0 2.5em 0 0 #FFF;}<br />
}

<div class="cont8  conns"> </div>

<br />
body{background-color: #000;}<br />
.cont8{<br />
 width: 96px;<br />
 height: 48px;<br />
 border-radius: 50%;<br />
 border-bottom:50px solid #fff;<br />
 border-top:2px solid #fff;<br />
 border-left:2px solid #fff;<br />
 border-right:2px solid #fff;<br />
 position: relative;<br />
 top:0;<br />
 margin: 80px auto;<br />
}<br />
.cont8:before{<br />
 content: '';<br />
 position: absolute;<br />
 width: 12px;<br />
 height: 12px;<br />
 border-radius: 50%;<br />
 border: 18px solid #000;<br />
 top:21px;<br />
 background-color: #fff;<br />
 left: 0;<br />
}<br />
.cont8:after{<br />
 content: '';<br />
 position: absolute;<br />
 width: 12px;<br />
 height: 12px;<br />
 border-radius: 50%;<br />
 border: 18px solid #fff;<br />
 top:21px;<br />
 background-color: #000;<br />
 right: 0;<br />
}