CSS文字极光动画

已于 2023-09-22 11:18:09 修改
阅读量225 收藏 1
点赞数
分类专栏： CSS模板 文章标签： css css3 前端
于 2023-06-27 14:12:41 首次发布

效果展示

CSS文字极光动画

HTML代码

    <div class="content">
        <h1 class="title">the beautiful aurora
            <div class="aurora">
            <div class="aurora__item"></div>
            <div class="aurora__item"></div>
            <div class="aurora__item"></div>
            <div class="aurora__item"></div>
            </div>
        </h1>
        <p class="subtitle">Made with love and only the CSS.</p>
    </div>

CSS代码

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap");

    :root {
        --bg: #000000;
        --clr-1: #00c2ff;
        --clr-2: #33ff8c;
        --clr-3: #ffc640;
        --clr-4: #e54cff;

        --blur: 1rem;
        --fs: clamp(3rem, 8vw, 7rem);
        --ls: clamp(-1.75px, -0.25vw, -3.5px);
    }

    body {
        min-height: 100vh;
        display: grid;
        place-items: center;
        background-color: var(--bg);
        color: #fff;
        font-family: "Inter", "DM Sans", Arial, sans-serif;overflow: hidden
    }

    *,
    *::before,
    *::after {
        font-family: inherit;
        box-sizing: border-box;
    }

    .content {
        text-align: center;
    }

    .title {
        font-size: var(--fs);
        font-weight: 800;
        letter-spacing: var(--ls);
        position: relative;
        overflow: hidden;
        background: var(--bg);
        margin: 0;
    }

    .subtitle {
    }

    .aurora {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        mix-blend-mode: darken;
        pointer-events: none;
    }

    .aurora__item {
        overflow: hidden;
        position: absolute;
        width: 60vw;
        height: 60vw;
        background-color: var(--clr-1);
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
        filter: blur(var(--blur));
        mix-blend-mode: overlay;
    }

    .aurora__item:nth-of-type(1) {
        top: -50%;
        animation: aurora-border 6s ease-in-out infinite,
            aurora-1 12s ease-in-out infinite alternate;
    }

    .aurora__item:nth-of-type(2) {
        background-color: var(--clr-3);
        right: 0;
        top: 0;
        animation: aurora-border 6s ease-in-out infinite,
            aurora-2 12s ease-in-out infinite alternate;
    }

    .aurora__item:nth-of-type(3) {
        background-color: var(--clr-2);
        left: 0;
        bottom: 0;
        animation: aurora-border 6s ease-in-out infinite,
            aurora-3 8s ease-in-out infinite alternate;
    }

    .aurora__item:nth-of-type(4) {
        background-color: var(--clr-4);
        right: 0;
        bottom: -50%;
        animation: aurora-border 6s ease-in-out infinite,
            aurora-4 24s ease-in-out infinite alternate;
    }

    @keyframes aurora-1 {
        0% {
            top: 0;
            right: 0;
        }
        50% {
            top: 100%;
            right: 75%;
        }
        75% {
            top: 100%;
            right: 25%;
        }
        100% {
            top: 0;
            right: 0;
        }
    }

    @keyframes aurora-2 {
        0% {
            top: -50%;
            left: 0%;
        }
        60% {
            top: 100%;
            left: 75%;
        }
        85% {
            top: 100%;
            left: 25%;
        }
        100% {
            top: -50%;
            left: 0%;
        }
    }

    @keyframes aurora-3 {
        0% {
            bottom: 0;
            left: 0;
        }
        40% {
            bottom: 100%;
            left: 75%;
        }
        65% {
            bottom: 40%;
            left: 50%;
        }
        100% {
            bottom: 0;
            left: 0;
        }
    }

    @keyframes aurora-4 {
        0% {
            bottom: -50%;
            right: 0;
        }
        50% {
            bottom: 0%;
            right: 40%;
        }
        90% {
            bottom: 50%;
            right: 25%;
        }
        100% {
            bottom: -50%;
            right: 0;
        }
    }

    @keyframes aurora-border {
        0% {
            border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
        }
        25% {
            border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;
        }
        50% {
            border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;
        }
        75% {
            border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;
        }
        100% {
            border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
        }
    }

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字激光动画</title>
</head>
<body>
    <div class="content">
        <h1 class="title">the beautiful aurora
            <div class="aurora">
            <div class="aurora__item"></div>
            <div class="aurora__item"></div>
            <div class="aurora__item"></div>
            <div class="aurora__item"></div>
            </div>
        </h1>
        <p class="subtitle">Made with love and only the CSS.</p>
    </div>
