Css3 - 元素不停的旋转

请手动添加其他兼容性

#box{height:55px;position:relative}
#refresh{left:50%;position:absolute;top:0;animation:change 1s linear infinite;}
@-webkit-keyframes change{0%{-webkit-transform:rotate(0)} 50%{-webkit-transform:rotate(180deg)} 100%{-webkit-transform:rotate(360deg)}}
@keyframes change{0%{transform:rotate(0)}  50%{transform:rotate(180deg)} 100%{transform:rotate(360deg)}}
时间： 2024-08-24 22:03:01

Css3 - 元素不停的旋转的相关文章

css3+jquery制作3d旋转相册<转>

css3+jquery制作3d旋转相册 首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准备 新建三个文件夹分别命名为css,js,img分别存放demo.css,jquery.js.demo.js,11张示例图片.新建demo.html将demo.css,jquery.js,demo.js引入. 二.图片倒影制作 1 <div id="wr

纯css3实现的圆形旋转分享按钮

之前已经为大家介绍了好几款css3按钮,今天要为大家介绍的是一款纯css3实现的圆形旋转分享按钮.旋转的角度可以自己调整.在demo中演示了三个角度旋转.360度,60度,-360度.如图: 在线预览   源码下载 看下实现代码: html代码: <b>360 degree spin onMouseover and onMouseout</b></p> <p id="socialicons"> <a href="http:

wap图片滚动特效_无css3 元素js脚本编写

手机图片滑动切换,网上有很多这样的例子,但都借助于其他组件,让代码混乱的不行:还有就是用到css3里的 transform:translate(x,y);移动元素,不过发现在不支持css3的设备上马上完蛋了,所 有下定决心自己做一个,谁知出现了很多的问题,其中最重要的是给图片加链接,网页中的上下滚动条不能在拖动图片的时候滚动,并且不能兼容pc机器上的拖动:在这里就简单介绍一下遇到的问题和解决的方法: 问题一:给图片加上链接后,在拖动的时候总是跳到其他页面: 问题根源主要是不能判断是点击还是拖动,

基于css3的3D立方体旋转特效

今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : 在线预览   源码下载 实现的代码. html代码: <div class="wrap"> <div class="box1 box"> 1</div> <div class="box2 box">

一款基于css3鼠标经过圆形旋转特效

今天给大家分享一款基于css3鼠标经过圆形旋转特效.当鼠标经过的时候图片边框颜色旋转,图片显示详情.该实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="case-content"> <div class="case-item"> <div class="ih-item circ

css3实现椭圆轨迹旋转

css3实现椭圆轨迹旋转 实现效果 X轴Y轴在一个矩形内移动 做斜线运动 1 .ball { 2 position: absolute; 3 animation: 4 animX 2s linear infinite alternate, 5 animY 2s linear infinite alternate 6 } 7 @keyframes animX{ 8 0% {left: 0px;} 9 100% {left: 500px;} 10 } 11 @keyframes animY{ 12

使用CSS3生成一个会旋转的太极八卦图

学习了CSS3 后,可以做出很多炫酷的效果,但是基本功需要打扎实,就从学习使用纯CSS技术生成太极八卦图学起. 第一步,先使用HTML进行一下简单的布局,如下,只需要一个DIV即可: <body> <div></div> </body> 第二步,插入了DIV之后, 就需要为其添加样式,以及设置其为圆形,我们宽要设置的是高的2倍,这样在为底边框添加了宽度后,保证DIV出来后是圆形,如下: div { width:500px; height:250px; bor

CSS3实现嵌套立方体旋转的3D效果

刚发现一个网站上面的3D立方体效果挺好看的,就模仿着用CSS3实现了一个类似的效果:http://1.huizit1.applinzi.com//CSS/transform_3D/cube_3D.html 这样的3D透视效果主要是用了perspective和transform-style: preserve-3d;这两个属性.然后在相应的元素上添加transform就行了. 先看一下布局结构: <div class="container"> <div class=&q

使用纯CSS3实现一个3D旋转的书本

有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种, 无需复杂的建模过程,使用图片和CSS3的一些变换即可实现更好的展示效果,简洁而实用. 书本的3D模型是所有商品中最为简单的,因为其本质上就是一个立方体(cube),只是带有封面/封底和左侧封条. 所以要构造一个3D书本展示,问题就被分解为构造一个立方体+旋转+图片背景. 1. 构造一个立方体 要创建一个立方体,首先我们需要创建一个虚拟的三维视觉空间,这可以通过设置包容器元素的perspectiv