风车360度旋转特效css3

 1  <style>
 2         #box{
 3             width: 220px;
 4             height: 220px;
 5             position: absolute;
 6             margin: 300px;
 7             transform-origin: center center;//以图形中心为旋转原点
 8             animation: anima 1s linear infinite;//永远以1秒匀速执行动画
 9         }
10         @keyframes anima{//动画帧
11             0%{
12                 transform:rotate(0deg)
13
14             }
15             25%{
16                 transform: rotate(90deg);
17             }
18             50%{
19                 transform: rotate(180deg);
20              }
21             75%{
22                 transform:rotate(270deg);
23             }
24             100%{
25                 transform: rotate( 360deg );
26             }
27         }
28     </style>

1 <body>
2 <div id="box"><img src="1.png" alt=""></div>
3 </body>

参考图片：

1.png

时间： 2024-10-03 14:01:59

风车360度旋转特效css3的相关文章

360度旋转图片小特效

现在,在这个网络发达的时代,一些电子商务公司,需要将自己线上的产品给买家或用户看,为了能让用户了解的更全面,那么把一个物件的产品要展示到方方面面,就要运用到360度旋转图片特效,因为上次有朋友叫我帮她弄这样一个效果,然后结合网上的资源,就小试牛刀了,觉得还挺好玩的,效果还是可以看的吧. 首先呢,需要在HTML文档中引入3deye.min.js文件和jq.js,这些可以在网上下载到免费的,另外,要展示到方方面面的,就要做这件物品的各个角度的图片,我这里是36张图片,每10度一张图片,好了,我就贴出

4种CSS3效果(360度旋转、旋转放大、放大、移动)

旋转: * { transition:All 0.4s ease-in-out; -webkit-transition:All 0.4s ease-in-out; -moz-transition:All 0.4s ease-in-out; -o-transition:All 0.4s ease-in-out; } *:hover { transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(

图片360度旋转

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片循环旋转</title> <style> *{margin: 0; padding: 0;} @-webkit-keyframes rotation{ from {-webkit-transform: rotate(0deg);} to {-webkit-transform:

Html5添加产品图片360度旋转插件教程

一.使用方法 <link href="/css/tikslus360.css" rel="stylesheet"> <script src="/js/jquery.min.js"></script> <script src="/js/tikslus360.min.js"></script> 二.Html结构 <div id="view360"

原生图片360度旋转

1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <style> 7 #left{ position:absolute; left:0; top:0; width:50%; hei

html5人物图片360度立体旋转

体验效果:http://hovertree.com/texiao/html5/10.htm 下载:http://hovertree.com/hvtart/bjae/t16oddyt.htm 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Full 360 degree View - HoverTree</title> <sty

CSS3图片旋转特效

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> p#socialicons img { /* 1st set of icons. Rotate them 360deg onmouseover and out */ -moz-tran

Android中轴旋转特效实现，制作别样的图片浏览器

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/10766017 Android API Demos中有很多非常Nice的例子,这些例子的代码都写的很出色,如果大家把API Demos中的每个例子研究透了,那么恭喜你已经成为一个真正的Android高手了.这也算是给一些比较迷茫的Android开发者一个指出了一个提升自我能力的方向吧.API Demos中的例子众多,今天我们就来模仿其中一个3D变换的特效,来实现一种别样的图片浏览器

Swift--使图片360° 周期旋转

UIImageView+Extension.swift import UIKit extension UIImageView { // 360度旋转图片 func rotate360Degree() { let rotationAnimation = CABasicAnimation(keyPath: "transform.rotation.z") // 让其在z轴旋转 rotationAnimation.toValue = NSNumber(double: M_PI * 2.0) /