<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*div{ 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>