用CSS3写出星际穿梭的效果(改变穿梭粒子内容可得B站弹幕效果)

文章目录

    • 用css3写星际穿梭
      • (一)用到的动画属性 及 html结构
      • (二)现在开始写环境
      • (三)先写一组简单的动画效果
      • (四)写不同的动画
      • (五)依次类推,完成这些小横线
          • 星际穿梭效果代码在此 >>>
          • 弹幕效果的代码在此 >>>

用css3写星际穿梭

做出来后可以看见最终效果,当前我把视频转gif了,所以看起来有些卡顿不流畅。实际做出来的效果会好一些,最终截图在文章末尾
用CSS3写出星际穿梭的效果(改变穿梭粒子内容可得B站弹幕效果)_第1张图片

(一)用到的动画属性 及 html结构

@keyframesanimation

先来看下html结构:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>星空效果title>
head>
<body>
    <span>---span>
    <span>----span>
    <span>---span>
    <span>---span>
    <span>---span>
    <span>----span>
    <span>---span>
    <span>---span>
    <span>----span>
    <span>---span>
body>
html>

这是个标签中的小横线是我们的星际光点

(二)现在开始写环境

首先,让背景变黑

    body{
     
        background-color: black;
    }

用CSS3写出星际穿梭的效果(改变穿梭粒子内容可得B站弹幕效果)_第2张图片

(三)先写一组简单的动画效果

让那些小横线自动移动,移动到一定的位置变色,如果变黑色就好像它隐藏了,突然消失在漆黑的星空中,变成蓝色就有种星星的蓝光闪烁感
用CSS3写出星际穿梭的效果(改变穿梭粒子内容可得B站弹幕效果)_第3张图片
这里我只写了一个属性控制全部的标签,
用CSS3写出星际穿梭的效果(改变穿梭粒子内容可得B站弹幕效果)_第4张图片

(四)写不同的动画

但是星际穿梭是星星点点各不同且互相交错的样子,我再多写几个属性,指定span标签的位置为2n个(2,22,23…)具备lineligh2动画属性,
就会出现新的效果
用CSS3写出星际穿梭的效果(改变穿梭粒子内容可得B站弹幕效果)_第5张图片

(五)依次类推,完成这些小横线

星际穿梭效果代码在此 >>>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>星空效果title>
    <style>
        body {
      
            background-color: black;
        }

        span {
      
            display: block;
            color: #ffffff;
            margin-top: 40px;
            /* 线条的动画属性设定 */
            animation: linelight1 2s infinite;
        }

        span:nth-of-type(2n) {
      
            animation: linelight2 3s infinite;
        }

        span:nth-of-type(2) {
      
            animation: linelight2 6s infinite;
        }

        span:nth-of-type(3) {
      
            animation: linelight1 5s infinite;
        }

        span:nth-of-type(4) {
      
            animation: linelight1 1s infinite;
        }

        span:nth-of-type(5) {
      
            animation: linelight2 5s infinite;
        }

        span:nth-of-type(7) {
      
            animation: linelight2 9s infinite;
        }

        span:nth-of-type(8) {
      
            animation: linelight1 3s infinite;
        }


        span:nth-of-type(10) {
      
            animation: linelight1 8s infinite;
        }

        @keyframes linelight1 {
      
            0% {
      }

            10% {
      
                color: rgb(0, 0, 0);
            }

            25% {
      
                color: #ffffff;
                opacity: 0.6;
            }

            50% {
      
                color: rgb(36, 145, 247);
            }

            80% {
      
                color: #ffffff;
                opacity: 1;
            }

            100% {
      
                color: #000000;
                margin-left: 96%;
            }
        }

        @keyframes linelight2 {
      
            0% {
      }

            20% {
      
                color: rgb(0, 0, 0);
            }

            35% {
      
                color: #ffffff;
            }

            40% {
      
                color: rgb(247, 36, 36);
            }

            90% {
      
                color: #ffffff;
            }

            100% {
      
                color: #000000;
                margin-left: 96%;
            }
        }
    style>
head>

<body>
    <span>---span>
    <span>----span>
    <span>---span>
    <span>---span>
    <span>---span>
    <span>----span>
    <span>---span>
    <span>---span>
    <span>----span>
    <span>---span>
body>

html>

然后效果就出来(尤其是改成2秒的时候,小横线的速度是非常快的)
用CSS3写出星际穿梭的效果(改变穿梭粒子内容可得B站弹幕效果)_第6张图片


如果把小横线改成文字,是不是有种弹幕的感觉,hhhhhhhhh
用CSS3写出星际穿梭的效果(改变穿梭粒子内容可得B站弹幕效果)_第7张图片
用CSS3写出星际穿梭的效果(改变穿梭粒子内容可得B站弹幕效果)_第8张图片
用CSS3写出星际穿梭的效果(改变穿梭粒子内容可得B站弹幕效果)_第9张图片

弹幕效果的代码在此 >>>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>星空效果title>
    <style>
        body {
      
            background-color: black;
        }

        span {
      
            display: block;
            color: #ffffff;
            margin-top: 40px;
            /* 线条的动画属性设定 */
            animation: linelight1 13s infinite;
        }

        span:nth-of-type(2n) {
      
            animation: linelight2 13s infinite;
        }

        span:nth-of-type(2) {
      
            animation: linelight2 16s infinite;
        }

        span:nth-of-type(3) {
      
            animation: linelight1 15s infinite;
        }

        span:nth-of-type(4) {
      
            animation: linelight1 21s infinite;
        }

        span:nth-of-type(5) {
      
            animation: linelight2 15s infinite;
        }

        span:nth-of-type(7) {
      
            animation: linelight2 11s infinite;
        }

        span:nth-of-type(8) {
      
            animation: linelight1 9s infinite;
        }


        span:nth-of-type(10) {
      
            animation: linelight1 18s infinite;
        }

        @keyframes linelight1 {
      
            0% {
      }

            10% {
      
                color: rgb(0, 0, 0);
            }

            25% {
      
                color: #ffffff;
                opacity: 0.6;
            }

            50% {
      
                color: rgb(36, 145, 247);
            }

            80% {
      
                color: #ffffff;
                opacity: 1;
            }

            100% {
      
                color: #000000;
                display: none;
                margin-left: 66%;
            }
        }

        @keyframes linelight2 {
      
            0% {
      }

            20% {
      
                color: rgb(0, 0, 0);
            }

            35% {
      
                color: #ffffff;
            }

            40% {
      
                color: rgb(247, 36, 36);
            }

            90% {
      
                color: #ffffff;
            }

            100% {
      
                color: #000000;
                display: none;
                margin-left: 66%;
            }
        }
    style>
head>

<body>
    <span>Be content with your lot.Man’s success or failure is in the hands of Fate.span>
    <span>要满足于你的命运。一个人的成功和失败都操在命运手中。span>
    <span>俺たちは皆、生まれた时から自由だ。それを拒む者がどれだけ强くでも関系ない。炎の水でも、氷の大地でも、なんでもいい!それを见た者は、この世界で一番の自由を手に入れた者だ!span>
    <span>心臓をささげよう!span>
    <span>这一种被神唾弃的世界,居然充满了鲜艳的喜悦。span>
    <span>人,在开始放弃战斗的时候才算输,坚持战斗的话,就还没输span>
    <span>CS专业span>
    <span>この世界はざんこくだ そして。。。。。とても美しぃspan>
    <span>正是因为自卑才会急着往更高远的地方前进span>
    <span>吾王剑锋所指,吾等心之所向span>
body>

html>

你可能感兴趣的:(前端_CSS3,前端作品大集合,css,css3,html,html5)