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

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

css3实现画对号动画的更多相关文章

  1. CSS3鼠标滑过动画线条边框特效

    基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...

  2. css3实现循环执行动画,且动画每次都有延迟

    一.最终效果 需求:gift图片的小动画每隔2s执行一次. 需求就一句话,我们看一下实现过程. 二.实现过程 1.网页结构 <!DOCTYPE html> <html lang=&q ...

  3. 使用 CSS3 动感的图片标题动画效果【附源码下载】

    在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...

  4. jQuery+CSS3实现404背景动画特效

    效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: ...

  5. css3中变形与动画(三)

    transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...

  6. css3 实现逐帧动画

    css3 实现逐帧动画 实现逐帧动画需要使用到的是Animation动画,该CSS3的Animation有八个属性:分别是如下:1: animation-name2: animation-durati ...

  7. 纯css3 加载loading动画特效

    最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

  8. 2款不同样式的CSS3 Loading加载动画 附源码

    原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...

  9. [CSS3] 学习笔记-CSS动画特效

    在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换 转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换, ...

随机推荐

  1. aapt 命令可应用于查看apk包名、主activity、版本等很多信息

    aapt即Android Asset Packaging Tool,在SDK的build-tools目录下,本文小结了一下该工具的用法. 配置环境变量后可直接在cmd使用该命令 http://blog ...

  2. ISCSI测试

    Initiator为应用客户端,服务端Target包括设备服务器端和队列管理两部分.服务端两种共享方式:1.在服务端共享分区2.在服务端以文件方式作为共享设备共享出来 构建ISCSI网络存储 测试环境 ...

  3. Linux 防火墙firewalld

    1.列出所有支持的 zone 和查看当前的默认 zone:[root@lxjtest ~]# systemctl start firewalld[root@lxjtest ~]# firewall-c ...

  4. ios中布局(推荐一)

    - (void)viewDidLoad { [super viewDidLoad]; NSArray *data=@[@"标题一",@"标题二",@" ...

  5. perf之sched

    如果你对你的进程的响应时间极其苛刻,有一天你发现你的进程响应时间变慢了,而恰好这个机器上也有其他的进程在跟你的进程争用CPU,你想看看你的进程被内核调度的情况,那么你需要用perf-sched工具. ...

  6. 使用import简化spring的配置 spring import 标签的解析 使用import或加载spring配置时,报错误There is no ID/IDREF 多个Spring配置文件import resource路径配置

    spring-import 标签的解析.使用案例: 对于spring配置文件的编写,我想,对于经历过庞大项目的人,都有那种恐惧的心理,太多的配置文件.不过,分模块都是大多数人能想到的方法,但是,怎么分 ...

  7. java结合使用Jsonp的例子

    更多:js跨域问题解释 解决方案值使用jsonp或jQuery Jsonp和java操作例子 介绍JSONP之前,先简单的介绍一些JSON.JSON是JavaScript Object Notatio ...

  8. 【C#】C#创建Windows Service服务

    目录结构: contents structure [+] 创建Windows服务 配置 安装Windows服务 在Visual Studio中调试 常见问题 最近写了一个TCP连接的程序,由于这种通信 ...

  9. 【java】break outer,continue outer的使用

    break默认是结束当前循环,有时我们在使用循环时,想通过内层循环里的语句直接跳出外层循环,java提供了使用break直接跳出外层循环,此时需要在break后通过标签指定外层循环.java中的标签是 ...

  10. IntelliJ IDEA 最新激活码(截止到2018年10月14日)

    IntelliJ IDEA 注册码: EB101IWSWD-eyJsaWNlbnNlSWQiOiJFQjEwMUlXU1dEIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYX ...