Skip to content

A
animateCom-web
Commit 32e09a20 by wangdan
Options

提交流星划过特效2

parent e7c06554
Showing with 181 additions and 1 deletions
components/shootstar/shootstar2.css 0 → 100644
*{margin:0;padding:0;}
body{
height:100vh;
overflow:hidden;
}
.shootstar_body{
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
/* background:#21acbb; */
animation: animateBg 5s linear infinite;
-webkit-animation: animateBg 5s linear infinite;
-moz-animation: animateBg 5s linear infinite;
}
.shootstar_body span{
position: absolute;
top:50%;
left:50%;
height:4px;
width:4px;
background-color: #445568;
border-radius:50%;
box-shadow: 0 0 0 4px rgba(68,85,104,0.1),0 0 0 8px rgba(68,85,104,0.1),0 0 0 2px rgba(68,85,104,1);
animation: animate 3s linear infinite;
-webkit-animation: animate 3s linear infinite;
-moz-animation: animate 3s linear infinite;
}
.shootstar_body span::before{
content:'';
position:absolute;
top:50%;
transform: translateY(-50%);
width: 300px;
height:3px;
background: linear-gradient(90deg,#445568,transparent);
background: -webkit-linear-gradient(90deg,#445568,transparent);
background: -moz-linear-gradient(90deg,#445568,transparent);
}
.shootstar_body span:nth-child(1){
top:0;
right:0;
left:initial;
animation-delay: 0s;/*动画延迟时间*/
animation-duration: 1s;/*动画时长*/
}
.shootstar_body span:nth-child(2){
top:0;
right:80px;
left:initial;
animation-delay: 0.2s;
animation-duration: 3s;
}
.shootstar_body span:nth-child(3){
top:80px;
right:0;
left:initial;
animation-delay: 0.4s;
animation-duration: 2s;
}
.shootstar_body span:nth-child(4){
top:0;
right:180px;
left:initial;
animation-delay: 0.6s;
animation-duration: 1.5s;
}
.shootstar_body span:nth-child(5){
top:0;
right:400px;
left:initial;
animation-delay: 0.8s;
animation-duration: 2.5s;
}
.shootstar_body span:nth-child(6){
top:0;
right:600px;
left:initial;
animation-delay: 1s;
animation-duration: 3s;
}
.shootstar_body span:nth-child(7){
top:300px;
right:0;
left:initial;
animation-delay: 1.2s;
animation-duration: 1.75s;
}
.shootstar_body span:nth-child(8){
top:0;
right:700px;
left:initial;
animation-delay: 1.4s;
animation-duration: 1.25s;
}
.shootstar_body span:nth-child(9){
top:0;
right:1000px;
left:initial;
animation-delay: 0.75s;
animation-duration: 2.25s;
}
.shootstar_body span:nth-child(10){
top:0;
right:450px;
left:initial;
animation-delay: 2.75s;
animation-duration: 2.25s;
}
/*定义动画*/
@keyframes animateBg {
0%,100%{
transform: scale(1);
}
50%{
transform: scale(1.2);
}
}
@-webkit-keyframes animateBg {
0%,100%{
transform: scale(1);
}
50%{
transform: scale(1.2);
}
}
@keyframes animate {
0%{
transform: rotate(315deg) translateX(0);
opacity: 1;
}
90%{opacity: 1;}
100%{
transform: rotate(315deg) translateX(-1000px);
opacity: 0;
}
}
@-webkit-keyframes animate {
0%{
transform: rotate(315deg) translateX(0);
opacity: 1;
}
90%{opacity: 1;}
100%{
transform: rotate(315deg) translateX(-1000px);
opacity: 0;
}
}
\ No newline at end of file
components/shootstar/流星划过2.html 0 → 100644
<!DOCTYPE html>
<!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>流星划过2</title>
<link rel="stylesheet" href="./shootstar2.css">
</head>
<body>
<div class="shootstar_body">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
\ No newline at end of file
index.html
...@@ -49,7 +49,8 @@ ...@@ -49,7 +49,8 @@
<body> <body>
<div class="loginAnimate_body"> <div class="loginAnimate_body">
<div class="shootstar_body"> <div class="shootstar_body">
<iframe src="./components/shootstar/流星划过.html" style="width:100%;height:100%;border:0;overflow: hidden;"></iframe> <!-- <iframe src="./components/shootstar/流星划过.html" style="width:100%;height:100%;border:0;overflow: hidden;"></iframe> -->
<iframe src="./components/shootstar/流星划过2.html" style="width:100%;height:100%;border:0;overflow: hidden;"></iframe>
</div> </div>
<div class="loginAnimate_left"> <div class="loginAnimate_left">
<iframe src="./components/floatup/元素向上漂浮.html" style="width:100%;height:100%;border:0;overflow: hidden;"></iframe> <iframe src="./components/floatup/元素向上漂浮.html" style="width:100%;height:100%;border:0;overflow: hidden;"></iframe>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment