CSS3动态效果学习笔记_ Div+Css教程-查字典教程网

CSS3动态效果学习笔记

摘要：@keyframe规定动画一般是跟animation一起用animation:规定动画的名字规定动画的时间规定动画的速度曲线。@keyfra...

@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

例子

代码如下

<!DOCTYPE html>
<html>
<head>
  <title>CSS3动态效果demo</title>
  <meta charset="utf-8">
  <meta name="keyword" content="CSS3动态效果demo">
  <meta name="description" content="CSS3动态效果demo">
  <meta name="author" content="戎sir">
  <link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
  <div class="main">
   <div class="cont">
    <div class="cont1 conns">
     animation
     动画属性
     @keyframes：
     规定动画
    </div>
    <span data="1">源代码</span>
   </div>
   <div class="cont">
    <div class="cont2 conns">
     animation-delay：
     规定动画何时开始
    </div>
    <span data="2">源代码</span>
   </div>
   <div class="cont">
    <div class="cont3 conns">
     animation-iteration-count：
     规定动画次数
    </div>
    <span data="3">源代码</span>
   </div>
   <div class="cont">
    <div class="cont4 conns">
     animation-direction：
     规定下次动画逆向
    </div>
    <span data="4">源代码</span>
   </div>
   <div class="cont">
    <div class="cont5 conns">
    </div>
    <span data="5">源代码</span>
   </div>
   <div class="cont">
    <div class="cont6 conns">

    </div>
    <span data="6">源代码</span>
   </div>
   <div class="cont">
    <div class="cont7 conns">

    </div>
    <span data="7">源代码</span>
   </div>
   <div class="cont">
    <div class="cont8 conns">

    </div>
    <span data="8">源代码</span>
   </div>
  </div>
  <div class="overbody hidden"></div>
  <div class="commom" id="show1">
   <textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;"><div class="cont1 conns">animation-delay：规定动画何时开始 </div></textarea>
   <textarea readonly="readonly" class="tipcss">
