css实现太空飞船弹射动画效果代码
代码语言：html
所属分类：动画
代码描述：css实现太空飞船弹射动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
overflow: hidden;
}
sky {
display: block;
background: black;
width: 100vw;
height: 100vh;
}
star {
border-radius: 50%;
background: white;
position: absolute;
-webkit-animation: star linear infinite;
animation: star linear infinite;
}
star:nth-child(1) {
width: 4px;
height: 4px;
-webkit-animation-duration: 29s;
animation-duration: 29s;
-webkit-animation-delay: -14s;
animation-delay: -14s;
top: 91vh;
}
star:nth-child(2) {
width: 6px;
height: 6px;
-webkit-animation-duration: 32s;
animation-duration: 32s;
-webkit-animation-delay: -19s;
animation-delay: -19s;
top: 70vh;
}
star:nth-child(3) {
width: 8px;
height: 8px;
-webkit-animation-duration: 27s;
animation-duration: 27s;
-webkit-animation-delay: -14s;
animation-delay: -14s;
top: 47vh;
}
star:nth-child(4) {
width: 5px;
height: 5px;
-webkit-animation-duration: 42s;
animation-duration: 42s;
-webkit-animation-delay: -3s;
animation-delay: -3s;
top: 7vh;
}
star:nth-child(5) {
width: 6px;
height: 6px;
-webkit-animation-duration: 39s;
animation-duration: 39s;
-webkit-animation-delay: -8s;
animation-delay: -8s;
top: 64vh;
}
star:nth-child(6) {
width: 9px;
height: 9px;
-webkit-animation-duration: 40s;
animation-duration: 40s;
-webkit-animation-delay: -5s;
animation-delay: -5s;
top: 47vh;
}
star:nth-child(7) {
width: 10px;
height: 10px;
-webkit-animation-duration: 29s;
animation-duration: 29s;
-webkit-animation-delay: -20s;
animation-delay: -20s;
top: 27vh;
}
star:nth-child(8) {
width: 9px;
height: 9px;
-webkit-animation-duration: 33s;
animation-duration: 33s;
-webkit-animation-delay: -15s;
animation-delay: -15s;
top: 43vh;
}
star:nth-child(9) {
width: 7px;
height: 7px;
-webkit-animation-duration: 36s;
animation-duration: 36s;
-webkit-animation-delay: -29s;
animation-delay: -29s;
top: 21vh;
}
star:nth-child(10) {
width: 9px;
height: 9px;
-webkit-animation-duration: 27s;
animation-duration: 27s;
-webkit-animation-delay: -21s;
animation-delay: -21s;
top: 18vh;
}
star:nth-child(11) {
width: 10px;
height: 10px;
-webkit-animation-duration: 31s;
animation-duration: 31s;
-webkit-animation-delay: -36s;
animation-delay: -36s;
top: 65vh;
}
star:nth-child(12) {
width: 7px;
height: 7px;
-webkit-animation-duration: 44s;
animation-duration: 44s;
-webkit-animation-delay: -16s;
animation-delay: -16s;
top: 95vh;
}
star:nth-child(13) {
width: 9px;
height: 9px;
-webkit-animation-duration: 44s;
animation-duration: 44s;
-webkit-animation-delay: -2s;
animation-delay: -2s;
top: 87vh;
}
star:nth-child(14) {
width: 9px;
height: 9px;
-webkit-animation-duration: 17s;
animation-duration: 17s;
-webkit-animation-delay: -9s;
animation-delay: -9s;
top: 21vh;
}
star:nth-child(15) {
width: 4px;
height: 4px;
-webkit-animation-duration: 24s;
animation-duration: 24s;
-webkit-animation-delay: -35s;
animation-delay: -35s;
top: 80vh;
}
star:nth-child(16) {
width: 8px;
height: 8px;
-webkit-animation-duration: 26s;
animation-duration: 26s;
-webkit-animation-delay: -11s;
animation-delay: -11s;
top: 85vh;
}
star:nth-child(17) {
width: 5px;
height: 5px;
-webkit-animation-duration: 26s;
animation-duration: 26s;
-webkit-animation-delay: -1s;
animation-delay: -1s;
top: 67vh;
}
star:nth-child(18) {
width: 4px;
height: 4px;
-webkit-animation-duration: 17s;
animation-duration: 17s;
-webkit-animation-delay: -22s;
animation-delay: -22s;
top: 46vh;
}
star:nth-child(19) {
width: 9px;
height: 9px;
-webkit-animation-duration: 40s;
animation-duration: 40s;
-webkit-animation-delay: -17s;
animation-delay: -17s;
top: 92vh;
}
star:nth-child(20) {
width: 10px;
height: 10px;
-webkit-animation-duration: 16s;
animation-duration: 16s;
-webkit-animation-delay: -5s;
animation-delay: -5s;
top: 6vh;
}
star:nth-child(21) {
width: 4px;
height: 4px;
-webkit-animation-duration: 22s;
animation-duration: 22s;
-webkit-animation-delay: -39s;
animation-delay: -39s;
top: 49vh;
}
star:nth-child(22) {
width: 10px;
height: 10px;
-webkit-animation-duration: 24s;
animation-duration: 24s;
-webkit-animation-delay: -7s;
animation-delay: -7s;
top: 83vh;
}
star:nth-child(23) {
width: 4px;
height: 4px;
-webkit-animation-duration: 18s;
animation-duration: 18s;
-webkit-animation-delay: -6s;
animation-delay: -6s;
top: 11vh;
}
star:nth-child(24) {
width: 7px;
height: 7px;
-webkit-animation-duration: 45s;
animation-duration: 45s;
-webkit-animation-delay: -20s;
animation-delay: -20s;
top: 49vh;
}
star:nth-child(25) {
width: 10px;
height: 10px;
-webkit-animation-duration: 27s;
animation-duration: 27s;
-webkit-animation-delay: -4s;
animation-delay: -4s;
top: 89vh;
}
star:nth-child(26) {
width: 5px;
height: 5px;
-webkit-animation-duration: 30s;
animation-duration: 30s;
-webkit-animation-delay: -10s;
animation-delay: -10s;
top: 10vh;
}
star:nth-child(27) {
width: 8px;
height: 8px;
-webkit-animation-duration: 28s;
animation-duration: 28s;
-webkit-animation-delay: -29s;
animation-delay: -29s;
top: 31vh;
}
star:nth-child(28) {
width: 9px;
height: 9px;
-webkit-animation-duration: 39s;
animation-duration: 39s;
-webkit-animation-delay: -34s;
animation-delay: -34s;
top: 11vh;
}
star:nth-child(29) {
width: 6px;
height: 6px;
-webkit-animation-duration: 35s;
animation-duration: 35s;
-webkit-animation-delay: -16s;
animation-delay: -16s;
top: 49vh;
}
star:nth-child(30) {
width: 7px;
height: 7px;
-webkit-animation-duration: 30s;
animation-duration: 30s;
-webkit-animation-delay: -18s;
animation-delay: -18s;
top: 48vh;
}
star:nth-child(31) {
width: 6px;
height: 6px;
-webkit-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-delay: -34s;
animation-delay: -34s;
top: 59vh;
}
star:nth-child(32) {
width: 6px;
height: 6px;
-webkit-animation-duration: 22s;
animation-duration: 22s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
top: 65vh;
}
star:nth-child(33) {
width: 5px;
height: 5px;
-webkit-animation-duration: 25s;
animation-duration: 25s;
-webkit-animation-delay: -25s;
animation-delay: -25s;
top: 75vh;
}
star:nth-child(34) {
width: 4px;
height: 4px;
-webkit-animation-duration: 24s;
animation-duration: 24s;
-webkit-animation-delay: -16s;
animation-delay: -16s;
top: 90vh;
}
star:nth-child(35) {
width: 7px;
height: 7px;
-webkit-animation-duration: 23s;
animation-duration: 23s;
-webkit-animation-delay: -17s;
animation-delay: -17s;
top: 1vh;
}
star:nth-child(36) {
width: 5px;
height: 5px;
-webkit-animation-duration: 17s;
animation-duration: 17s;
-webkit-animation-delay: -37s;
animation-delay: -37s;
top: 84vh;
}
star:nth-child(37) {
width: 6px;
height: 6px;
-webkit-animation-duration: 33s;
animation-duration: 33s;
-webkit-animation-delay: -17s;
animation-delay: -17s;
top: 94vh;
}
star:nth-child(38) {
width: 4px;
height: 4px;
-webkit-animation-duration: 43s;
animation-duration: 43s;
-webkit-animation-delay: -19s;
animation-delay: -19s;
top: 69vh;
}
star:nth-child(39) {
width: 7px;
height: 7px;
-webkit-animation-duration: 43s;
animation-duration: 43s;
-webkit-animation-delay: -1s;
animation-delay: -1s;
top: 5vh;
}
star:nth-child(40) {
width: 4px;
height: 4px;
-webkit-animation-duration: 19s;
animation-duration: 19s;
-webkit-animation-delay: -17s;
animation-delay: -17s;
top: 75vh;
}
star:nth-child(41) {
width: 8px;
height: 8px;
-webkit-animation-duration: 43s;
animation-duration: 43s;
-webkit-animation-delay: -35s;
animation-delay: -35s;
top: 99vh;
}
star:nth-child(42) {
width: 10px;
height: 10px;
-webkit-animation-duration: 21s;
animation-duration: 21s;
-webkit-animation-delay: -2s;
animation-delay: -2s;
top: 50vh;
}
star:nth-child(43) {
width: 8px;
height: 8px;
-webkit-animation-duration: 27s;
animation-duration: 27s;
-webkit-animation-delay: -6s;
animation-delay: -6s;
top: 18vh;
}
star:nth-child(44) {
width: 6px;
height: 6px;
-webkit-animation-duration: 23s;
animation-duration: 23s;
-webkit-animation-delay: -10s;
animation-delay: -10s;
top: 63vh;
}
star:nth-child(45) {
width: 7px;
height: 7px;
-webkit-animation-duration: 27s;
animation-duration: 27s;
-webkit-animation-delay: -25s;
animation-delay: -25s;
top: 64vh;
}
star:nth-child(46) {
width: 7px;
height: 7px;
-webkit-animation-duration: 36s;
animation-duration: 36s;
-webkit-animation-delay: -5s;
animation-delay: -5s;
top: 80vh;
}
star:nth-child(47) {
width: 4px;
height: 4px;
-webkit-animation-duration: 39s;
animation-duration: 39s;
-webkit-animation-delay: -3s;
animation-delay: -3s;
top: 80vh;
}
star:nth-child(48) {
width: 7px;
height: 7px;
-webkit-animation-duration: 33s;
animation-duration: 33s;
-webkit-animation-delay: -31s;
animation-delay: -31s;
top: 43vh;
}
star:nth-child(49) {
width: 8px;
height: 8px;
-webkit-animation-duration: 33s;
animation-duration: 33s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
top: 43vh;
}
star:nth-child(50) {
width: 10px;
height: 10px;
-webkit-animation-duration: 36s;
animation-duration: 36s;
-webkit-animation-delay: -14s;
animation-delay: -14s;
top: 4vh;
}
star:nth-child(51) {
width: 9px;
height: 9px;
-webkit-animation-duration: 36s;
animation-duration: 36s;
-webkit-animation-delay: -27s;
animation-delay: -27s;
top: 11vh;
}
star:nth-child(52) {
width: 7px;
height: 7px;
-webkit-animation-duration: 32s;
animation-duration: 32s;
-webkit-animation-delay: -4s;
animation-delay: -4s;
top: 59vh;
}
star:nth-child(53) {
width: 4px;
height: 4px;
-webkit-animation-duration: 36s;
animation-duration: 36s;
-webkit-animation-delay: -39s;
animation-delay: -39s;
top: 36vh;
}
star:nth-child(54) {
width: 10px;
height: 10px;
-webkit-animation-duration: 33s;
animation-duration: 33s;
-webkit-animation-delay: -12s;
animation-delay: -12s;
top: 35vh;
}
star:nth-child(55) {
width: 10px;
height: 10px;
-webkit-animation-duration: 43s;
animation-duration: 43s;
-webkit-animation-delay: -15s;
animation-delay: -15s;
top: 88vh;
}
star:nth-child(56) {
width: 7px;
height: 7px;
-webkit-animation-duration: 42s;
animation-duration: 42s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
top: 72vh;
}
star:nth-child(57) {
width: 10px;
height: 10px;
-webkit-animation-duration: 35s;
animation-duration: 35s;
-webkit-animation-delay: -31s;
animation-delay: -31s;
top: 96vh;
}
star:nth-child(58) {
width: 4px;
height: 4px;
-webkit-animation-duration: 45s;
animation-duration: 45s;
-webkit-animation-delay: -20s;
animation-delay: -20s;
top: 24vh;
}
star:nth-child(59) {
width: 8px;
height: 8px;
-webkit-animation-duration: 40s;
animation-duration: 40s;
-webkit-animation-delay: -6s;
animation-delay: -6s;
top: 86vh;
}
star:nth-child(60) {
width: 6px;
height: 6px;
-webkit-animation-duration: 26s;
animation-duration: 26s;
-webkit-animation-delay: -38s;
animation-delay: -38s;
top: 62vh;
}
star:nth-child(61) {
width: 9px;
height: 9px;
-webkit-animation-duration: 40s;
animation-duration: 40s;
-webkit-animation-delay: -20s;
animation-delay: -20s;
top: 70vh;
}
star:nth-child(62) {
width: 5px;
height: 5px;
-webkit-animation-duration: 28s;
animation-duration: 28s;
-webkit-animation-delay: -9s;
animation-delay: -9s;
top: 76vh;
}
star:nth-child(63) {
width: 5px;
height: 5px;
-webkit-animation-duration: 19s;
animation-duration: 19s;
-webkit-animation-delay: -10s;
animation-delay: -10s;
top: 98vh;
}
star:nth-child(64) {
width: 9px;
height: 9px;
-webkit-animation-duration: 19s;
animation-duration: 19s;
-webkit-animation-delay: -39s;
animation-delay: -39s;
top: 20vh;
}
star:nth-child(65) {
width: 10px;
height: 10px;
-webkit-animation-duration: 27s;
animation-duration: 27s;
-webkit-animation-delay: -29s;
animation-delay: -29s;
top: 4vh;
}
star:nth-child(66) {
width: 7px;
height: 7px;
-webkit-animation-duration: 39s;
animation-duration: 39s;
-webkit-animation-delay: -11s;
animation-delay: -11s;
top: 90vh;
}
star:nth-child(67) {
width: 4px;
height: 4px;
-webkit-animation-duration: 25s;
animation-duration: 25s;
-webkit-animation-delay: -22s;
animation-delay: -22s;
top: 36vh;
}
star:nth-child(68) {
width: 8px;
height: 8px;
-webkit-animation-duration: 44s;
animation-duration: 44s;
-webkit-animation-delay: -11s;
animation-delay: -11s;
top: 73vh;
}
star:nth-child(69) {
width: 10px;
height: 10px;
-webkit-animation-duration: 26s;
animation-duration: 26s;
-webkit-animation-delay: -39s;
animation-delay: -39s;
top: 98vh;
}
star:nth-child(70) {
width: 5px;
height: 5px;
-webkit-animation-duration: 45s;
animation-duration: 45s;
-webkit-animation-delay: -4s;
animation-delay: -4s;
top: 26vh;
}
@-webkit-keyframes star {
from {
-webkit-transform: translate3d(-100%, 0, 1px);
transform: translate3d(-100%, 0, 1px);
}
to {
-webkit-transform: translate3d(100vw, 0, 1px);
transform: translate3d(100vw, 0, 1px);
}
}
@keyframes star {
from {
-webkit-transform: translate3d(-100%, 0, 1px);
transform: translate3d(-100%, 0, 1px);
}
to {
-webkit-transform: translate3d(100vw, 0, 1px);
transform: translate3d(100vw, 0, 1px);
}
}
bo.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0