数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究使用 CSS 实现闪烁效果
要使用 CSS 创建闪烁效果，我们将使用 CSS 动画 和 线性渐变 属性。闪烁效果是一种动画效果，在许多网页加载网页时使用。
在这篇文章中，我们有一个包含两个其他子盒子的盒子的布局，我们的任务是使用 CSS 创建闪烁效果。
创建闪烁效果的步骤
我们将遵循以下步骤使用 CSS 创建闪烁效果。
- 我们有两个盒子包裹在一个 div 容器中。
- 容器 类使用 CSS 高度 和 宽度 属性设置父 div 的尺寸，并使用 display 属性将其设为 弹性盒子。我们使用 align-items 属性垂直居中子元素。
- 我们将其 位置 设置为相对，因此其子节点将基于容器放置。我们设置了它的 背景颜色 和 圆角 以获得弯曲的边缘。
- 我们使用 盒子 类来设置盒子的样式。我们设置了它们的高度、宽度、背景颜色、圆角和 边距。
- 闪烁-div 类负责创建闪烁效果。它相对于容器定位，顶部 和 左侧 边缘与其父 div 对齐。我们使用了 “background: linear-gradient()”，它设置了一个从左到右过渡的线性渐变背景。我们对线性渐变使用了 rgba 值。
- 我们使用了 “animation: shimmer 1.7s linear infinite;” 来创建一个动画，其 名称 为 shimmer，具有 1.7 秒的 动画持续时间，具有无限的 动画迭代次数 和线性的 计时函数。
- @keyframes shimmer 规则定义了名为 shimmer 的动画，该动画使用 translateX 函数（transform 属性）创建从左到右的滑动动画，从而产生闪烁效果。
示例
这是一个完整的示例代码，实现了上述步骤以使用 CSS 创建闪烁效果。
<html>
<head>
<style>
.container {
background-color: rgb(203, 201, 201);
display: flex;
width: 230px;
position: relative;
height: 120px;
align-items: center;
box-sizing: border-box;
border-radius: 10px;
}
.box {
height: 90px;
width: 90px;
background-color: rgb(230, 229, 229);
margin: 5px 20px;
border-radius: 8px;
}
.shimmer-div {
width: 30%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(to right,
rgba(238, 238, 238, 0) 20%,
rgba(250, 250, 250, 0.5) 50%,
rgba(238, 238, 238, 0) 80%);
animation: shimmer 1.7s linear infinite;
}
@keyframes shimmer {
from {
transform: translateX(-230%);
}
to {
transform: translateX(280%);
}
}
</style>
</head>
<body>
<h3>
Shimmer Effect using CSS
</h3>
<div class="container">
<div class="box"> </div>
<div class="box"> </div>
<div class="shimmer-div"></div>
</div>
</body>
</html>
结论
在本文中，我们了解了如何使用 CSS 创建闪烁效果。我们使用了 线性渐变、CSS 动画 和 @keyframes 来创建闪烁效果。
更新于： 2024年9月30日
8K+ 浏览量
广告