<!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. Simple Question

    一.你会在时间序列数据集上使用什么交叉验证技术?是用k倍? 答:都不是.对于时间序列问题,k倍可能会很麻烦,因为第4年或第5年的一些模式有可能跟第3年的不同,而我们最终可能只是需要对过去几年的进行验证 ...

  2. IOS绘图的核心步骤

    在view上绘制一个图形的方式有很多种,表现形式可能不一样,但其实质步骤都是一样的: 1)获取上下文 2)绘制路径 3)添加路径到上下文 4)修改图形状态参数 5)渲染上下文 下面我们以画一个圆形来演 ...

  3. Hadoop记录-MRv2（Yarn）运行机制

    1.MRv2结构—Yarn模式运行机制 Client---客户端提交任务 ResourceManager---资源管理 ---Scheduler调度器-资源分配Containers ----在Yarn ...

  4. TCP粘包，拆包及解决方法

    在进行Java NIO学习时,发现,如果客户端连续不断的向服务端发送数据包时,服务端接收的数据会出现两个数据包粘在一起的情况,这就是TCP协议中经常会遇到的粘包以及拆包的问题.我们都知道TCP属于传输 ...

  5. bzoj千题计划306：bzoj2342: [Shoi2011]双倍回文 （回文自动机）

    https://www.lydsy.com/JudgeOnline/problem.php?id=2342 解法一: 对原串构建回文自动机 抽离fail树,从根开始dfs 设len[x]表示节点x表示 ...

  6. Every-SG游戏

    参考自 石家庄二中 贾志豪 IOI2009国家集训队论文 <组合游戏略述—— 浅谈 SG 游戏的若干拓展及变形> 一.定义 游戏规则加上 对于还没有结束的所有单一游戏,游戏者必须对其进行决 ...

  7. python 之禅 import this

    dongweiming的博客 前言 我这个博客一直都是一些技术分享,show code的地方,我从来没有写过个人生活或者情感杂谈,当然我也从来没有谈论过我对什么东西的喜恶. 很多人喜欢喷XX语言,喜欢 ...

  8. prompt更改MySQL登陆后的提示符

    临时生效 mysql> prompt \u@standby \r:\m:\s > PROMPT set to '\u@standby \r:\m:\s >' root@standby ...

  9. storm-starter 例子学习

    storm-starter 是 apache storm 针对初学者的一个用maven管理的项目示例.这篇文章记录storm-starter例子代码分析及执行. 参考:https://github.c ...

  10. 旅行商问题（TSP）、最长路径问题与哈密尔顿回路之间的联系(归约)

    一,旅行商问题与H回路的联系(H回路 定义为 哈密尔顿回路) 旅行商问题是希望售货员恰好访问每个城市一次,最终回到起始城市所用的费用最低,也即判断图中是否存在一个费用至多为K的回路.(K相当于图中顶点 ...