基于animation.css实现动画旋转特效
2023-09-27 14:28:19 时间
分享一款基于animation.css实现动画旋转特效。这是一款基于CSS3实现的酷炫的动画旋转特效代码。效果图如下:
实现的代码。
html代码:
<div class="wrap"> <div class="mod_bg"> <div class="bg1"></div> <div class="bg2"></div> <div class="bg3"> <div class="bg3_1"></div> <div class="bg3_2"></div> <div class="bg3_3"></div> </div> <div class="bg4"></div> </div> <div class="main" id="J_main"> <div class="mod_info1"> <div class="mod_info1__flash mod_info1__f"></div> <div class="mod_info1__flash1 mod_info1__f"></div> <div class="mod_info1__flash2 mod_info1__f"></div> <div class="mod_info1__flash3 mod_info1__f"></div> <div class="mod_info1__logo1 mod_info1__logoall"></div> <div class="mod_info1__logo2 mod_info1__logoall"></div> <div class="mod_info1__logo3 mod_info1__logoall"></div> </div> </div> </div> <script type="text/javascript"> $('.mod_info2__power3').on('mouseover', function (e) { $('.mod_info2__power3').addClass('play'); }); $('.mod_info2__power3').on('mouseout', function (e) { $('.mod_info2__power3').removeClass('play'); }); $('.mod_info2__power1').on('mouseover', function (e) { $('.mod_info2__power1').addClass('play'); }); $('.mod_info2__power1').on('mouseout', function (e) { $('.mod_info2__power1').removeClass('play'); }); $('.mod_info2__power2').on('mouseover', function (e) { $('.mod_info2__power2').addClass('play'); }); $('.mod_info2__power2').on('mouseout', function (e) { $('.mod_info2__power2').removeClass('play'); }); $('.mod_info2__power4').on('mouseover', function (e) { $('.mod_info2__power4').addClass('play'); }); $('.mod_info2__power4').on('mouseout', function (e) { $('.mod_info2__power4').removeClass('play'); }); // setTimeout(function() { // $('.mod_info2__power3').addClass('play'); // $('.mod_info2__power1').addClass('play'); // $('.mod_info2__power2').addClass('play'); // $('.mod_info2__power4').addClass('play'); // },1000); // setTimeout(function() { // $('.mod_info2__power3').removeClass('play'); // $('.mod_info2__power1').removeClass('play'); // $('.mod_info2__power2').removeClass('play'); // $('.mod_info2__power4').removeClass('play'); // },4000); </script>
相关文章
- JavaScript动画实例:沿圆周运动的圆圈
- CSS动画实例:正方形动画特效
- CSS动画实例:旋转的同心圆
- CSS动画实例:圆的涟漪扩散
- CSS 奇思妙想边框动画
- 谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!
- CSS - 音乐盒 360° 无限循环旋转动画(元素转圈)
- CSS - 元素旋转动画(360度转圈)
- Unity2D像素游戏开发——Aseprite简单人物绘画+动画制作导出精灵表示例
- 环形动画加载视图AnimatedCircleLoadingView
- 爆炸销毁动画组件Explosions
- 【Harmony OS】【ARK UI】【Demo】加载动画实现
- 华为快应用在setInterval中绘制canvas动画卡顿,怎么破
- css动画
- SwiftUI 自定义组件大全之自带动画的 Fast Action Button 菜单
- SwiftUI与Combine教程之做个乒乓球的动画效果(PassthroughSubject)
- HTML5 Canvas爱心表白动画特效
- iOS开发基础知识:Core Animation(核心动画)
- Animate.css 动画效果
- JS动态监听用户行为事件,并且添加CSS动画的实现
- 有趣的HTML实例(五) 加载页面动画Ⅱ(css)
- css实现加入购物车动画(水平抛物线)
- jquery动画
- CSS动画:transition触发动画和animation非触发动画
- css 的过渡(transition) 和动画(animation)
- 利用雪碧图,完成兔子走路过渡/动画效果
- 关于Unity中Mecanim动画的动画状态代码控制与代码生成动画控制器
- css心跳动画
- JavaScript之JS实现动画效果