</body>
</html>

<style>
    @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap");

    :root {
        --bg: #000000;
        --clr-1: #00c2ff;
        --clr-2: #33ff8c;
        --clr-3: #ffc640;
        --clr-4: #e54cff;

        --blur: 1rem;
        --fs: clamp(3rem, 8vw, 7rem);
        --ls: clamp(-1.75px, -0.25vw, -3.5px);
    }

    body {
        min-height: 100vh;
        display: grid;
        place-items: center;
        background-color: var(--bg);
        color: #fff;
        font-family: "Inter", "DM Sans", Arial, sans-serif;overflow: hidden
    }

    *,
    *::before,
    *::after {
        font-family: inherit;
        box-sizing: border-box;
    }

    .content {
        text-align: center;
    }

    .title {
        font-size: var(--fs);
        font-weight: 800;
        letter-spacing: var(--ls);
        position: relative;
        overflow: hidden;
        background: var(--bg);
        margin: 0;
    }

    .subtitle {
    }

    .aurora {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        mix-blend-mode: darken;
        pointer-events: none;
    }

    .aurora__item {
        overflow: hidden;
        position: absolute;
        width: 60vw;
        height: 60vw;
        background-color: var(--clr-1);
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
        filter: blur(var(--blur));
        mix-blend-mode: overlay;
    }

    .aurora__item:nth-of-type(1) {
        top: -50%;
        animation: aurora-border 6s ease-in-out infinite,
            aurora-1 12s ease-in-out infinite alternate;
    }

    .aurora__item:nth-of-type(2) {
        background-color: var(--clr-3);
        right: 0;
        top: 0;
        animation: aurora-border 6s ease-in-out infinite,
            aurora-2 12s ease-in-out infinite alternate;
    }

    .aurora__item:nth-of-type(3) {
        background-color: var(--clr-2);
        left: 0;
        bottom: 0;
        animation: aurora-border 6s ease-in-out infinite,
            aurora-3 8s ease-in-out infinite alternate;
    }

    .aurora__item:nth-of-type(4) {
        background-color: var(--clr-4);
        right: 0;
        bottom: -50%;
        animation: aurora-border 6s ease-in-out infinite,
            aurora-4 24s ease-in-out infinite alternate;
    }

    @keyframes aurora-1 {
        0% {
            top: 0;
            right: 0;
        }
        50% {
            top: 100%;
            right: 75%;
        }
        75% {
            top: 100%;
            right: 25%;
        }
        100% {
            top: 0;
            right: 0;
        }
    }

    @keyframes aurora-2 {
        0% {
            top: -50%;
            left: 0%;
        }
        60% {
            top: 100%;
            left: 75%;
        }
        85% {
            top: 100%;
            left: 25%;
        }
        100% {
            top: -50%;
            left: 0%;
        }
    }

    @keyframes aurora-3 {
        0% {
            bottom: 0;
            left: 0;
        }
        40% {
            bottom: 100%;
            left: 75%;
        }
        65% {
            bottom: 40%;
            left: 50%;
        }
        100% {
            bottom: 0;
            left: 0;
        }
    }

    @keyframes aurora-4 {
        0% {
            bottom: -50%;
            right: 0;
        }
        50% {
            bottom: 0%;
            right: 40%;
        }
        90% {
            bottom: 50%;
            right: 25%;
        }
        100% {
            bottom: -50%;
            right: 0;
        }
    }

    @keyframes aurora-border {
        0% {
            border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
        }
        25% {
            border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;
        }
        50% {
            border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;
        }
        75% {
            border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;
        }
        100% {
            border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
        }
    }

</style>

