css3 向上淡入小图标翻转 360度旋转

代码

<!DOCTYPE HTML>
<html>
<style type="text/css">div {border: 1px solid red;}/*向上淡入*/.wrap {width: 800px;height: 200px;position: relative;}.moveUpBox {position: relative;width: 683px;height: 99px;background: url(1.jpg) no-repeat;top: 120px;animation: moveUp 0.6s ease-out 0.2s both 1;-moz-animation: moveUp 0.6s ease-out 0.2s both 1;-webkit-animation: moveUp 0.6s ease-out 0.2s both 1;}/*小图标翻转*/.iconRoll {width: 40px;height: 40px;display: block;margin: 2px 0;background: url(iconRoll.png);position: relative;cursor: pointer;}.iconRoll:hover {background: url(iconRoll.png) 0px 40px;transition: all 0.2s 0s ease-out;}/*360度旋转*/.roll360 a {display: block;border: 10px solid red;position: relative;}.roll360 a b {display: inline-block;width: 240px;height: 70px;background: url(roll360.png) no-repeat;background-position: 0 -140px;vertical-align: middle;-webkit-transition: all 1s;-o-transition: all 1s;transition: all 1s;}.roll360 a:hover b {opacity: 0;filter: alpha(opacity=0);-webkit-transform: rotateY(180deg);-ms-transform: rotateY(180deg);-o-transform: rotateY(180deg);transform: rotateY(180deg);}.roll360 a p {position: absolute;left: 0;top: 0;background-color: #fff;text-align: left;color: #333;opacity: 0;filter: alpha(opacity=0);-webkit-transition: all 1s;-o-transition: all 1s;transition: all 1s;-webkit-transform: rotateY(180deg);-ms-transform: rotateY(180deg);-o-transform: rotateY(180deg);transform: rotateY(180deg);}.roll360 a:hover p {opacity: 1;filter: alpha(opacity=100);-webkit-transform: rotateY(360deg);-ms-transform: rotateY(360deg);-o-transform: rotateY(360deg);transform: rotateY(360deg);}.roll360 a span {display: table-cell;width: 100%;height: 60px;border: 1px solid red;vertical-align: middle;}/* animate */@keyframes moveUp {from {top: 120px;opacity: 0;filter: alpha(opacity=0);}to {top: 0px;opacity: 1;filter: alpha(opacity=100);}}@-webkit-keyframes moveUp {from {top: 120px;opacity: 0;filter: alpha(opacity=0);}to {top: 0px;opacity: 1;filter: alpha(opacity=100);}}
</style><body><div class="wrap"><div class="moveUpBox"> xiaoxiaosix </div></div><div class="iconRoll"></div><div class="roll360"><a href=""><b></b><p> <span>hello</span> </p></a></div></body></html>

View Code

扩展思路：

通过控制 class ，定点播放动画

转载于:https://www.cnblogs.com/justSmile2/p/10767194.html

css3 向上淡入小图标翻转 360度旋转相关推荐

css3动画旋转360度,CSS3旋转动画(360度旋转、旋转放大、放大、移动) 用法和实例...
CSS3旋转动画(360度旋转.旋转放大.放大.移动) 用法和实例 Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet Explo ...
360度旋转图片小特效
现在,在这个网络发达的时代,一些电子商务公司,需要将自己线上的产品给买家或用户看,为了能让用户了解的更全面,那么把一个物件的产品要展示到方方面面,就要运用到360度旋转图片特效,因为上次有朋友叫我帮她 ...
html5图片自动翻转,纯js实现360度旋转预览图片特效
这是一款纯js实现360度旋转预览图片特效.该js特效仅使用120行代码,即可实现通过滑块.或鼠标手动360度旋转图片,以及自动360度旋转图片的效果. 使用方法 HTML结构 import Roll ...
jQuery 图像 360 度旋转插件
13 款最热门的 jQuery 图像 360 度旋转插件推荐时间:02月07日在 web 页面上使用 jQuery 图像 360 度旋转插件是最美也是最方便的显示图像的方式.这些超级棒的 360° ...
360环物如何发布html,制作网页上的360度旋转全景图PixMaker使用详细教程
PixMaker是一个简单方便的360度全景图片制作软件,它可以将描写一个环型场景的多个连续图片无缝地接合在一起,形成一个360度"场景"图片.可以在网页上播放,使你的页面更加生动 ...
旋转矩阵中6保6_40岁阿姨发明新型手推车，可以360度旋转，干活效率提升6倍
科技,其实很有趣!大家好,欢迎收看本期木易机械 40岁阿姨发明新型手推车,能够360度旋转,干活效率提升6倍科技的发展是我们有目共睹的,不仅是那些震惊世界的发明,就在我们的日常生活中,也有很多的小发 ...
spritespin.js插件实现图片360度旋转
1. 官网:http://spritespin.ginie.eu/: SpriteSpin是一个jQuery插件,可将图像帧转换为动画.它需要一个图像阵列或一个精确的精灵片,并像翻转书一样逐帧播放它们 ...
【Blender】使用Blender渲染一段360度旋转的动画
目录一.前言二.方法描述三.渲染设置四.结果一.前言本文主要讲述了如何使用Blender渲染一段物体360度旋转的动画. 渲染好的效果如下: 二.方法描述第一步:shift+A,我们在B ...
【精心挑选】10款基于 jQuery 的图片360度旋转插件
之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考.图片旋转展示是一种 ...

css3 向上淡入小图标翻转 360度旋转

css3 向上淡入小图标翻转 360度旋转相关推荐

最新文章

热门文章

css3 向上淡入 小图标翻转 360度旋转

css3 向上淡入 小图标翻转 360度旋转相关推荐

最新文章

热门文章

css3 向上淡入小图标翻转 360度旋转

css3 向上淡入小图标翻转 360度旋转相关推荐