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

原理：外层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. Yii2框架bootstrap样式理解

    Yii2框架默认採用了bootstrap作为CSS风格,各种视图类组件都如此.之前一直採用默认风格,并在必要的时候加入或者改动一下class来达到目的.但在改版Yii1.1的orange项目时.发现之 ...

  2. 【PMP】资源平衡与资源平滑

    资源平衡:为了在资源需求与资源供给之间取得平衡,根据资源制约因素对开始日期和完成日期进行调整的一种技术 资源平滑:对进度模型中的活动进行调整,从而使项目资源需求不超过预定的资源限制的一种技术. 案例说 ...

  3. 【Excle】一个比VLOOKUP牛的函数LOOKUP

    1.根据时间查找最近发生的交易 2.多条件查找 3.反向查找 4.模糊匹配 上述例子充分说明了LOOKUP的查找特技,点击下载上述案例对应的Excle

  4. Retrofit三步理解之中的一个 ------------------ Retrofit的简单使用总结

    概念: Retrofit一開始看起来使用比較麻烦是由于它和其它网络请求框架不同的是它是通过注解和interface来进行网络请求,而且须要对返回数据进行特殊处理才干使用. 1. 简单使用,请求返回St ...

  5. 一颗可靠的时间胶囊：苹果AirPort Time Capsule测评

    http://sspai.com/24181/ 如何从 Time Machine 备份恢复数据? AirPort Time Capsule能轻松完成备份,自然也少不了方便地恢复备份.一般常见的恢复备份 ...

  6. TP3.2框架，实现空模块、空控制器、空操作的页面404替换||同步实现apache报错404页面替换

    一,前言 一.1)以下代码是在TP3.0版本之后,URL的默认模式=>PATHINFO的前提下进行的.(通俗点,URL中index.php必须存在且正确) 代码和讲解如下: 1.空模块解决:ht ...

  7. Struts2常见配置(草稿)

    Struts2框架配置文件加载的顺序(了解加载配置文件的顺序,重点掌握struts.xml配置文件) 1.Struts2框架的核心是StrutsPrepareAndExecuteFilter过滤器,该 ...

  8. python配置文件转dict

    配置文件有很多种,如JSON,properties,conf,xml等. 除非需要跟别的语言进行交互,python本身是完全可以取代所有配置文件的.使用python进行配置可以使用非常灵活地执行一些逻 ...

  9. MATLAB 不能保存变量问题及解决办法

    在使用matlab保存结构体.元胞数组等等的变量时,matlab总是提示 警告: 未保存变量 'session'.对于大于 2GB 的变量,请使用 MAT 文件版本 7.3 或更高版本.  问题如下: ...

  10. 实测iOS Dynamic Framework 对 App 启动时间的影响效果

    最近看到的Slow App Startup Times里提到: The dynamic loader finds and reads the dependent dynamic libraries ( ...