<!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图片旋转的更多相关文章

  1. CSS3图片旋转特效

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  2. html5+css3图片旋转特效

    <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

  3. 纯css3图片旋转展示

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  4. CSS3 图片旋转

    .nav_all { position:relative; z-index:; width:172px; display:inline; ; } .nav_all b { display:block; ...

  5. 基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效

    本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: < ...

  6. CSS3动画旋转——（图片360°旋转）

    今天在重构网页特效的时候,想着用到一个css3的旋转特效.简单来一个demo. html <div class="box"> <img src="./y ...

  7. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  8. Rotating Image Slider - 图片旋转切换特效

    非常炫的图片旋转滑动特效,相信会给你留下深刻印象.滑动图像时,我们会稍稍旋转它们并延缓各元素的滑动.滑块的不寻常的形状是由一些预先放置的元素和使用边框创建.另外支持自动播放选项,鼠标滚轮的功能. 在线 ...

  9. 20+功能强大的jQuery/CSS3图片特效插件

    以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3. 1.jQuery图片下滑切换播放效果 这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有 ...

随机推荐

  1. 在 CentOS 6.x 上安装最新版本的 git

    在 CentOS 的默认仓库中有git,所以最简单的方法是: $ sudo yum install git 这种方法虽然简单,但是一般仓库里的版本更新不及时,比如 CentOS 仓库中的 git 最新 ...

  2. Java设计模拟菜单

    /***** * 设计一个模拟使用菜单的dos应用程序,用户可进行选择,选择错误时重新选择. * @author yanlong * 2017/5/5 */package java3;import j ...

  3. POJ1742Coins(多重背包）

    Coins Time Limit: 3000MS   Memory Limit: 30000K Total Submissions: 32309   Accepted: 10986 Descripti ...

  4. Apache Solr 初级教程（介绍、安装部署、Java接口、中文分词）

    Python爬虫视频教程零基础小白到scrapy爬虫高手-轻松入门 https://item.taobao.com/item.htm?spm=a1z38n.10677092.0.0.482434a6E ...

  5. Spark进阶之路-日志服务器的配置

    Spark进阶之路-日志服务器的配置 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 如果你还在纠结如果配置Spark独立模式(Standalone)集群,可以参考我之前分享的笔记: ...

  6. mysql名词解释

    什么是QPS? 单位时间内所处理的事务数 什么是TPS? 单位时间内所处理的查询数 响应时间 并发量 同时处理的查询请求的数量 什么是吞吐量?

  7. CentOS6.8下安装xz命令

    我们有时候会下载到.xz结尾的压缩文件,这时候需要用到xz命令来解压这类文件,而当我们想要用yum -y install xz时,又没有关于xz的安装包,因此就找到一个xz的编译安装包进行编译安装. ...

  8. 骨骼动画的原理及在Unity中的使用

    制作骨骼动画 我们看看这几步操作后,我们得到了那些数据: 1.每个皮肤顶点的初始世界坐标. 2.每个骨骼关节顶点的初始世界坐标. 3.每个顶点被骨骼顶点的影响信息. 4.骨骼如何移动. 骨骼动画原理 ...

  9. css去除苹果默认样式

    input[type="button"], input[type="submit"], input[type="reset"] { -web ...

  10. windows上使用mkdocs搭建静态博客

    windows上使用mkdocs搭建静态博客 之前尝试过用HEXO搭建静态博客,最近发现有个叫mkdocs的开源项目也是搭建静态博客的好选择,而且它支持markdown格式,下面简要介绍一下mkdoc ...