css3实现画对号动画
目标：实现对号动画，慢慢画出来的感觉；
原理：外层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实现画对号动画的更多相关文章
- CSS3鼠标滑过动画线条边框特效
基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...
- css3实现循环执行动画，且动画每次都有延迟
一.最终效果 需求:gift图片的小动画每隔2s执行一次. 需求就一句话,我们看一下实现过程. 二.实现过程 1.网页结构 <!DOCTYPE html> <html lang=&q ...
- 使用 CSS3 动感的图片标题动画效果【附源码下载】
在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...
- jQuery+CSS3实现404背景动画特效
效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: ...
- css3中变形与动画（三）
transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...
- css3 实现逐帧动画
css3 实现逐帧动画 实现逐帧动画需要使用到的是Animation动画,该CSS3的Animation有八个属性:分别是如下:1: animation-name2: animation-durati ...
- 纯css3 加载loading动画特效
最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...
- 2款不同样式的CSS3 Loading加载动画 附源码
原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
- [CSS3] 学习笔记-CSS动画特效
在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换 转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换, ...
随机推荐
- SICK LMS111激光雷达的使用
LMS111系列是SICK推出的一款用于室外区域防撞.测量及安防的激光扫描器.LMS111同西克其他扫描器一样,采用成熟的ToF原理,非接触式检测,且加入了最新的多次回波检测技术(两次回波),使得LM ...
- FTP下载工具
开源的FTP下载工具,FTP搬运工.... 01.FileZilla_3.21.0_win64 官方地址: https://filezilla-project.org/ 下载地址: http://pa ...
- Ubuntu16.04 Arduino UNO R3开发板
使用的是国内改过的版本, usb芯片换成了ch341, 晶振不是原版的16MHz而是12MHz, 杜邦线孔布局和原版一致. 设备连接 在Ubuntu16.04下不需要驱动, 能直接认出ch341设备 ...
- 【apache】phpstudy中apache 隐藏入口文件index.php （解决no input file specified错误）
步骤: 下面我说下 apache 下 ,如何 去掉URL 里面的 index.php 例如: 你原来的路径是: localhost/index.php/Index/index改变后的路径是: loca ...
- cas配置不通过登陆校验的页面
项目中的单点登录是通过CAS配置的,如果是未登录状态,那么请求在通过CAS过滤器校验时会转向登陆页面,无法通过访问类似http://localhost:8080/portal/business-plu ...
- tableview中头部信息
//创建tableview中头部的文件#define kPadding 10 #define kIconWidth 100 #define kIconHeight 100 #define kCount ...
- （原）torch中的序列化
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6591667.html 参考网址: https://github.com/torch/torch7/bl ...
- 新安装的ubuntu编辑器问题
转自:https://blog.csdn.net/xiangaichou/article/details/20235041 VI部分 1. 上下左右总是出ABCD,还占行,特难用.这种情况出现在ubu ...
- sql server @@ROWCOUNT 会被 if 给 清 0
官方说 @@ROWCOUNT 会被以下几种语句清0 原文如下: Statements such as USE, SET <option>, DEALLOCATE CURSOR, CLOS ...
- rviz学习笔记（二）——Markers: Points and Lines (C++) 点和线
一.在using_marker/src中编写点和线代码 vim ~/catkin_ws/src/using_marker/src/points_and_lines.cpp 编写代码,其中有注释 #in ...