边框流动效果和文字闪光效果

最新推荐文章于 2024-08-31 12:28:59 发布

原创最新推荐文章于 2024-08-31 12:28:59 发布 · 449 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

文章展示了如何使用HTML和CSS创建边框流动和文字闪光的动画效果。通过定义不同的keyframes动画，实现了三个嵌套div元素边框颜色的循环变化，以及多个p元素文字颜色和透明度的渐变，营造出动态视觉效果。

边框流动效果和文字闪光效果

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> 元素就会以动画的方式在页面上显示，并呈现出颜色和透明度的渐变效果

效果图
在这里插入图片描述

在这里插入图片描述