代码: CSS3动画,简单示例(鼠标移上去后,背景图片旋转)
2016-06-01 16:59
801 查看
<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>
...
相关文章推荐
- 帝国cms分页样式修改文件-注意事项
- CSS布局display,position, float属性
- [css]演示:纯CSS实现的右侧底部简洁悬浮效果
- 圆,半径自适应外层高度
- css3飞机起飞进度条
- CSS清浮动处理(Clear与BFC)
- CSS中表示cellpadding和cellspacing的方法
- 纯css九宫格布局排版
- CSS hack大全&详解(什么是CSS hack)
- css3 animation实现逐帧动画
- border-radius参数详解
- 使用CSS在页面中嵌入字体
- 用CSS如何判断IE浏览器版本?
- CSS学习笔记:display:flex
- CSS 定位体系概述
- wordpress 首页调用文章 不同样式的方法
- 通过setContentView设置activity的不同样式
- CSS基础知识解析
- LaTeX模板:实验报告封面样式
- 美化百度编辑器内容显示样式