萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS3動態效果學習筆記
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>
<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>
