边框流动效果和文字闪光效果
1.边框流动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.grandfather {
width: 300px;
height: 300px;
margin: 0 auto;
border: 2px solid red;
animation: grandfather 4s linear infinite;
}
.father {
width: 200px;
height: 200px;
margin: 0 auto;
border: 2px solid blue;
margin-top: 50px;
animation: father 4s linear infinite;
}
.son {
width: 100px;
height: 100px;
margin: 0 auto;
border: 2px solid black;
margin-top: 50px;
animation: son 4s linear infinite;
}
@keyframes grandfather {
0% {
border-color: aquamarine
}
25% {
border-color: red;
}
50% {
border-color: black;
}
75% {
border-color: blue;
}
100% {
border-color: aquamarine;
}
}
@keyframes father {
0% {
border-color: rgb(238, 24, 9)
}
25% {
border-color: rgb(245, 11, 143);
}
50% {
border-color: rgb(216, 7, 244);
}
75% {
border-color: rgb(8, 248, 176);
}
100% {
border-color: rgb(23, 24, 24);
}
}
@keyframes son {
0% {
border-color: rgb(91, 8, 234)
}
25% {
border-color: rgb(230, 14, 14);
}
50% {
border-color: grey;
}
75% {
border-color: rgb(109, 45, 53);
}
100% {
border-color: rgba(66, 21, 202, 0.207);
}
}
</style>
</head>
<body>
<div class="grandfather">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
</html>
这是一个简单的 HTML 页面,其中包含了三个 <div>
元素,分别具有不同的类名用于设置样式。
在样式部分(<style>
标签内),定义了三个类名的样式:.grandfather
、.father
、.son
。每个类名都设置了宽度、高度、边框样式,并通过 margin
属性进行定位。
此外,每个类名还设置了一个动画效果,通过 @keyframes
关键字来定义不同关键帧的样式,以及持续时间和动画方式。动画效果通过改变边框颜色来实现,给不同的关键帧设置不同的边框颜色。
在 HTML 部分,使用了这些类名将三个 <div>
元素嵌套在一起。<div class="grandfather">
是最外层父元素,包裹着一个具有 .father
类名的子元素,而 .father
类名的元素又包裹了一个具有 .son
类名的子元素。
这样,就形成了三层嵌套的盒子结构,每个盒子具有自己的样式和动画效果。通过动画的持续播放和边框颜色的变化,可以呈现出一个不断变换边框颜色的动态效果。
效果图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2NZrOswF-1689562253234)(C:\Users\34172\Desktop\html基础知识\img\7-17-00.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BabAfsCK-1689562253235)(C:\Users\34172\Desktop\html基础知识\img\7-17-01.png)]
2.文字闪光
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
margin: 0 auto;
font-size: 40px;
width: 30%;
margin-top: 20px;
animation: p 4s linear infinite;/* 设置时间 */
}
@keyframes p {
0% {
color: aquamarine;
opacity: 1;/* 设置透明度为100% */
}
25% {
opacity: 0
}
50% {
color: blue;
opacity: 1;
}
75% {
opacity: 0;
}
100% {
color: brown;
opacity: 1;
}
}
</style>
</head>
<body>
<div>
<p>海贼王</p>
<p>天行九歌</p>
<p>鬼灭之刃</p>
<p>火影忍者</p>
<p>刺客五六七</p>
</div>
</body>
</html>
这是一个简单的 HTML 页面,其中包含了一个 <div>
元素和五个 <p>
元素。
在样式部分(<style>
标签内),定义了 <p>
元素的样式。每个 <p>
元素都具有相同的样式设置:设置了居中、字体大小、宽度和上边距,并通过 animation
属性设置了动画效果。
使用 @keyframes
关键字定义了名为 p
的动画效果。动画效果持续时间为 4 秒,采用线性的动画方式。通过改变文字颜色和透明度来实现动画效果。
在 HTML 部分,将五个 <p>
元素嵌套在 <div>
元素内。每个 <p>
元素中的文本分别为 “海贼王”、“天行九歌”、“鬼灭之刃”、“火影忍者” 和 “刺客五六七”。这些文本会根据动画效果不断变换颜色和透明度。
这样,每个 <p>
元素就会以动画的方式在页面上显示,并呈现出颜色和透明度的渐变效果
效果图
五个 <p>
元素嵌套在 <div>
元素内。每个 <p>
元素中的文本分别为 “海贼王”、“天行九歌”、“鬼灭之刃”、“火影忍者” 和 “刺客五六七”。这些文本会根据动画效果不断变换颜色和透明度。
这样,每个 <p>
元素就会以动画的方式在页面上显示,并呈现出颜色和透明度的渐变效果
效果图