<!doctype html> <html> <head> <meta charset="utf-8"> <title>css3箭头水平淡入淡出(整理)</title> <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_695050_qf5jdjknto.css"> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> @keyframes move { 0% {left: 0%; opacity: 0; } 70% { left: 70%; opacity: 1 } 100% {left: 100%;opacity: 0;} } .move{-webkit-animation-name:move;animation-name:move;position:relative;margin-left:-30px;} .ar-animated{-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;font-style:inherit;-webkit-animation-timing-function:linear;animation-timing-function:linear;font-size: 30px;} .ar-delay-1s{animation-delay:0.1s;} .ar-delay-2s{animation-delay:0.2s;} .ar-delay-3s{animation-delay:0.3s;} .ar-delay-4s{animation-delay:0.4s;} .ar-delay-5s{animation-delay:0.5s;} .ar-delay-6s{animation-delay:0.6s;} .ar-delay-7s{animation-delay:0.7s;} .ar-delay-8s{animation-delay:0.8s;} .ar-delay-9s{animation-delay:0.9s;} .ar-delay-10s{animation-delay:0.10s;} </style> </head> <body> <div> <span style="width:35px;display: block"> <i class="move ar-animated ar-delay-4s iconfont icon-arrow-right"></i> <i class="move ar-animated ar-delay-3s iconfont icon-arrow-right"></i> <i class="move ar-animated ar-delay-2s iconfont icon-arrow-right"></i> <i class="move ar-animated ar-delay-1s iconfont icon-arrow-right"></i> <i class="move ar-animated iconfont icon-arrow-right"></i> </span> </div> </body> </html>
css3箭头水平淡入淡出
2023-09-16
31
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
css3箭头水平淡入淡出
目录
相关文章
|
11天前
|
前端开发
JavaScript
如何利用 CSS3 动画实现元素的淡入淡出效果？
在上述代码中，定义了一个名为 `fade-in` 的CSS类，其初始透明度为0，并设置了淡入的过渡效果。当通过JavaScript为元素添加 `active` 类时，元素的透明度变为1，实现淡入效果；当再次点击按钮移除 `active` 类时，元素又会逐渐淡出。通过这种方式，可以根据用户的操作灵活地控制元素的淡入淡出效果。
66
3
3
|
4月前
|
前端开发
JavaScript
|
JavaScript
前端开发
开发者
哈哈哈 原来使用jQuery+CSS就可以实现图片自动切换轮播效果是那么简单的事情 搞了个小米商城官网淡入淡出自动轮播图效果来看看也挺好玩的 附上实例完整代码
使用jQuery+CSS实现图片自动切换轮播效果
133
0
0
|
6月前
|
前端开发
JavaScript
|
前端开发
|
前端开发
|
前端开发
|
前端开发
|
前端开发
