用css3写星际穿梭
我这里用到动画属性
@keyframes 与 animation
先来看下html结构:
<!DOCTYPE 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动画属性，
就会出现新的效果
依次类推，完成这些小横线
<!DOCTYPE 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>
<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
代码在此
<!DOCTYPE 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>
<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>
