纯CSS实现图片抖动
实现方法:
1.将上文提到的以下JS内容删除:
$(".imagelogo").mouseover(function() {
obj = $(this);
i = 5;
timer = null;
clearInterval(timer);
timer = setInterval(function(){
obj.css({"position":"relative","left":i+"px"});
i = -i;
},50);
}); $(".imagelogo").mouseout(function() {
clearInterval(timer);
});
2.在CSS样式里加上以下内容:
@keyframes mylogo
{
from {left: 5px;}
to {left: -5px;}
} @-moz-keyframes mylogo /* Firefox */
{
from {left: 5px;}
to {left: -5px;}
} @-webkit-keyframes mylogo /* Safari 和 Chrome */
{
from {left: 5px;}
to {left: -5px;}
} @-o-keyframes mylogo /* Opera */
{
from {left: 5px;}
to {left: -5px;}
}
.imagelogo {
background: url(images/logo.png) no-repeat;
float: left;
position:relative;
width: 180px;
height: 60px;
margin: 15px 0px 0px 0px;
padding: 0px;
cursor: pointer;
animation: mylogo 1s linear 0s infinite alternate;
/* Firefox: */
-moz-animation: mylogo 1s linear 0s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: mylogo 1s linear 0s infinite alternate;
/* Opera: */
-o-animation: mylogo 1s linear 0s infinite alternate;
}
好了,有点像钟摆的样子了,上文的animation: mylogo 1s linear 0s infinite alternate是简写,展开后就是:
animation-name: mylogo ;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
纯CSS实现图片抖动的更多相关文章
- CSS3实战开发: 纯CSS实现图片过滤分类显示特效
原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...
- 利用CSS3 filter:drop-shadow实现纯CSS改变图片颜色
体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇 ...
- 纯CSS实现图片
在Web开发中.通过CSS代码也能够实现一些简单的图片,当然,假设你有耐心,也能够实现较为复杂的图片噢. 那么请问为什么有图片不去用而须要用CSS来实现呢?一是由于性能的原因,图片带给server和c ...
- css图片居中,通过纯css实现图片居中的多种实现方法
在网页布局中,图文排版是我们常用的,那么经常会遇到如何让图片居中显示呢,这篇文章将总结常用css实现图片居中的方法总结: html结构: <div class="demo" ...
- 纯CSS 多图片轮播
今天做东西的时候,遇到一个问题关于图片轮播的问题,以前也接触过(百度 人家的demo改改..),再次遇到这个问题的时候,根据以前的印象找到了demo正信心满满的准备改一下嵌进去,发现 jquery.m ...
- 纯css实现图片的灯光照射效果,高逼格图片展示
先不说技术,看实现的效果, 与原图(左图)相比,‘灯光’ 照射(右图)下的小姐姐是不是更有魅力了!! 那么下面就说说大家关心的技术实现过程. 其实这是我在学习css属性 mix-blend-mode ...
- 纯css用图片代替checkbox和radio,无js实现方法
html <ul id="is_offical_post_links"> <li> <label> <input type="c ...
- 纯css实现图片或者页面变灰色
前言 今天是个沉痛的日子,全国哀悼英雄,各大平台平日鲜丽的界面置纷纷换成了灰色,以表对逝者的安息与尊敬!!对付疫病,我没多大的本事,只能记录一点点知识来提升自己擅长的技术,待到将来能为国家尽一份绵薄之 ...
- 通过纯css实现图片居中的多种实现方式
html结构: <div class="demo" style="width: 800px;height: 600px; border:1px solid #ddd ...
随机推荐
- 关系型数据库与NOSQL(转)
出处:http://www.cnblogs.com/chay1227/archive/2013/03/17/2964020.html 关系型数据库把所有的数据都通过行和列的二元表现形式表示出来. 关系 ...
- Windows 8.1 应用再出发 - 创建我的第一个应用
转眼间Windows 8.1已经发布了四个多月,之前因为开发需要对Windows 8.1新特性进行过零散的学习和使用,一直没有静下心来系统的学习过.近日部门有几名新同事加入,需要进行Windows 商 ...
- 第33讲:List的一阶函数操作代码实战详解
今天来看一下关于List的一阶函数操作 让我们看下下面的代码 println(List(1,2,3,4):::List(4,5,6,7,8):::List(10,11))//列表连接 print ...
- C2第六次作业解题报告
看过题解后如果觉得还算有用,请帮忙加点我所在团队博客访问量 http://www.cnblogs.com/newbe/ http://www.cnblogs.com/newbe/p/4069834.h ...
- C++ 类的静态成员详细讲解
在C++中,静态成员是属于整个类的而不是某个对象,静态成员变量只存储一份供所有对象共用.所以在所有对象中都可以共享它.使用静态成员变量实现多个对象之间的数据共享不会破坏隐藏的原则,保证了安全性还可以节 ...
- Windows 8.1 应用开发后台任务概述(Windows XAML)
说到后台任务,这是在和许多 Android 开发者聊天的时候,经常被提起的话题之一, Windows 移动平台的后台任务的形式有别与 Android 的后台 service,简单的说在 Windows ...
- 修改注册表来修改IE的设置---资料汇总
原文链接: http://blog.csdn.net/wangqiulin123456/article/details/17068649 附带批处理执行脚本: @echo off &title ...
- C语言 栈 链式结构 实现
一个C语言链式结构实现的栈 mStack (GCC编译). /** * @brief C语言实现的链式结构类型的栈 * @author wid * @date 2013-10-30 * * @note ...
- Wix 安装部署教程(四) 添加安装文件及快捷方式
通过之前三篇的介绍,大家对wix的xml部署方式也应该有一些认识,今天天气不错,再来一发.主要介绍桌面,开始菜单,卸载等功能的如何添加.希望园友们支持! 一.如何添加文件 Demo打包程序很简单,就一 ...
- onFocus="this.blur()"的解释
onFocus="this.blur()" onFocus即获取焦点的意思,而blur却是失去焦点的意思,因此onFocus="this.blur()"的通俗理 ...