AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

css光泽一闪而过的效果（整理）

2023-09-16 108
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： css光泽一闪而过的效果（整理） 
<!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>
文章标签：
前端开发
兜里只有三分钱~
目录
相关文章
小徐在进步
|
2月前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性，通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性，并提供了实用的代码示例。此外，还简要介绍了调试工具中的一些细节，如错误属性标识和属性生效状态的控制。
小徐在进步
67 28
小徐在进步
|
2月前
|
前端开发
【前端web入门第八天】定位、CSS精灵与一些其他CSS高级技巧
定位、CSS精灵与一些其他CSS高级技巧
小徐在进步
35 9
你都不懂
|
2月前
|
设计模式 移动开发 前端开发
CSS内联样式的使用，吐血整理
CSS内联样式的使用，吐血整理
你都不懂
45 6
孙飞i
|
3月前
|
前端开发
css来实现一个好玩的按钮
这段代码实现了一个具有独特悬停效果的按钮。通过定义按钮及其`:after`伪元素，并设置初始状态下的透明度和尺寸，当鼠标悬停在按钮上时，背景色平滑过渡至另一种颜色，产生视觉上的动态扩展效果。为避免覆盖文字，特地调整了伪元素的层级，确保交互过程中文字始终可见。整体效果流畅自然，增强了用户界面的互动性与美观度。
孙飞i
56 0
土木林森
|
6月前
|
前端开发 UED
【专栏：工具与技巧篇】CSS Sprites 与图标字体：优化网页图标加载
【4月更文挑战第30天】本文探讨了网页图标优化的两种方法：CSS Sprites和图标字体。CSS Sprites通过合并图标减少HTTP请求，提高加载速度，但维护复杂；图标字体则提供良好扩展性和定制性，易于调整大小和颜色。两者各有优劣，适用于不同场景。在实际应用中，应结合使用，根据项目需求灵活选择，以实现最佳性能优化和用户体验。
土木林森
70 1
萤火虫的小尾巴
|
前端开发
css编程时问题解决方法
css编程时问题解决方法
萤火虫的小尾巴
63 0
Ethan_Zhou
|
前端开发
《css揭秘》- 47个不可不知的 css 技巧(上篇0-19)（四）
《css揭秘》- 47个不可不知的 css 技巧(上篇0-19)（四）
Ethan_Zhou
80 0
艾派森_
|
Web App开发 前端开发 Java
学习css，这一篇足矣（一）
学习css，这一篇足矣
艾派森_
131 0
学习css，这一篇足矣（一）
艾派森_
|
编解码 前端开发 JavaScript
学习css，这一篇足矣（三）
学习css，这一篇足矣
艾派森_
139 0
学习css，这一篇足矣（三）
艾派森_
|
前端开发 索引 容器
学习css，这一篇足矣（二）
学习css，这一篇足矣
艾派森_
111 0
学习css，这一篇足矣（二）