目标：实现对号动画，慢慢画出来的感觉；
原理：外层div的背景是一个对号图片，用一个div做遮罩，让遮罩div层从左到右做运动一次即可实现动画，需要注意的是遮罩div的初始位置应该在外层div的外面；
代码如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css对号动画</title>
<style type="text/css">
.td {
position: relative;
background: #5bd8ca url(d.png) no-repeat;
width: 24px;
height: 35px;
overflow: hidden;
}
.td img {
width: 24px;
height: 35px;
}
.mask {
position: absolute;
width: 24px;
height: 35px;
animation: myfirst 2s;
-moz-animation: myfirst 2s;
-webkit-animation: myfirst 2s;
-o-animation: myfirst 2s;
top: 0;
background: #5bd8ca;
left: 24px;
}
@keyframes myfirst {
0% {
left: 0;
}
100% {
left:24px;
}
}
@-moz-keyframes myfirst {
0% {
left: 0;
}
100% {
left:24px;
}
}
@-webkit-keyframes myfirst {
0% {
left: 0;
}
100% {
left:24px;
}
}
@-o-keyframes myfirst {
0% {
left: 0;
}
100% {
left:24px;
}
}
</style>
</head>
<body>
<div class="td">
<div class="mask"></div>
</div>
</body>
</html>
时间： 2024-11-04 04:39:17