目标：实现对号动画，慢慢画出来的感觉；

原理：外层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. 转 php 5.3.6中php-fpm 配置

    php 5.3.6 中 php-fpm 配置 成 服务启动 从php5.3.3开始 源码中开始包含 php-fpm,不用专门再打补丁了,只需要解开源码直接configure, 关于php-fpm的编译 ...

  2. 获取spring的ApplicationContext几种方式【转】

    转自:http://blog.sina.com.cn/s/blog_9c7ba64d0101evar.html Java类获取spring 容器的bean 常用的5种获取spring 中bean的方式 ...

  3. Centos6.5卸载图形化

    问题描述: Centos6.5想运行在非图形化状态,减小系统资源的开销!提升服务器性能....... 问题解决: 01.切换运行模式,变相实现非图形化运行 多用户模式 init 图形化模式 init ...

  4. rhel7.x配置本地yum

    转载:http://www.mvpbang.com/articles/2017/12/22/1513948827684.html rhel7.x配置本地yum 环境: centos7.4 vmarew ...

  5. java计算时间差, 日期差小结

    转自:https://blog.csdn.net/sy793314598/article/details/79544796 1.java 7中的日历类Calendar Calendar类使用其静态的g ...

  6. CASE WHEN 及 SELECT CASE WHEN的用法(写了一坨烂代码发现两条sql就行了, 哎)

    转自:http://blog.sina.com.cn/s/blog_4c538f6c01012mzt.html Case具有两种格式.简单Case函数和Case搜索函数. 简单Case函数 CASE  ...

  7. 我的Maven POM配置

    刚刚把项目从Ant转到Maven,费了好多劲,主要是对Maven边用边学.问题主要集中在项目结构上不太一样,在程序的访问上也有区别,调试和打包等也和原来不太一样.终于折腾完一个可以正常运行的POM配置 ...

  8. 线程同步之mutex和Semaphore

    表示之前对semaphore信号量木有神码概念. 比较纳闷这玩意要干嘛,好吧继续stackflow: Mutex can be released only by thread that had acq ...

  9. 神文章2：文本矩阵简述 V1.0 -vivo神人

    评论: 牛逼的业余书籍爱好者读书思路,指导思想. 2013/9/22         文本矩阵简述 V1.0http://www.douban.com/note/170688812/ 文/vivo   ...

  10. mac使用phpize进行安装的时候碰到的问题

    问题: grep: /usr/include/php/main/php.h: No such file or directory grep: /usr/include/php/Zend/zend_mo ...