css3图片旋转
<!DOCTYPE html>
<html lang="en"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css3实现社交图标旋转效果</title>
</head> <style> #container { width: 960px; margin: 0 auto; } ul { width: 145px; margin: 0 auto; list-style: none; font-size: 0px; } li a { background: url(images/sprite.png) no-repeat; background-position: -55px 0; display: block; text-indent: -9999px; margin-top: 15px; }
li a span { background: url(images/sprite.png) no-repeat; display: block; width: 30px; height: 32px; position: relative; z-index: 10;
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
}
li a:hover span {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
} li.twitter a { background-position: -55px 0; width: 127px; height: 32px; }
li.twitter a span { background-position: 0 0; } </style> <body> <div id="container"> <h1></h1> <ul id="social" class="group"> <li class="twitter"><a href="#"><span></span>
twitter</a></li> </ul>
</body>
</html>
li a span { background: url(images/sprite.png) no-repeat; display: block; width: 30px; height: 32px; position: relative; z-index: 10;
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
}
li a:hover span {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
css3图片旋转的更多相关文章
- CSS3图片旋转特效
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- html5+css3图片旋转特效
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 纯css3图片旋转展示
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- CSS3 图片旋转
.nav_all { position:relative; z-index:; width:172px; display:inline; ; } .nav_all b { display:block; ...
- 基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效
本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: < ...
- CSS3动画旋转——(图片360°旋转)
今天在重构网页特效的时候,想着用到一个css3的旋转特效.简单来一个demo. html <div class="box"> <img src="./y ...
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
- Rotating Image Slider - 图片旋转切换特效
非常炫的图片旋转滑动特效,相信会给你留下深刻印象.滑动图像时,我们会稍稍旋转它们并延缓各元素的滑动.滑块的不寻常的形状是由一些预先放置的元素和使用边框创建.另外支持自动播放选项,鼠标滚轮的功能. 在线 ...
- 20+功能强大的jQuery/CSS3图片特效插件
以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3. 1.jQuery图片下滑切换播放效果 这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有 ...
随机推荐
- 发送邮件时Unable to relay错误的解决方法 转
使用python的smtplib发送邮件,使用新浪的smtp服务,在本地测试正常.但把程序部署到服务器后,却连不上新浪的smtp服务器,可以ping通,但telnet 25端口失败,导致程序无法正常运 ...
- kubernetes控制器之DaemonSet
转载于https://blog.csdn.net/bbwangj/article/details/82867472 什么是 DaemonSet? DaemonSet 确保全部(或者一些)Node 上运 ...
- memcache、redis原理对比
一.问题: 数据库表数据量极大(千万条),要求让服务器更加快速地响应用户的需求. 二.解决方案: 1.通过高速服务器Cache缓存数据库数据 2.内存数据库 ( ...
- shell关于变量的操作
一.变量和:-连用 bin=`dirname "${BASH_SOURCE-$0}"` bin=`cd "$bin"; pwd` DEFAULT_LIBEXEC ...
- GoLang基础数据类型-切片(slice)详解
GoLang基础数据类型-切片(slice)详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 数组的长度在定义之后无法再次修改:数组是值类型,每次传递都将产生一份副本.显然这种数 ...
- $使用dom4j可解析 返回&#x等字样的 html转义字符【转】
如果以GET或POST请求某个系统返回,带有 $#x 那很有可能是axis服务器返回的. <?xml version="1.0" encoding="UTF-8&q ...
- 03-依赖倒置原则(DIP)
1. 背景 类A是高层代码,类A直接依赖B,如果要将类A改为还要依赖C,则必须修改类A的代码来实现.在实际场景中,类A是高层,负责业务逻辑,类B和类C是低层模块,负责基本的原子操作,假如修改A,会给程 ...
- HTML5的 input:file上传 以及 类型控制
以HTML5的文件上传API 如下demo代码在.html文件打开即可: !DOCTYPE html> <html lang="zh_cn"> <head& ...
- EasyUI动态修改easyui-textbox验证信息
<tr> <td>编码:</td> <td><input type="text" id="code" na ...
- Python排序算法之冒泡排序
冒泡排序 顾名思义,冒泡排序直观的意思是气泡越大冒的越快:),对应到我们的列表中就是数字最大的先选出来,然后依次进行.例如 myList = [1,4,5,0,6],比较方式为: 相邻的两个数字先进行 ...