<!-- 这篇文章应该掌握的几个知识点:
1、用CSS中的@font-face方法引入自己想要使用的文字软件
2、用做@keyframes
自动动画效果
@keyframes 名(自己定义) {
0%{}
20%{}
}
transform:rotate(72deg) scale(0.5); rotate(72deg)旋转72度,规模缩小到0.5倍
animation-delay: 1s; /* 动画延时 */
animation-iteration-count:5; /* 动画效果执行5次 */
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
@font-face {
font-family: "xingkai";
/*给你引入的字体定义一个名字*/
src:url("xingkai/STXINGKA.TTF");/*把字体引入*/}* { marign:0; padding:0; border:none; }body { font-family: xingkai; font-size: 14px;}#div { width:200px; height:200px; background:#000; color:#fff; text-align:center; line-height:200px; margin:0 auto;font-size: 3em;position:
relative; /* 相对定位,为了给后面的top,和 left */animation-name:color;animation-duration: 3s;animation-delay: 1s; /* 动画延时 */animation-iteration-count:5; /* 动画效果执行5次 */}@keyframes color {0%{ background:#000; color:#f00; top:0; left:0;}20%{ background:#333; color:#f50000;
text-shadow: 5px 5px pink;
transform:rotate(72deg) scale(0.5); top:0; left:100px;}
40%{ background:#aaa; color:#FB4C4C;
text-shadow: 5px 5px pink; /*前面两个值分别是水平的距离和垂直的距离的阴影*/
transform:rotate(144deg) scale(0.5);
top:100; left:150px;}
50%{ background:#636362; color:#FD9494; text-shadow: 5px 5px pink; transform:rotate(180deg) scale(0.5);top:200px; left:0;}
60%{ background:#636362; color:#FD9494; text-shadow: 5px 5px pink; transform:rotate(216deg) scale(0.5);top:100px; left:-150px;}
80%{ background:#9ea0a2; color:#FEB9B9; text-shadow: 5px 5px pink; transform:rotate(288deg) scale(0.5);top:0px; left:-100px;}
100%{ background:#fff; color:#000; text-shadow: 5px 5px pink; transform:rotate(360deg) scale(0.5);
top:0; left:0;}
}
</style>
</head>
<body>
<div id="div">
<p>HTML5</p>
</div>
</body>
</html>