xuanlele
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
146.HTML+CSS 完成带有极光文字排版
粉丝们务必加入微信粉丝群
03-28 651
效果 (源码网盘地址在最后) 最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。 github 地址：https://github.com/qq449245884/vue-okr-tree 视频演示 HTML+CSS 完成带有极光文字排版，职场技能 get~，能否换个三连 视频地址：https://www.ixigua.
Amazing！！CSS 也能实现极光？
LuckyWinty的博客
12-22 403
在上次写完这篇文章 -- 巧用渐变实现高级感拉满的背景光动画[1] 之后，文章下面的评论有同学留言，使用 CSS 可以实现极光吗？像是这样：emmm，这有点难为人了。不过，最近我也尝试着去...
css实现高亮光弧动画
Provenr的博客
03-16 1415
CSS .rolled { position: absolute; top: 0; width: 80px; height: 500px; background: -moz-linear-gradient(left, rgba(255, 255, 255, 0)0, rgba(255, 255, 255, .2)50%, rg...
CSS实现炫彩文字和滚动变色动画
qq_42526440的博客
05-01 822
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Multi-colo
文字聚光灯特效 html+css
你好呀，很高兴你在看这里~
12-14 2743
先不说啥，上效果： 前提： 要用到一个clip-path属性，可以创建一个只有元素的部分区域可以显示的剪切区域。但是，这属性 兼容性不太好 ，还没有得到所有主流浏览器广泛支持（比如Firefox和IE）。 实现： 1.定义一盒标签放文字： <body> <h1>北极光之夜</h1> </body> 2.给文本设置颜色和大小： h1{ position: relative; color: #6b6868;
纯CSS3北极光背景动画特效
04-25
纯CSS3北极光背景动画特效是一款梦幻的黑夜北极光网页背景特效。
几款酷炫的css3文字动画特效
06-11
几款酷炫的css3文字动画特效，是splitting基于css3动画库制作出来的，有文字变形、文字抖动等动画效果，具体看演示页面。
css.rar_css文字动画
09-21
类似好莱坞电影序幕里的片头效果，CSS3制作实现的文字动画特效，看了就觉得不错。文字由远到近、由模糊变清淅，很大气，经常看电影的话，对这种效果不会陌生。
纯CSS3文字Loading动画特效
06-24
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画。
HTML 纯CSS下划线出现动画
03-05
HTML 纯CSS下划线出现动画
css的文本自动换列,CSS绝对定位元素内文本自动换行问题
weixin_26704885的博客
08-03 587
title 1title 2title 3subtitle 1 subtitle 1subtitle 2 subtitle 2CSS：* {margin: 0;padding: 0;}li {list-style: none;}#main {background-color: blue;text-align: center;}.nav > li {position: relative;dis...
纯CSS实现边框流光效果（跑马灯效果）
weixin_52057286的博客
03-27 9303
使用css3新特性——动画，实现一个边框跑马灯效果
CSS
古先生的博客
04-03 105
文章目录前言选择器元素选择器ID 选择器二、使用步骤1.引入库2.读入数据总结 前言 CSS是级联样式表（Cascading Style Sheets）的缩写。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 选择器 一条CSS样式主要由两部分构成：选择器；以{}包裹的一条或多条声明。选择器主要有元素选择器、ID 选择器和 class 选择器三种，当前使用最多的一种选择器是 class 选择器。 元素选择器 元素选择器就是让你选择的元素改变样式。 例如： h1{
css特效之激光扫描瞄准
最新发布
前端新视界
10-30 100
css特效之激光扫描瞄准
CSS 中 font-family inherit
m0_58780961的博客
11-29 2825
CSS 中FONT-FAMILY: inherit FONT-FAMILY: inherit;什意思 font-family:inherit; 继承父元素的字体系列样式，如黑体，宋体等。 注意： 1、所有主流浏览器都支持 font-family 属性。 2、任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit" vertical的默认属性baseline * baseline是什么？ * 这是维基百科上的一张图,简单地来说，
css3 制作阳光,CSS3 散射的阳光动画背景
weixin_42676876的博客
08-03 862
CSS语言：CSSSCSS确定html,body {width: 100%;height: 100%;}html {background-color: #e76027;overflow: hidden;}.con {position: relative;width: 200px;height: 100px;margin: -100px 80%;-webkit-transform-origin: 5...
CSS3 animation 太阳系动画
卡尔特斯
09-28 26
``` Document body { background-color: #000; /* 当在缩放窗口之后body高度或者宽度不够之后，运行动画的标签会变大变小，可以使用超出隐藏来避免 / overflow: hidden; } .sun { width: 100px; height...
CSS3实现发光按钮效果动画
CodingNoob
09-01 2383
在平时看到抽奖，或者一些活动内容页面，我们经常会看到一些发光效果的按钮，视觉上引导用户去点击，这种效果主要是利用css3的动画效果去实现，关键帧放大元素尺寸和改变元素的不透明度，还有就是渐变拉伸去设置对应的按钮渐变...
CSS-旋转日光特效
南乡人的博客
12-27 265
预览 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta ...
css 文字淡入动画
10-25
要实现CSS文字淡入动画，可以使用以下步骤： 1. 在HTML中创建一个容器元素，例如div，并在其中添加一个或多个span元素，每个span元素包含一个字母或单词。 2. 在CSS中，设置span元素的样式，包括字体样式、颜色、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值