<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*div{
width: 200px;
height: 200px;
background-image: url(images/Koala.jpg),url(images/Penguins.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
padding: 50px; */
/*background-origin: padding-box; */
/* background-origin: border-box; */
/*background-origin: content-box;
border: 1px solid #ccc;
}*/
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9 */
}
div
{
font-family:myFirstFont;
}
div{
width: 200px;
height: 200px;
padding: 50px;
border: 5px solid #eee;
background-color: #666;
background-clip: padding-box;
background-clip: border-box;
background-clip: content-box;
/*animation: dong 5s;*/
animation-name: dong;/* 规定 @keyframes 动画的名称。*/
animation-duration: 5s; /*规定动画完成一个周期所花费的秒或毫秒。默认是 0。*/
animation-timing-function: linear;/* 规定动画的速度曲线。默认是 "ease"。*/
animation-delay: 2s; /* 规定动画何时开始。默认是 0*/
animation-iteration-count:infinite; /*规定动画被播放的次数。默认是 1。*/
animation-direction: alternate; /*规定动画是否在下一周期逆向地播放。默认是 "normal"。*/
animation-play-state: running;/* 规定动画是否正在运行或暂停。默认是 "running"。*/
}
@keyframes dong{
0% {background: red;}
20%{background: yellow}
50%{background: blue}
100%{background: green}
}
</style>
</head>
<body>
<div>背景 字体 动画</div>
</body>
</html>
