css3实现画对号动画
2024-10-18 22:35:41
目标：实现对号动画，慢慢画出来的感觉；
原理：外层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>
最新文章
- 关于C#使用Dllimport 导入vc++动态库后网站部署提示 “无法加载 DLL，找不到指定模块”的解决方法。
- 使用Servlet Filter做Login checking
- Redis数据持久化之AOF持久化
- 白盒测试之gtest第一个demo
- Windows Python 2.7 安装 Numpy
- ios7毛玻璃效果实现
- 【LeetCode】25. Reverse Nodes in k-Group
- IntelliJ IDEA 2016.1.4 git 切换分支详解
- SLF4J源码解析-LoggerFactory(一)
- C#设计模式之十八中介者模式（Mediator Pattern）【行为型】
- 深入浅出EF之ModelFirst和DBFirst
- XMPP系列(三）---获取好友列表、添加好友
- Python自省
- Spring的通知类型，切入表达式写法
- BZOJ4946 NOI2017蔬菜（贪心+堆）
- html介绍和head标签
- P1337 [JSOI2004]平衡点 / 吊打XXX 模拟退火
- Date与时间戳的相互转换（Java）
- Windows网络编程（C/C++服务器编程）
- angular2 引入jquery