<!doctype html> <html> <head> <meta charset="utf-8"> <title>css光泽一闪而过的效果</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> .box { position:relative; overflow:hidden; cursor:pointer; margin:0 auto; width:1000px; } @-webkit-keyframes changeImg { from { left:-100%; } 100% { left:150%; } } .shan { position:absolute; -webkit-animation:changeImg 3s ease 0s; -o-animation:changeImg 3s ease 0s; animation:changeImg 3s ease 0s; top:0; width:30%; height:100%; content:""; background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 100%); background:-o-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 100%); background:-moz-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 100%); background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 100%); transform:skewX(-45deg); animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; } </style> </head> <body> <div class="box"> <img alt="" src="http://www.jq22.com/img/cs/500x300-2.png" style="display:block;"> <b class="shan"></b> </div> </body> </html>
css光泽一闪而过的效果（整理）
2023-09-16
41
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
css光泽一闪而过的效果（整理）
目录
相关文章
|
19天前
|
前端开发
UED
【专栏：工具与技巧篇】CSS Sprites 与图标字体：优化网页图标加载
【4月更文挑战第30天】本文探讨了网页图标优化的两种方法：CSS Sprites和图标字体。CSS Sprites通过合并图标减少HTTP请求，提高加载速度，但维护复杂；图标字体则提供良好扩展性和定制性，易于调整大小和颜色。两者各有优劣，适用于不同场景。在实际应用中，应结合使用，根据项目需求灵活选择，以实现最佳性能优化和用户体验。
21
1
1
|
10月前
|
前端开发
|
前端开发
|
编解码
前端开发
JavaScript
|
Web App开发
前端开发
Java
|
前端开发
索引
容器
|
前端开发
|
前端开发
JavaScript
复刻解析一个流光溢彩炫到掉渣的 CSS 动画按钮
最近在看 next.js 官网是被引流到 conf 页面，发现上面有一个炫酷的按钮，按钮的边框色彩不断变动给人感觉是光在随着按钮旋转一般，感觉挺酷的，复刻一下讲解下原理。
332
0
0
|
前端开发
|
前端开发