css3 keyframes animation

html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,address,big,cite,code,del,em,font,img,ins,small,strong,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend{margin:0;padding:0;}ol,ul{list-style:none;}:focus{outline:0;}a img{border:0;}img{vertical-align:top;}table{empty-cells:show;}ins{text-decoration:none;}del{text-decoration:line-through;}em{font-style:normal;}button::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="file"]>input[type="button"]::-moz-focus-inner{border:none;padding:0;}.clearfix{*zoom:1;}.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}body{font:14px/1.5 "宋体";background:#fff;}a{color:#000;text-decoration:none;}a:hover{ text-decoration:underline;}.fl{float:left;}.fr{float:right;}.hide{display:none;}.show{display:block}.ad{display:block;height:auto;clear:both;margin-bottom:8px;overflow:hidden;zoom:1;}

#wrap{width:1000px;
      height:auto;
      clear:both;
      margin:0 auto;
      padding-left:12px;
      padding-right:12px;
      overflow:hidden;
      *zoom:1;}
.item-a li{_display:inline;float:left;margin:0 0 10px 7px}
.item-a .pic{width:312px;height:184px;border:solid 6px #e6e6e6}
@keyframes pulse {
    0% {
    transform:scale(1)
    }
    50% {
    transform:scale(1.3)
    }
    100% {
    transform:scale(1)
    }
}
@-webkit-keyframes pulse {
    0% {
    -webkit-transform:scale(1)
    }
    50% {
    -webkit-transform:scale(1.3)
    }
    100% {
    -webkit-transform:scale(1)
    }
}
@-moz-keyframes pulse {
    0% {
    -moz-transform:scale(1)
    }
    50% {
    -moz-transform:scale(1.1)
    }
    100% {
    -moz-transform:scale(1)
    }
}

.item-a li:hover .pic{
    border:solid 6px #c00202;
    animation:pulse 1s 0s ease both;
    -webkit-animation:pulse 1s 0s ease both;
    -moz-animation:pulse 1s 0s ease both;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml%22%3E%3Chead>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>爱漫莎</title>

<link href="css/master.css" rel="stylesheet" />
<body>

</body></html>

css3 keyframes animation的更多相关文章

CSS3 动画 animation和@keyframes
CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式 ...
css3 transition animation nick
时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...
CSS3 @keyframes 规则
今天来给大家分享一下CSS3 @keyframes 规则! 在你了解CSS3 @keyframes 规则时我先来给大家说说什么是css3中的动画动画是使元素从一种样式逐渐变化为另一种样式的效果. 您 ...
css3中Animation
CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...
第100天：CSS3中animation动画详解
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: 一.Animation定义动画 CSS3的Animation是由“keyframes”这个属性来 ...
模仿百度首页“元宵节汤圆”动图，并实现360°不停旋转（CSS3的animation动画效果）
模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...
CSS3 & transition & animation
CSS3 & transition & animation https://developer.mozilla.org/en-US/docs/Web/CSS/transition-ti ...
前端CSS3动画animation用法
前端CSS3动画animation用法学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...
CSS3 @keyframes 规则以及animation介绍和各种动画样式说明
一个好网站:http://www.jqhtml.com/ 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规 ...

随机推荐

CSS笔记（九）轮廓
参考:http://www.w3school.com.cn/css/css_outline.asp CSS 边框属性 "CSS" 列中的数字指示哪个 CSS 版本定义了该属性. 属 ...
LightOJ::1077 -----奇妙的最大公约数
题目:http://www.lightoj.com/volume_showproblem.php?problem=1077 题意:在平面上, 给出两个点的坐标例如:(x, y) 其中x, y 都是整 ...
细心看完这篇文章，刷新对Javascript Prototype的理解
var person={name:'ninja'}; person.prototype.sayName=function(){ return this.name; } 分析上面这段代码,看看有没有问题 ...
原生js如何获取当前所加载网页的文件路径和名称
结合使用string对象中的substr()和lastIndexOf()方法. 当前页面路径:file:///C:/Users/Administrator/Desktop/test.html < ...
08 高效的SQL
编写高效 SQL 需要以下知识有关所查询内容的物理组织的知识数据库能做什么的知识, 例如: 如果你不知道跳跃扫描索引及其用途, 那么你可能会看着模式说”索引丢了” SQL 所有错综复杂的知识对目 ...
andriod之摄像头驱动流程
camera成像原理: 景物通过镜头生产光学图像投射到sensor表面上,然后转为模拟电信号,经过数模变成数字图像信号,在经过DSP加工出来,然后在通过IO接口传输到CPU处理. 由于摄像头满足总线. ...
maven核心概念4
一.Maven坐标 1.1.什么是坐标? 在平面几何中坐标(x,y)可以标识平面中唯一的一点. 1.2.Maven坐标主要组成 groupId:组织标识(包名) artifactId:项目名称 ver ...
jQuery的选择器小总结
这一节详细的总结jQuery选择器. 一.基础选择器 $('#info'); // 选择id为info的元素,id为document中是唯一的,因此可以通过该选择器获取唯一的指定元素 $('.in ...
静态库冲突的解决办法：duplicate symbol
昨天在做微信sdk和xmpp的集成,发现各自单独集成没问题,一起集成却总报错,百度了好一会儿才知道,这应该是库冲突造成的问题然后参考了很多文章,跟着敲敲一遍,却发现问题多多,最后主要综合结合了这两个 ...
hiho_1055_刷油漆
题目大意一棵树,每个节点都有相应的value值.从根开始选择M个节点相互连通,使得这些节点的value值之和最大. 题目链接:[刷油漆][1] 题目分析典型的树形dp,dp[i][j] 表示以节点 ...

css3 keyframes animation

css3 keyframes animation的更多相关文章

随机推荐

热门专题