html文件
<!DOCTYPE html>
<html>
<head>
<title>CSS3 動(dòng)畫</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./animation.css">
</head>
<body>
<button class="trans">過渡</button>
</body>
</html>
css文件
animation.css
.trans {
width: 50em;
height: 20em;
background: #09f;
border: 1px solid #05f;
color: white;
position: absolute;
left: 0;
transition-duration: 1s;
animation-name: color_changes;/*動(dòng)畫名稱*/
animation-duration: 3s;/*動(dòng)畫持續(xù)時(shí)間*/
animation-iteration-count: infinite;/*動(dòng)畫重復(fù)次數(shù)*/
}
/*動(dòng)畫主體*/
@keyframes color_changes{
0% {background-color: red;}
20% {background-color: orange;}
40% {background-color: yellow;}
60% {background-color: green;}
80% {background-color: blue;}
100% {background-color: purple;}
}
/*當(dāng)鼠標(biāo)移上去時(shí)發(fā)生變化*/
.trans:hover {
background: #05f;
box-shadow: 1px 1px 2px #333;
/*transition-duration: 1s;*/
left: 20px;
/*transform: rotateX(30deg);旋轉(zhuǎn)*/
/*transform: translateY(100px);平移*/
/*transform: skewY(30deg);傾斜*/
/*transform: scale(5);縮放*/
animation-name: color_changes;/*動(dòng)畫名稱*/
animation-duration: 3s;/*動(dòng)畫持續(xù)時(shí)間*/
animation-iteration-count: infinite;/*動(dòng)畫重復(fù)次數(shù)*/
}
body {
perspective: 100px;/*定義 3D 元素距視圖的距離，以像素計(jì)*/
}
