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

原理：外层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. 【DB2】索引

    1. 索引的概念 1.1 索引的优点 索引是表的一个或多个列的键值的有序列表,创建索引的原因有2个: 确保一个或多个列中值的唯一性 提高对表进行的查询的性能.当查询时想要以更快的速度找到所需要的列,或 ...

  2. Excel Vlookup 列查找函数

    列查找函数语法:vlookup(lookup_value,table_array,col_index_num,[range_lookup]) lookup_value:要查找的值,数值.引用或文本字符 ...

  3. 友盟消息push功能

    友盟地址:https://i.umeng.com/user/products 一.android 1.产品->U-App/U-push->立即使用->管理->左侧-集成测试-& ...

  4. HP LoadRunner：怎样连接到HP ALM的CAC模式？

    你听说过使用HP LoadRunner连接到HP ALM的CAC模式么?本文给大家讲讲什么是CAC,怎样连接到HP ALM的CAC模式中. CAC是什么? CAC全称是Common Access Ca ...

  5. Gerrit最简工作流

    Gerrit最简工作流: git clone  ...  //注意clone with commit-msg hook,否则push可能失败(ERROR: missing Change-Id in c ...

  6. apache2.2 虚拟主机配置(转)

    转自:http://blog.csdn.net/zm2714/article/details/8351342 一.改动httpd.conf 打开appserv的安装文件夹,找到httpd.conf文件 ...

  7. 【LeetCode】208. Implement Trie (Prefix Tree)

    Implement Trie (Prefix Tree) Implement a trie with insert, search, and startsWith methods. Note:You ...

  8. Linux下Valgrind的使用概述 来源：Linux社区 作者：dndxhej

    本地使用情况,在Ubantu系统上编写的测试性能: 1,下载:sudo apt-get install valgrind; 2,验证是否安装成功:试着valgrind ls -l来检测是否正常工作: ...

  9. java 实现二分法

    http://www.cnblogs.com/vanezkw/archive/2012/06/29/2569470.html JDK里面的二分法实现.二分法的实现有多种今天就给大家分享两种.一种是递归 ...

  10. Rplidar学习（二）—— SDK库文件学习

    SDK头文件介绍 1.头文件简介: rplidar.h //一般情况下开发的项目中仅需要引入该头文件即可使用 RPLIDAR SDK 的所有功能. rplidar_driver.h //定义了 SDK ...