css3动态效果代码|CSS3动态效果学习笔记

【www.bbyears.com--css3教程】

@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

例子

 
  
  
  
  
  
  
 
 
  
   
    
     animation
     动画属性
     @keyframes：
     规定动画
    
    源代码
   
   
    
     animation-delay：
     规定动画何时开始
    
    源代码
   
   
    
     animation-iteration-count：
     规定动画次数
    
    源代码
   
   
    
     animation-direction：
     规定下次动画逆向
    
    源代码
   
   
    
    
    源代码
   
   
    
     
    
    源代码
   
   
    
     
    
    源代码
   
   
    
     
    
    源代码
   
  
  
  
   <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 /> }
  
  <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="show.js"></script>
 

本文来源：http://www.bbyears.com/css/58213.html