<!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. cookies 不同端口 是可以共享的

    cookies 不同端口,是跨域吗? 我部署了两套系统在同一个ip上!8080,和8090! 这样.cookies,算跨域吗? 两套系统都记录了都有一个 historyItem的key的cookies ...

  2. calloc()的使用

    百度百科 calloc是一个ISO C函数 函数名: calloc 函数原型:void *calloc(size_t n, size_t size): 功 能: 在内存的动态存储区中分配n个长度为si ...

  3. 方法重载（overroad）和方法覆盖（override）------java基础知识总结

    a.什么是方法重载?(同一个类中)方法重载是指在同一个类中,出现方法名相同,参数列表不同的情况. b.什么是方法覆盖?(子父类中)方法覆盖是指在子类中,出现和父类一模一样的方法声明的时候,会运行子类的 ...

  4. mac 本上对 rar 压缩包解压

    以前从晚上各种找软件对 xxx.rar 压缩包文件进行解压,也确实找到过那么几个,要不是不好用就是解压完有乱码,很是头疼. 这次又遇到这样的问题,于是下定决心将这个问题彻底解决好,经过验证,总结一下最 ...

  5. CodeBlock 快捷键大全

     一款开源的C/C++ IDE(集成开发环境),基于wxWidgets GUI体系,跨平台支持. 编辑器 快捷键 功能 Ctrl+Z 恢复上一次操作 Ctrl+Shift+Z 重复上一次操作 F1 ...

  6. ActiveMQ进阶配置

    配置web管理页面的安全认证 配置web管理页面的绑定IP和端口 配置MQ连接的安全认证 禁用不使用的连接协议 绑定协议连接端口到指定IP 使用MySql作为持久化保存 配置基于JDBC的高可用环境 ...

  7. C# 进程的挂起与恢复

    1. 源起: 仍然是模块化编程所引发的需求.产品经理难伺候,女产品经理更甚之~:p 纯属戏谑,技术方案与产品经理无关,芋头莫怪! VCU10项目重构,要求各功能模块以独立进程方式实现,比如:音视频转换 ...

  8. python Twisted安装报错

    系统 mac pro 错误信息: IOError: [Errno 63] File name too long: '/var/folders/72/byjy11cs0dj_z3rjtxnj_nn000 ...

  9. J - Joseph and Tests Gym - 102020J （二分+线段树）

    题目链接:https://cn.vjudge.net/contest/283920#problem/J 题目大意:首先给你n个门的高度,然后q次询问,每一次询问包括两种操作,第一种操作是将当前的门的高 ...

  10. fnmatch模块的使用

    fnmatch模块的使用 此模块的主要作用是文件名称的匹配,并且匹配的模式使用的unix shell风格.fnmatch比较简单就4个方法分别是:fnmatch,fnmatchcase,filter, ...