Skip to content

A
animateCom-web
Commit 591dfaee by wangdan
Options

提交动画组件库项目

parents
Showing with 380 additions and 0 deletions
components/floatup/floatup.css 0 → 100644
*{margin:0;padding:0;}
body,html{
height:100%;
width:100%;
overflow: hidden;
}
.floatup_body{
height:70%;
width:70%;
margin: 0px auto;
/* background: url(./img/bg1.png) no-repeat;
background-size:100% 100%; */
position:relative;
top: 19%;
}
.floatup_body:before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background: url(./img/bg1.png) no-repeat;
background-size:100% 100%;
animation: floatup_anibg 3s linear 0s infinite;
-webkit-animation: floatup_anibg 3s linear 0s infinite;
-moz-animation:floatup_anibg 3s linear 0s infinite;
}
.floatup_body>div{
position:absolute;
border-radius: 50%;
box-shadow: 0px 0 35px 10px rgba(34,69,92,.7);
}
.floatup_1,.floatup_2,.floatup_3{
width:100px;
height:100px;
line-height:100px;
}
.floatup_4,.floatup_5,.floatup_6,.floatup_7{
width:70px;
height:70px;
line-height:70px;
}
.floatup_1{
top:40%;
left:20%;
background: url(./img/icon1.png) no-repeat;
background-size:100% 100%;
animation: floatup_ani1 3s linear 0s infinite;
-webkit-animation: floatup_ani1 3s linear 0s infinite;
-moz-animation:floatup_ani1 3s linear 0s infinite;
}
.floatup_2{
top:65%;
left:30%;
background: url(./img/icon2.png) no-repeat;
background-size:100% 100%;
animation:floatup_ani2 3s linear 0s infinite;
-webkit-animation: floatup_ani2 3s linear 0s infinite;
-moz-animation: floatup_ani2 3s linear 0s infinite;
}
.floatup_3{
top:35%;
left:40%;
background: url(./img/icon3.png) no-repeat;
background-size:100% 100%;
animation:floatup_ani3 3s linear 0s infinite;
-webkit-animation: floatup_ani3 3s linear 0s infinite;
-moz-animation: floatup_ani3 3s linear 0s infinite;
}
.floatup_4{
top:60%;
left:50%;
background: url(./img/icon4.png) no-repeat;
background-size:100% 100%;
animation:floatup_ani4 3s linear 0s infinite;
-webkit-animation: floatup_ani4 3s linear 0s infinite;
-moz-animation: floatup_ani4 3s linear 0s infinite;
}
.floatup_5{
top:50%;
left:55%;
background: url(./img/icon5.png) no-repeat;
background-size:100% 100%;
animation:floatup_ani5 3s linear 0s infinite;
-webkit-animation: floatup_ani5 3s linear 0s infinite;
-moz-animation: floatup_ani5 3s linear 0s infinite;
}
.floatup_6{
top:25%;
left:65%;
background: url(./img/icon6.png) no-repeat;
background-size:100% 100%;
animation:floatup_ani6 3s linear 0s infinite;
-webkit-animation: floatup_ani6 3s linear 0s infinite;
-moz-animation: floatup_ani6 3s linear 0s infinite;
}
@keyframes floatup_anibg{
0%{opacity: 1;}
50%{opacity: 0.3}
100%{opacity: 1}
}
@-webkit-keyframes floatup_anibg{
0%{opacity: 1;}
50%{opacity: 0.3}
100%{opacity: 1}
}
@keyframes floatup_ani1{
from{opacity: 1;top:40%}
to{opacity: 0;top:0%}
}
@-webkit-keyframes floatup_ani1{
from{opacity: 1;top:80%}
to{opacity: 0;top:0%}
}
@keyframes floatup_ani2{
from{opacity: 1;top:65%}
to{opacity: 0;top:0%}
}
@-webkit-keyframes floatup_ani2{
from{opacity: 1;top:65%}
to{opacity: 0;top:0%}
}
@keyframes floatup_ani3{
from{opacity: 1;top:35%}
to{opacity: 0;top:0%}
}
@-webkit-keyframes floatup_ani3{
from{opacity: 1;top:35%}
to{opacity: 0;top:0%}
}
@keyframes floatup_ani4{
from{opacity: 1;top:45%}
to{opacity: 0;top:0%}
}
@-webkit-keyframes floatup_ani4{
from{opacity: 1;top:45%}
to{opacity: 0;top:0%}
}
@keyframes floatup_ani5{
from{opacity: 1;top:60%}
to{opacity: 0;top:0%}
}
@-webkit-keyframes floatup_ani5{
from{opacity: 1;top:60%}
to{opacity: 0;top:0%}
}
@keyframes floatup_ani6{
from{opacity: 1;top:25%}
to{opacity: 0;top:0%}
}
@-webkit-keyframes floatup_ani6{
from{opacity: 1;top:25%}
to{opacity: 0;top:0%}
}
\ No newline at end of file
components/floatup/元素向上漂浮.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="./floatup.css">
</head>
<body>
<div class="floatup_body">
<div class="floatup_1"></div>
<div class="floatup_2"></div>
<div class="floatup_3"></div>
<div class="floatup_4"></div>
<div class="floatup_5"></div>
<div class="floatup_6"></div>
</div>
</body>
</html>
\ No newline at end of file
components/textscale/textscale.css 0 → 100644
*{margin:0;padding:0;}
*,*::before,*::after{
box-sizing: border-box;
}
body,html{
height:100%;
width:100%;
overflow: hidden;
}
.textscale_body{
height:550px;
width:610px;
margin: 0px auto;
position:relative;
left:0;
top:50%;
margin-top:-275px;
transition: all 1s ease-in;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
animation: textscale_ani 1s linear;
-webkit-animation: textscale_ani 1s linear;
-moz-animation:textscale_ani 1s linear;
}
.textscale_title{
font-size:28px;
font-weight: 800;
color:#fff;
position: relative;
height:80px;
line-height:80px;
padding:0 20px;
width: 430px;
margin:0 auto 50px;
color:#4EC0E4;
}
.textscale_title:before{
content: '';
position: absolute;
left:20px;
bottom:0;
height:10px;
width: 80px;
background: url(./img/bg2.png) no-repeat;
background-size:100% 100%;
animation: textscale_ani 1s linear;
-webkit-animation: textscale_ani 1s linear;
-moz-animation:textscale_ani 1s linear;
}
.textscale_area{
width:460px;
height:420px;
background: url(./img/bg1.png) no-repeat center;
background-size:98% 98%;
margin:0 auto;
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.textscale_area::before, .textscale_area::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.textscale_area::before, .textscale_area::after {
content: '';
z-index: -1;
margin: 0%;
box-shadow: inset 0 0 0 1px rgba(0,232,241,0.5);
animation: clipMe 8s linear infinite;
-webkit-animation: clipMe 8s linear infinite;
-moz-animation: clipMe 8s linear infinite;
}
.textscale_area::before {
animation-delay: -4s;
}
/* 矩形裁剪 */
@keyframes clipMe {
0%, 100% {
clip: rect(0px, 460.0px, 2px, 0px);
}
25% {
clip: rect(0px, 2px, 420.0px, 0px);
}
50% {
clip: rect(418.0px, 460.0px, 420.0px, 0px);
}
75% {
clip: rect(0px, 460.0px, 420.0px, 458.0px);
}
}
@keyframes textscale_ani{
from{transform: scale(0.6);}
to{transform: scale(1);}
}
@-webkit-keyframes textscale_ani{
from{transform: scale(0.6);}
to{transform: scale(1);}
}
@keyframes textscale_ani2{
from{width:0}
to{width:80px}
}
@-webkit-keyframes textscale_ani2{
from{width:0}
to{width:80px}
}
\ No newline at end of file
components/textscale/文本渐入.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="./textscale.css">
</head>
<body>
<div class="textscale_body">
<h2 class="textscale_title">人脸识别综合管理系统</h2>
<div class="textscale_area"></div>
</div>
</body>
</html>
\ No newline at end of file
index.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/floatup/floatup.css">
<link rel="stylesheet" href="./components/textscale/textscale.css">
<style>
body,html{
height:100%;
width:100%;
overflow: hidden;
}
body{
background: url(./assets/images/bg1.png) no-repeat center;
background-size:100% 100%;
width:100vw;
height:100vh;
}
.loginAnimate_body{
width: 100%;
height:100%;
display:flex;
}
.loginAnimate_body>.floatup_body{
width:65%;
}
.loginAnimate_body>.textscale_body{
width:35%;
}
</style>
</head>
<body>
<div class="loginAnimate_body">
<div class="floatup_body">
<div class="floatup_1"></div>
<div class="floatup_2"></div>
<div class="floatup_3"></div>
<div class="floatup_4"></div>
<div class="floatup_5"></div>
<div class="floatup_6"></div>
</div>
<div class="textscale_body">
<h2 class="textscale_title">人脸识别综合管理系统</h2>
<div class="textscale_area"></div>
</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