body{background-color: #000;}
.cont{
border: 1px solid #fff;
float: left;
width: 250px;
height: 250px;
position: relative;
box-sizing:border-box;
}
.conns{white-space: initial;}
.cont a{
position: absolute;
top:50px;
left: 5px;
color: #e3e3e3;
word-wrap: break-word;
display: block;
width: 5px;
text-decoration: none;
}
.cont1{
width: 100px;
height:80px;
margin:0 auto;
background-color: #999;
color: #fff;
padding: 10px;
position:relative;
overflow: hidden;
animation:myfrom 5s infinite;
-webkit-animation:myfrom 5s infinite;
}
@-webkit-keyframes myfrom{
from {top:0;}
to {top:150px;}
}
@keyframes myfrom{
from {top:0;}
to {top:150px;}
}</textarea>
  </div>
  <div class="commom" id="show2">
   <textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;"><div class="cont2 conns">animation 动画属性,@keyframes：规定动画 </div></textarea>
   <textarea readonly="readonly" class="tipcss">
.cont2{
width: 80px;
height:80px;
margin:0 auto;
background-color: #999;
color: #fff;
padding: 10px;
position:relative;
overflow: hidden;
animation:myfrom 5s infinite;
-webkit-animation:myfrom 5s infinite;
animation-delay:2s;
-webkit-animation-delay:2s;
}
其余css同第一个
</textarea>
  </div>
  <div class="commom" id="show3">
   <textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;"><div class="cont3 conns">animation-iteration-count：规定动画次数</div></textarea>
   <textarea readonly="readonly" class="tipcss">
.cont3{
width: 80px;
height:80px;
margin:0 auto;
background-color: #999;
color: #fff;
padding: 10px;
position:relative;
overflow: hidden;
animation:myfrom 5s infinite;
-webkit-animation:myfrom 5s infinite;
animation-iteration-count:2;
-webkit-animation-iteration-count:2;
}
其余css同第一个
</textarea>
  </div>
  <div class="commom" id="show4">
   <textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;"><div class="cont4 conns">animation-direction：规定下次动画逆向</div></textarea>
   <textarea readonly="readonly" class="tipcss">
.cont4{
width: 80px;
height:80px;
margin:0 auto;
background-color: #999;
color: #fff;
padding: 10px;
position:relative;
overflow: hidden;
animation:myfrom 5s infinite;
-webkit-animation:myfrom 5s infinite;
animation-direction:alternate;
-webkit-animation-direction:alternate;}
其余css同第一个
</textarea>
  </div>
  <div class="commom" id="show5">
   <textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;"><div class="cont5 conns"> </div></textarea>
   <textarea readonly="readonly" class="tipcss">
.cont5{
margin: 6em auto;
font-size: 10px;
position: relative;
border: 1.1em solid rgba(255, 255, 255, 0.2);
border-left: 1.1em solid #ffffff;
-webkit-animation: cont5 1.1s infinite linear;
animation: cont5 1.1s infinite linear;
}
.cont5,.cont5:after{
border-radius: 50%;
width: 10em;
height: 10em;
}
@keyframes cont5{
from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@-webkit-keyframes cont5{
from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}</textarea>
  </div>
  <div class="commom" id="show6">
   <textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;"><div class="cont6 conns"> </div></textarea>
   <textarea readonly="readonly" class="tipcss">
body{background-color: #000;}
.cont6{
height: 120px;
width: 120px;
margin: 50px auto;
border-radius: 50%;
background:linear-gradient(left,#fff,#000);
background:-webkit-linear-gradient(left,#fff 10%,rgba(255,255,255,0) 40%);
background:-moz-linear-gradient(left,#fff 10%,rgba(255,255,255,0) 40%);
background:-o-linear-gradient(left,#fff 10%,rgba(255,255,255,0) 40%);
background:-ms-linear-gradient(left,#fff 10%,rgba(255,255,255,0) 40%);
position: relative;
-webkit-animation: cont6 1.1s infinite linear;
animation: cont6 1.1s infinite linear;
}
.cont6:before{
height: 50%;
width: 50%;
background:#fff;
content: '';
display: block;
border-radius:100% 0 0 0;
position: absolute;
top:0;
left: 0;
}
.cont6:after{
height: 75%;
width: 75%;
margin: auto;
background:#000;
content:'';
display: block;
border-radius:50%;
position: absolute;
top:0;left: 0;
right: 0;
bottom: 0;
}
@keyframes cont6{
from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@-webkit-keyframes cont6{
from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}</textarea>
  </div>
  <div class="commom" id="show7">
   <textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;"><div class="cont7 conns"> </div></textarea>
   <textarea readonly="readonly" class="tipcss">
body{background-color: #000;}
.cont7,.cont7:before,.cont7:after{
height: 25px;
width: 25px;
border-radius: 50%;
animation:cont7 1.8s infinite ease-in-out;
-webkit-animation:cont7 1.8s infinite ease-in-out;
}
.cont7{
position: relative;
top:0;
margin: 80px auto;
animation-delay:0.2s;
-webkit-animation-delay:0.2s;
}
.cont7:before{
content: '';
position: absolute;
left: -50px;
}
.cont7:after{
content: '';
position: absolute;
left: 50px;
animation-delay:0.4s;
-webkit-animation-delay:0.4s;
}
@keyframes cont7{
0%,
80%,
100% {box-shadow: 0 2.5em 0 -1.3em #ffffff; }
40% {box-shadow: 0 2.5em 0 0 #FFF;}
}
@-webkit-keyframes cont7{
0%,
80%,
100% {box-shadow: 0 2.5em 0 -1.3em #ffffff;}
40% {box-shadow: 0 2.5em 0 0 #FFF;}
}</textarea>
  </div>
  <div class="commom" id="show8">
   <textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;"><div class="cont8 conns"> </div></textarea>
   <textarea readonly="readonly" class="tipcss">
body{background-color: #000;}
.cont8{
width: 96px;
height: 48px;
border-radius: 50%;
border-bottom:50px solid #fff;
border-top:2px solid #fff;
border-left:2px solid #fff;
border-right:2px solid #fff;
position: relative;
top:0;
margin: 80px auto;
}
.cont8:before{
content: '';
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
border: 18px solid #000;
top:21px;
background-color: #fff;
left: 0;
}
.cont8:after{
content: '';
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
border: 18px solid #fff;
top:21px;
background-color: #000;
right: 0;
}</textarea>
  </div>
  <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="show.js"></script>
</body>
</html>

文章来源：http://rongs100.com/index.php?m=content&c=index&a=show&catid=11&id=36

【CSS3动态效果学习笔记】相关文章：

★ 17个有趣实用的CSS 3悬停效果教程

★ 用CSS手写导航条没有任何图片附效果图

★ CSS样式颜色属性的使用

★ 可视化CSS3动画生成神器 - Stylie

★ CSS制作11种风格不同的特效文字

★ CSS应用基础教程(3) 应用补充

上一篇：使用css实现全兼容tooltip提示框

下一篇： CSS中样式覆盖优先顺序详解

学习工具