用CSS3写出星际穿梭的效果（改变穿梭粒子内容可得B站弹幕效果）
文章目录
-
- 用css3写星际穿梭
-
- （一）用到的动画属性 及 html结构
- （二）现在开始写环境
- （三）先写一组简单的动画效果
- （四）写不同的动画
- （五）依次类推，完成这些小横线
-
-
- 星际穿梭效果代码在此 >>>
- 弹幕效果的代码在此 >>>
-
用css3写星际穿梭
做出来后可以看见最终效果，当前我把视频转gif了，所以看起来有些卡顿不流畅。实际做出来的效果会好一些，最终截图在文章末尾
（一）用到的动画属性 及 html结构
@keyframes 与 animation
先来看下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;
}
（三）先写一组简单的动画效果
让那些小横线自动移动，移动到一定的位置变色，如果变黑色就好像它隐藏了，突然消失在漆黑的星空中，变成蓝色就有种星星的蓝光闪烁感
这里我只写了一个属性控制全部的标签，
（四）写不同的动画
但是星际穿梭是星星点点各不同且互相交错的样子，我再多写几个属性，指定span标签的位置为2n个(2,22,23…)具备lineligh2动画属性，
就会出现新的效果
（五）依次类推，完成这些小横线
星际穿梭效果代码在此 >>>
<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秒的时候，小横线的速度是非常快的）
如果把小横线改成文字，是不是有种弹幕的感觉，hhhhhhhhh
弹幕效果的代码在此 >>>
<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>