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

原理：外层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. Mingw编译DLib

    Mingw编译DLib 因为机器上安装了qt-opensource-windows-x86-mingw530-5.8.0,所以准备使用其自带的mingw530来编译DLib使用. 因为DLib使用CM ...

  2. Samba共享及自动挂载测试

    要求: 1.在server0服务器上安装配置samba,工作组为STAFF,共享目录/smb1, 共享名smb1,仅允许192.168.100.0/24网段中的主机访问.samba用户user1可以读 ...

  3. Oracle死锁导致的tomcat抛损坏的管道异常

    今天遇到个问题,就是由于清空数据库的数据,设备采集客户端一直在往服务器上发采集回来的数据,但是由于某种原因,数据库的某语句死锁了. 数据库的死锁语句是通过这个SQL查出来的:select sql_te ...

  4. Oracle的悲观锁和乐观锁

    为了得到最大的性能,一般数据库都有并发机制,不过带来的问题就是数据访问的冲突.为了解决这个问题,大多数数据库用的方法就是数据的锁定. 数据的锁定分为两种方法,第一种叫做悲观锁,第二种叫做乐观锁.什么叫 ...

  5. 用dockerfile构建基于centos系统的jar包的镜像

    实际示例: [root@master01 home-dataline]# ls dataline.jar Dockerfile jdk-8u181-linux-x64.tar.gz [root@mas ...

  6. （原）ubuntnu中anaconda的g++提示crtbeginS.o:unrecognized relocation

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6950263.html 自从使用anaconda后,方便是方便了,也遇到了很多蛋疼的问题. 这次使用an ...

  7. Oslo 相机 App

    https://itunes.apple.com/cn/app/osho/id1203312279?mt=8.它支持1:1,4:3,16:9多种分辨率拍摄,滤镜可在取景框的实时预览,拍摄过程可与滤镜实 ...

  8. 构建高性能数据库缓存之redis（二）

    一.概述 在构建高性能数据库缓存之redis(一)这篇文档中,阐述了Redis数据库(key/value)的特点.功能以及简单的配置过程,相信阅读过这篇文档的朋友,对Redis数据库会有一点的了解,此 ...

  9. VS2010编译Boost 1.56

    (1)首先下载源代码:http://softlayer-dal.dl.sourceforge.net/project/boost/boost/1.56.0/boost_1_56_0.zip 解压到某个 ...

  10. CListCtrl行高问题最终解决方法

    原文链接: http://blog.csdn.net/benny5609/article/details/1967078 解决方案: 1. 设置List Control的属性 Owen Draw Fi ...