<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<style type="text/css">
.trans-rotate{
-webkit-transition: transform .25s linear;
-moz-transition: transform .25s linear;
-o-transition: transform .25s linear;
transition: transform .25s linear;
}/* 加上这个样式后,才会在0.25秒内旋转完毕。否则只会显示立刻旋转完的结果 */ .bbox{position:relative;width:109px;height:109px;} /*总容器*/
.bbox .btnbg{position:absolute;left:0;top:0;width:97px;height:97px;border:6px solid #edf0f3;border-radius:50%;background:url('images/btnbg.png');z-index:2;}/*97x97 背景图片*/
.bbox:hover .btnbg{transform:rotate(480deg);} /* 鼠标移上去后,旋转*/
.bbox .btntxt{position:absolute;left:30px;top:25px;width:48px;height:48px;color:#fff;font-size:24px;line-height:30px;cursor:pointer;-webkit-user-select:none;font-family:'微软雅黑';z-index:3;}
</style>
<div class="bbox">
<div class="btnbg trans-rotate"></div>
<div class="btntxt">开始计算</div>
</div>

...

代码: CSS3动画,简单示例(鼠标移上去后,背景图片旋转)的更多相关文章

  1. 一款基于css3的简单的鼠标悬停按钮

    今天给大家分享一款基于css3的简单的鼠标悬停按钮.这款悬停按钮鼠标经过前边框是间断的.当鼠标经过的时候边框间隔消失.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  2. CSS3动画效果示例

    CSS3动画遵循@kwyframes规则,规定了动画的名称.时长. 1.示例代码 <!DOCTYPE html><html lang="en"><he ...

  3. css3动画简单应用

    CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript.CSS3动画的属性主要分为三类:transform.transition以及anim ...

  4. css3动画简单案例

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

  5. 一个简单且丑陋的js切换背景图片基础示例

    不多说,直接上代码,非常基础的一个原生js切换元素背景图片范例 <html> <head> <meta http-equiv="Content-Type&quo ...

  6. vue代码上传服务器后背景图片404解决方法

    问题:代码上传服务器后,图片404,使用的font-awesome图标也是404 解决办法: 如果你用了vue-cil,那么在build目录下找到utils.js中的ExtractTextPlugin ...

  7. CSS3 动画-- 鼠标移上去,div 会旋转、放大、移动

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

  8. css3动画 一行字鼠标触发 hover 从左到右颜色渐变

    偶然的机会发现的这个东东 这几天做公司的官网 老板突然说出了一个外国网站 我就顺手搜了 并没有发现他说的高科技 但是一个东西深深地吸引了我 就是我下面要说的动画  这个好像不能放视频 我就简单的描述一 ...

  9. css3动画@keyframes示例

    .active { animation: chuiziza 0.5s ease 1 forwards; } .feijindan { display: block; animation: fei 2s ...

随机推荐

  1. VUE简单组件通信

    [x] 1.prop组件通信 1.简单理解 2.多层嵌套 [x] 2.使用ref进行组件通信 [x] 3.$emit组件通信 1.prop组件通信 1.简单理解 有点类似于应式的感觉,我不管你要不要只 ...

  2. 什么是词性标注(POS tagging)

    词性标注也叫词类标注,POS tagging是part-of-speech tagging的缩写. 维基百科对POS Tagging的定义: In corpus linguistics, part-o ...

  3. 跟未名学Office - PPT操作:高效

    第二章. PPT操作:高效... 3 第一节 操作视图... 3 第二节 Word草稿... 4 第三节 幻灯片母版... 5 第四节 幻灯片页... 7 第五节 幻灯片排版... 8 第六节 模板. ...

  4. 运行startup.bat的启动过程

    一.前言 一般启动tomcat都是找到bin目录下的startup.bat(windows)下或者startup.sh(linux下),所以要研究tomcat的启动,startup脚本是避不开的.那么 ...

  5. nginx - 性能优化,突破十万并发

    一般来说nginx配置文件中对优化比较有作用的为以下几项: worker_processes 8; nginx进程数,建议按照cpu数目来指定,一般为它的倍数. worker_cpu_affinity ...

  6. Ubuntu 14.10 下安装伪分布式hbase 0.99.0

    HBase 安装分为:单击模式,伪分布式,完全分布式,在单机模式中,HBase使用本地文件系统而不是HDFS ,所有的服务和zooKeeper都运作在一个JVM中.本文是安装的伪分布式. 安装步骤如下 ...

  7. JSON Web Tokens测试工具

    JSON Web Tokens官方提供测试工具https://jwt.io某些静态资料需要链接google.twitter服务器,被墙无法访问.现在提供可以方法测试工具http://hingtai.c ...

  8. JDK类集框架实验(ArrayList,LinkedList,TreeSet,HashSet,TreeMap,HashMap)

        ArrayList import java.util.ArrayList; public class C8_3 { public static void main(String[] args) ...

  9. github_地址

    网络请求: hongyangAndroid/okhttputils(包含cookie的管理): 图片之压缩: Sunzxyong/Tiny:(http://www.tuicool.com/articl ...

  10. Java zxing生成二维码所需的jar包

    免费的,不需要积分. 共有2个jar包, 链接: https://pan.baidu.com/s/1QJcEkRQOp1NdrNAgGC6LvQ 密码: 4524