CSS3动态效果学习笔记

当前位置：首页 > 范文|应用文 > IT技术专栏 > 脚本栏目

CSS3动态效果学习笔记

来源：阅读：1004 次日期：2015-03-02 11:11:03

温馨提示：小编为您整理了“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

例子

代码如下

<!DOCTYPE html>

<html>

<head>

<title>CSS3动态效果demo</title>

</head>

<body>

animation

动画属性

@keyframes：

规定动画

</div>

</div>

animation-delay：

规定动画何时开始

</div>

</div>

animation-iteration-count：

规定动画次数

</div>

</div>

animation-direction：

规定下次动画逆向

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

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

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>

<textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;"><div class="cont2 conns">animation 动画属性,@keyframes：规定动画 </div></textarea>

.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>

<textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;"><div class="cont3 conns">animation-iteration-count：规定动画次数</div></textarea>

.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>

<textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;"><div class="cont4 conns">animation-direction：规定下次动画逆向</div></textarea>

.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>

.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>

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>

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>

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>

</body>

</html>

文章来源：

更多信息请查看IT技术专栏

上一篇：IE9下DIV本来应该居中的结果显示为居左

下一篇：浏览器如何判断css优先级

手机网站地址：CSS3动态效果学习笔记

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！