代码: CSS3动画,简单示例(鼠标移上去后,背景图片旋转)
<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动画,简单示例(鼠标移上去后,背景图片旋转)的更多相关文章
- 一款基于css3的简单的鼠标悬停按钮
今天给大家分享一款基于css3的简单的鼠标悬停按钮.这款悬停按钮鼠标经过前边框是间断的.当鼠标经过的时候边框间隔消失.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- CSS3动画效果示例
CSS3动画遵循@kwyframes规则,规定了动画的名称.时长. 1.示例代码 <!DOCTYPE html><html lang="en"><he ...
- css3动画简单应用
CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript.CSS3动画的属性主要分为三类:transform.transition以及anim ...
- css3动画简单案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 一个简单且丑陋的js切换背景图片基础示例
不多说,直接上代码,非常基础的一个原生js切换元素背景图片范例 <html> <head> <meta http-equiv="Content-Type&quo ...
- vue代码上传服务器后背景图片404解决方法
问题:代码上传服务器后,图片404,使用的font-awesome图标也是404 解决办法: 如果你用了vue-cil,那么在build目录下找到utils.js中的ExtractTextPlugin ...
- CSS3 动画-- 鼠标移上去,div 会旋转、放大、移动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css3动画 一行字鼠标触发 hover 从左到右颜色渐变
偶然的机会发现的这个东东 这几天做公司的官网 老板突然说出了一个外国网站 我就顺手搜了 并没有发现他说的高科技 但是一个东西深深地吸引了我 就是我下面要说的动画 这个好像不能放视频 我就简单的描述一 ...
- css3动画@keyframes示例
.active { animation: chuiziza 0.5s ease 1 forwards; } .feijindan { display: block; animation: fei 2s ...
随机推荐
- VUE简单组件通信
[x] 1.prop组件通信 1.简单理解 2.多层嵌套 [x] 2.使用ref进行组件通信 [x] 3.$emit组件通信 1.prop组件通信 1.简单理解 有点类似于应式的感觉,我不管你要不要只 ...
- 什么是词性标注(POS tagging)
词性标注也叫词类标注,POS tagging是part-of-speech tagging的缩写. 维基百科对POS Tagging的定义: In corpus linguistics, part-o ...
- 跟未名学Office - PPT操作:高效
第二章. PPT操作:高效... 3 第一节 操作视图... 3 第二节 Word草稿... 4 第三节 幻灯片母版... 5 第四节 幻灯片页... 7 第五节 幻灯片排版... 8 第六节 模板. ...
- 运行startup.bat的启动过程
一.前言 一般启动tomcat都是找到bin目录下的startup.bat(windows)下或者startup.sh(linux下),所以要研究tomcat的启动,startup脚本是避不开的.那么 ...
- nginx - 性能优化,突破十万并发
一般来说nginx配置文件中对优化比较有作用的为以下几项: worker_processes 8; nginx进程数,建议按照cpu数目来指定,一般为它的倍数. worker_cpu_affinity ...
- Ubuntu 14.10 下安装伪分布式hbase 0.99.0
HBase 安装分为:单击模式,伪分布式,完全分布式,在单机模式中,HBase使用本地文件系统而不是HDFS ,所有的服务和zooKeeper都运作在一个JVM中.本文是安装的伪分布式. 安装步骤如下 ...
- JSON Web Tokens测试工具
JSON Web Tokens官方提供测试工具https://jwt.io某些静态资料需要链接google.twitter服务器,被墙无法访问.现在提供可以方法测试工具http://hingtai.c ...
- JDK类集框架实验(ArrayList,LinkedList,TreeSet,HashSet,TreeMap,HashMap)
ArrayList import java.util.ArrayList; public class C8_3 { public static void main(String[] args) ...
- github_地址
网络请求: hongyangAndroid/okhttputils(包含cookie的管理): 图片之压缩: Sunzxyong/Tiny:(http://www.tuicool.com/articl ...
- Java zxing生成二维码所需的jar包
免费的,不需要积分. 共有2个jar包, 链接: https://pan.baidu.com/s/1QJcEkRQOp1NdrNAgGC6LvQ 密码: 4524