CSS时钟：
HTML部分：
<body> <div id="dot"></div> <div id="second"> <span></span> </div> <div id="minute"> <span></span> </div> <div id="hour"> <span></span> </div> </body>
CSS部分：
body{
height: 100%;
margin: 0;
background-image: url(clock.jpg);
background-repeat: no-repeat;
background-position: center center;
}
#dot{
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #ccc;
position: absolute;
top: calc(50% - 30px/2);
left: calc(50% - 30px/2);
z-index: 1000;
}
#second{
width: 600px;
height: 10px;
/*background-color: red;*/
position: absolute;
top: calc(50% - 10px / 2);
left: calc(50% - 600px / 2);
animation: rotate 60s linear infinite;
z-index: 900;
}
#second span{
width: 350px;
height: 3px;
background-color: yellow;
display: block;
margin-top: 3.5px;
border-radius: 1.5px;
}
@keyframes rotate{
from{
transform: rotate(0);
}
to{
transform: rotate(360deg);
}
}
#minute{
width: 500px;
height: 10px;
/*background-color: red;*/
position: absolute;
top: calc(50% - 10px / 2);
left: calc(50% - 500px / 2);
animation: rotate 3600s linear infinite;
z-index: 800;
}
#minute span{
width: 280px;
height: 6px;
background-color: blue;
display: block;
margin-top: 2px;
border-radius: 3px;
}
#hour{
width: 400px;
height: 10px;
/*background-color: red;*/
position: absolute;
top: calc(50% - 10px / 2);
left: calc(50% - 400px / 2);
animation: rotate 43200s linear infinite;
z-index: 700;
}
#hour span{
width: 220px;
height: 10px;
background-color: red;
display: block;
border-radius: 5px;
}
高级动画：
HTML部分：
<body> <div> <span>这是一个跑马灯。。。。。。。。</span> </div> <section></section> </body>
CSS部分：
body{
margin: 0;
}
section{
width: 300px;
height: 300px;
background-color: red;
position: absolute;
left: 100px;
top: 100px;
animation: move 2s linear;
/*属性规定动画在播放之前或之后，是否可见*/
/*animation-fill-mode: forwards;*/
animation-fill-mode: backwards;
/*animation-fill-mode: both;*/
animation-delay: -0.5s;
/*定义属性是否轮流反向播放动画*/
/*animation-direction: alternate-reverse;*/
/*animation-direction: alternate;*/
animation-direction: reverse;
/*播放次数*/
animation-iteration-count: 4;
}
@keyframes move{
from{
left: 100px;
}
to{
left: calc(100% - 100px - 300px);
}
}
div{
height: 50px;
width: 100%;
background-color: blue;
}
div span{
display: block;
height: 100%;
width: 600px;
color: white;
font-size: 25px;
font-weight: bold;
position: absolute;
animation: move1 5s linear infinite;
}
@keyframes move1{
from{
left: 100%;
}
to{
left: -100%;
}
}
演示效果：（如有打不开，请点击右键在新标签中打开）
