css3循环360度图片旋转

上个效果图

首先这是一张静态的 png图片

是通过添加 CSS 样式让图片旋转起来的，不是GIF动态图！

代码如下：

css：

.noDataImg{-webkit-transform: rotate(360deg);animation: rotation 3s linear infinite;-moz-animation: rotation 3s linear infinite;-webkit-animation: rotation 3s linear infinite;-o-animation: rotation 3s linear infinite;}@-webkit-keyframes rotation{from {-webkit-transform: rotate(0deg);}to {-webkit-transform: rotate(360deg);}}

html：

<div class="NoData" v-if="NoData"><p>抱歉！未搜到到相关内容。。。</p><img class="noDataImg" src="../../../static/img/nodata.png"/>
</div>

通过创建一个 rotation 的css3 动画让他每3秒完成一次循环

css3循环360度图片旋转相关推荐

360度商品展示html5,360度图片旋转产品预览展示js插件
这是一款360度图片旋转产品预览展示js插件.该360度图片旋转产品预览js插件提供多种控制产品图片旋转的方法,包括自动旋转,通过按钮来控制旋转,通过鼠标拖拽或鼠标移动来控制旋转,通过鼠标滚轮来控制旋 ...
js实现360度图片旋转
达人科技 2017-01-21 17:28 ▓▓▓▓▓▓ 大致介绍这次是一个简单的效果,就是思路的问题效果: ▓▓▓▓▓▓ 思路旋转的效果就是根据鼠标的的移动距离来显示不同的图片,形成视觉差,仿 ...
360度不停旋转动画-转圈圈
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
CSS3只让背景图片旋转180度
CSS3旋转背景图片一.心路历程二.代码实现一.心路历程最近写驾驶舱的时候琢磨了一个问题,就是单纯的使背景图片旋转的一定的角度. 只通过CSS3的transfrom让整个容器都翻转了一定的角度 ...
10 个 jQuery 的360 度图片展示插件
整合jQuery的全景图片展示插件,能帮助你的网站访客更好的浏览你的网站图片.帮助你构建虚拟旅程,全景展示和滚动,无限的图片幻灯,希望大家喜欢! 相关的插件:分享8个图片360度旋转展示的jQuery ...
html图片分类插件,360度图片全景插件JS Cloudimage 360
JS Cloudimage 360 View 是一种简单的交互式资源,可用于提供产品的虚拟浏览. 使用方法第 1 步:安装在正文标记中的body内容之后,将带有 CDN 链接的脚本标记添加到 js ...
css3圆角360度转动画,target，框架集，css3过渡动画，css3圆角-阴影-透明度，运动曲线，图片文字遮罩，变形...
target 模拟后台服务器框架集 frameset和body不合,所以如果用frameset就不能有body标签利用框架可以把浏览器窗口划分为若干个区域,每个区域就是一个框架,在其中分别显示不 ...
css3实现360度旋转的圆
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
iOS开发动画(Animation)图片360度不停旋转
{ CGFloat angle; } - (void)viewDidLoad { [super viewDidLoad]; angle = 0; [self start ...

css3循环360度图片旋转

css3循环360度图片旋转相关推荐

最新文章

热门文章