Skip to content

A
animateCom-web
Commit b8da7eb7 by songkaida
Options

动画一

parent 32e09a20
Showing with 655 additions and 0 deletions
components/floatleftandright/floatleftandright.css 0 → 100644
*{margin:0;padding:0;}
body,html{
height:100%;
width:100%;
overflow: hidden;
}
.floatleftandright_body{
height:70%;
margin: 0px auto;
position:relative;
top: 19%;
}
.floatleftandright{
position: absolute;
background-color: rgba(46,166,249,0.1);
color: #fff;
text-align: center;
transform: skew(5deg);
-webkit-transform: skew(5deg);
}
.floatleftandright>span{
display: inline-block;
transform: skew(-5deg);
-webkit-transform: skew(-5deg);
}
.floatleftandright_1{
width: 100px;
height: 40px;
line-height: 40px;
top:20%;
left:25%;
animation: floatleftandright_ani1 3s linear 0s infinite;
-webkit-animation: floatleftandright_ani1 3s linear 0s infinite;
-moz-animation:floatleftandright_ani1 3s linear 0s infinite;
}
.floatleftandright_2{
width: 100px;
height: 40px;
line-height: 40px;
top:20%;
left:70%;
animation:floatleftandright_ani2 3s linear 0s infinite;
-webkit-animation: floatleftandright_ani2 3s linear 0s infinite;
-moz-animation: floatleftandright_ani2 3s linear 0s infinite;
}
.floatleftandright_3{
width: 150px;
height: 50px;
line-height: 50px;
top:33%;
left:20%;
animation:floatleftandright_ani3 3s linear 0s infinite;
-webkit-animation: floatleftandright_ani3 3s linear 0s infinite;
-moz-animation: floatleftandright_ani3 3s linear 0s infinite;
transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
font-size: 20px;
}
.floatleftandright_4{
width: 150px;
height: 40px;
line-height: 40px;
top:33%;
left:70%;
animation:floatleftandright_ani4 3s linear 0s infinite;
-webkit-animation: floatleftandright_ani4 3s linear 0s infinite;
-moz-animation: floatleftandright_ani4 3s linear 0s infinite;
transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
font-size: 18px;
}
.floatleftandright_5{
width: 100px;
height: 40px;
line-height: 40px;
top:46%;
left:30%;
animation:floatleftandright_ani5 3s linear 0s infinite;
-webkit-animation: floatleftandright_ani5 3s linear 0s infinite;
-moz-animation: floatleftandright_ani5 3s linear 0s infinite;
transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
}
.floatleftandright_6{
width: 100px;
height: 40px;
line-height: 40px;
top:46%;
left:75%;
animation:floatleftandright_ani6 3s linear 0s infinite;
-webkit-animation: floatleftandright_ani6 3s linear 0s infinite;
-moz-animation: floatleftandright_ani6 3s linear 0s infinite;
transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
font-size: 20px;
}
.scanning{
background: #fff;
width: 280px;
height: 5px;
position: absolute;
top: 17%;
left: 39%;
opacity: 0.5;
animation:scanning 3s linear 0s infinite;
-webkit-animation: scanning 3s linear 0s infinite;
-moz-animation: scanning 3s linear 0s infinite;
}
.picture_emergence{
position: absolute;
left: 61%;
bottom: 28%;
animation:emergence_ani 1s linear;
-webkit-animation: emergence_ani 1s linear;
-moz-animation: emergence_ani 1s linear;
opacity: 1;
}
@keyframes floatleftandright_ani1{
0%{
left: 25%;
}
50%{
left: 28%;
}
100%{
left: 25%;
}
}
@-webkit-keyframes floatleftandright_ani1{
0%{
left: 25%;
}
50%{
left: 28%;
}
100%{
left: 25%;
}
}
@keyframes floatleftandright_ani2{
0%{
left: 70%;
}
50%{
left: 65%;
}
100%{
left: 70%;
}
}
@-webkit-keyframes floatleftandright_ani2{
0%{
left: 70%;
}
50%{
left: 65%;
}
100%{
left: 70%;
}
}
@keyframes floatleftandright_ani3{
0%{
left: 20%;
}
50%{
left: 30%;
}
100%{
left: 20%;
}
}
@-webkit-keyframes floatleftandright_ani3{
0%{
left: 20%;
}
50%{
left: 30%;
}
100%{
left: 20%;
}
}
@keyframes floatleftandright_ani4{
0%{
left: 70%;
}
50%{
left: 67%;
}
100%{
left: 70%;
}
}
@-webkit-keyframes floatleftandright_ani4{
0%{
left: 70%;
}
50%{
left: 67%;
}
100%{
left: 70%;
}
}
@keyframes floatleftandright_ani5{
0%{
left: 30%;
}
50%{
left: 25%;
}
100%{
left: 30%;
}
}
@-webkit-keyframes floatleftandright_ani5{
0%{
left: 30%;
}
50%{
left: 25%;
}
100%{
left: 30%;
}
}
@keyframes floatleftandright_ani6{
0%{
left: 75%;
}
50%{
left: 65%;
}
100%{
left: 75%;
}
}
@-webkit-keyframes floatleftandright_ani6{
0%{
left: 75%;
}
50%{
left: 65%;
}
100%{
left: 75%;
}
}
@keyframes scanning{
0%{
top:17% ;
left: 39%;
}
50%{
top: 54%;
left: 42.5%;
}
100%{
top:17% ;
left: 39%;
}
}
@-webkit-keyframes scanning{
0%{
top:17% ;
left: 39%;
}
50%{
top: 54%;
left: 42.5%;
}
100%{
top:17% ;
left: 39%;
}
}
@keyframes emergence_ani{
0%{
bottom: 15%;
opacity: 0;
}
100%{
bottom: 28%;
opacity: 1;
}
}
@-webkit-keyframes emergence_ani{
0%{
bottom: 15%;
opacity: 0;
}
100%{
bottom: 28%;
opacity: 1;
}
}
\ No newline at end of file
components/floatleftandright/文字左右浮动.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>文字左右浮动</title>
<link rel="stylesheet" href="./floatleftandright.css">
</head>
<body>
<div class="floatleftandright_body">
<!-- 文字左右浮动 -->
<div class="floatleftandright floatleftandright_1"><span>人员查控</span></div>
<div class="floatleftandright floatleftandright_2"><span>数据统计</span></div>
<div class="floatleftandright floatleftandright_3"><span>区域管理</span></div>
<div class="floatleftandright floatleftandright_4"><span>综合接入</span></div>
<div class="floatleftandright floatleftandright_5"><span>名单管理</span></div>
<div class="floatleftandright floatleftandright_6"><span>进出管控</span></div>
<!-- 扫描 -->
<div class="scanning"></div>
<!-- 图片浮现 -->
<div class="picture_emergence">
<img src="./img/bg1.png" alt="">
</div>
</div>
</body>
</html>
\ No newline at end of file
components/hexagonrotate/hexagonrotate.css 0 → 100644
*{margin:0;padding:0;}
body,html{
height:100%;
width:100%;
overflow: hidden;
}
.hexagonrotate_body{
height:70%;
margin: 0px auto;
position:relative;
top: 19%;
}
.hexagonrotate {
position: relative;
display: inline-block;
width: 50px;
height: 86.6px;
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
}
.hexagonrotate::before {
width: inherit;
height: inherit;
background-color: inherit;
content: "";
position: absolute;
left: 0;
transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
}
.hexagonrotate::after {
width: inherit;
height: inherit;
background-color: inherit;
content: "";
position: absolute;
left: 0;
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
}
.one {
background-color: #2EA6F9;
width: 300px;
height: 519.6px;
position: absolute;
top: 50%;
margin-top: -259.8px;
left: 50%;
margin-left: -150px;
animation: rot1 3s linear infinite;
-webkit-animation: rot1 3s linear infinite;
-moz-animation: rot1 3s linear infinite;
opacity: 0.1;
}
.two {
background-color: #2EA6F9;
width: 300px;
height: 519.6px;
position: absolute;
top: 50%;
margin-top: -259.8px;
left: 50%;
margin-left: -150px;
animation: rot2 3s linear infinite;
-webkit-animation: rot2 3s linear infinite;
-moz-animation: rot2 3s linear infinite;
opacity: 0.1;
}
.three {
background-color: #fff;
width: 206px;
height: 356.792px;
position: absolute;
top: 50%;
margin-top: -178.396px;
left: 50%;
margin-left: -103px;
}
.four {
background-color: #2EA6F9;
width: 200px;
height: 346.4px;
position: absolute;
top: 50%;
margin-top: -173.2px;
left: 50%;
margin-left: -100px;
}
/* .three1 {
width: 206px;
height: 356.792px;
position: absolute;
top: 50%;
margin-top: -178.396px;
left: 50%;
margin-left: -103px;
border-top: 5px solid #fff;
border-bottom: 5px solid #fff;
transform: rotate(30deg);
}
.three2 {
position: absolute;
width: 206px;
height: 356.792px;
position: absolute;
top: 50%;
margin-top: -178.396px;
left: 50%;
margin-left: -103px;
transform: translate(-50%,-50%);
transform: rotate(90deg);
border-top: 5px solid #fff;
border-bottom: 5px solid #fff;
}
.three3 {
position: absolute;
width: 206px;
height: 356.792px;
position: absolute;
top: 50%;
margin-top: -178.396px;
left: 50%;
margin-left: -103px;
transform: translate(-50%,-50%);
transform: rotate(330deg);
border-top: 5px solid #fff;
border-bottom: 5px solid #fff;
} */
.rounded,
.rounded::before,
.rounded::after {
border-radius: 2.75rem/1.05rem;
}
@keyframes rot1{
0%{
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
20%{
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
40%{
transform: rotate(150deg);
-webkit-transform: rotate(150deg);
}
60%{
transform: rotate(210deg);
-webkit-transform: rotate(210deg);
}
80%{
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
}
100%{
transform: rotate(330deg);
-webkit-transform: rotate(330deg);
}
}
@-webkit-keyframes rot1{
0%{
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
20%{
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
40%{
transform: rotate(150deg);
-webkit-transform: rotate(150deg);
}
60%{
transform: rotate(210deg);
-webkit-transform: rotate(210deg);
}
80%{
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
}
100%{
transform: rotate(330deg);
-webkit-transform: rotate(330deg);
}
}
@keyframes rot2{
0%{
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
}
20%{
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
40%{
transform: rotate(-150deg);
-webkit-transform: rotate(-150deg);
}
60%{
transform: rotate(-210deg);
-webkit-transform: rotate(-210deg);
}
80%{
transform: rotate(-270deg);
-webkit-transform: rotate(-270deg);
}
100%{
transform: rotate(-330deg);
-webkit-transform: rotate(-330deg);
}
}
@-webkit-keyframes rot2{
0%{
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
}
20%{
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
40%{
transform: rotate(-150deg);
-webkit-transform: rotate(-150deg);
}
60%{
transform: rotate(-210deg);
-webkit-transform: rotate(-210deg);
}
80%{
transform: rotate(-270deg);
-webkit-transform: rotate(-270deg);
}
100%{
transform: rotate(-330deg);
-webkit-transform: rotate(-330deg);
}
}
\ No newline at end of file
components/hexagonrotate/六边形旋转.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>六边形旋转</title>
<link rel="stylesheet" href="./hexagonrotate.css">
</head>
<body>
<div class="hexagonrotate_body">
<div class="hexagonrotate one rounded"></div>
<div class="hexagonrotate two rounded"></div>
<div class="hexagonrotate three rounded"></div>
<div class="hexagonrotate four rounded"></div>
<!-- <div style='position:relative;width: 100%;height: 100%;'>
<div class='three1 rounded'></div>
<div class='three2 rounded'></div>
<div class='three3 rounded'></div>
</div> -->
</div>
</body>
</html>
\ No newline at end of file
index2.html 0 → 100644
<!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>登录一动画</title>
<script src="js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="./components/floatleftandright/floatleftandright.css">
<link rel="stylesheet" href="./components/hexagonrotate/hexagonrotate.css">
<style>
body,html{
height:100%;
width:100%;
overflow: hidden;
}
body{
/* background-image: linear-gradient(#6EE9CF, #2EA6F9); */
background: url(./assets/images/bg2.jpg) no-repeat center;
background-size:100% 100%;
width:100vw;
height:100vh;
}
.loginAnimate_body{
width: 100%;
height:100%;
display:flex;
}
.loginAnimate_body>.loginAnimate_left{
width:55%;
}
.loginAnimate_body>.loginAnimate_right{
width:45%;
}
</style>
</head>
<body>
<div class="loginAnimate_body">
<div class="loginAnimate_left">
<iframe src="./components/floatleftandright/文字左右浮动.html" style="width:100%;height:100%;border:0;overflow: hidden;"></iframe>
</div>
<div class="loginAnimate_right">
<iframe src="./components/hexagonrotate/六边形旋转.html" style="width:100%;height:100%;border:0;overflow: hidden;"></iframe>
</div>
</div>
</body>
</html>
\ No newline at end of file
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