欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css3实现画对号动画

程序员文章站 2022-03-01 21:19:09
...

目标:实现对号动画,慢慢画出来的感觉;

原理:外层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>