css实现炫酷带卡通动画移民表单效果代码
代码语言:html
所属分类:表单美化
代码描述:css实现炫酷带卡通动画移民表单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
/* ------------------------------------------------------------------------------------------------------
Name: Traverse through scenes
Description: Makes it incredibly easy to trigger scene changes using the checkbox *hack*
Instead of doing input#index39:checked + input + div + div { props }
--------------------------------------------------------------------------------------------------------- */
input[type=radio] {
display: none;
}
/* ----------------------------------
Checked not checked mixins
------------------------------------- */
/* ----------------------------------
Init the traverse
------------------------------------- */
input#index1:checked + input + input + input + input + input + div + div + div + div + div {
transform: scale(1);
}
input#index1:not(:checked) + input + input + input + input + input + div + div + div + div + div {
transform: scale(0);
}
input#index1:checked + input + input + input + input + input + div + div + div {
background-position: -2200px 0;
}
input#index1:checked + input + input + input + input + input + div + div + div + div {
background-position: -1000px 0;
}
input#index1:checked + input + input + input + input + input + div {
right: 300px;
}
/* ----------------------------------
Animation chains
------------------------------------- */
input#index1:checked + input + input + input + input + input + div + div + div + div + div p {
-webkit-animation: in 1s 1s forwards;
animation: in 1s 1s forwards;
}
input#index1:not(:checked) + input + input + input + input + input + div + div + div + div + div.start .intro_small {
-webkit-animation: scaleBack 0.3s 0.6s forwards;
animation: scaleBack 0.3s 0.6s forwards;
transform: scale(1);
}
input#index1:not(:checked) + input + input + input + input + input + div + div + div + div + div.start .intro_to {
-webkit-animation: scaleBack 0.3s 0.7s forwards;
animation: scaleBack 0.3s 0.7s forwards;
transform: scale(1);
}
input#index1:not(:checked) + input + input + input + input + input + div + div + div + div + div.start .intro_large span {
transform: scale(1);
}
input#index1:not(:checked) + input + input + input + input + input + div + div + div + div + div.start .intro_large span:nth-of-type(1) {
-webkit-animation: scaleBack 0.3s 0.5s forwards;
animation: scaleBack 0.3s 0.5s forwards;
}
input#index1:not(:checked) + input + input + input + input + input + div + div + div + div + div.start .intro_large span:nth-of-type(2) {
-webkit-animation: scaleBack 0.3s 0.3s forwards;
animation: scaleBack 0.3s 0.3s forwards;
}
input#index1:not(:checked) + input + input + input + input + input + div + div + div + div + div.start .intro_large span:nth-of-type(3) {
-webkit-animation: scaleBack 0.3s 0.4s forwards;
animation: scaleBack 0.3s 0.4s forwards;
}
input#index1:not(:checked) + input + input + input + input + input + div + div + div + div + div.start .intro_large span:nth-of-type(4) {
-webkit-animation: scaleBack 0.3s 0.2s forwards;
animation: scaleBack 0.3s 0.2s forwards;
}
input#index1:not(:checked) + input + input + input + input + input + div + div + div + div + div.start .intro_subheading {
-webkit-animation: scaleBack 0.3s 0.1s forwards;
animation: scaleBack 0.3s 0.1s forwards;
transform: scale(1);
}
input#index1:not(:checked) + input + input + input + input + input + div + div + div + div + div.start label {
-webkit-animation: scaleBack 0.3s 0s forwards;
animation: scaleBack 0.3s 0s forwards;
transform: scale(1);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div {
transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div {
transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div {
background-position: -4400px 0;
}
input#index2:checked + input + input + input + input + div + div + div + div {
background-position: -2000px 0;
}
input#index2:checked + input + input + input + input + div {
right: 2200px;
}
/* ----------------------------------
Animation chains
------------------------------------- */
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_peeps img {
-webkit-animation: slideUp 0.8s 2s forwards;
animation: slideUp 0.8s 2s forwards;
bottom: -400px;
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development {
-webkit-animation: bob 3s 1.8s infinite;
animation: bob 3s 1.8s infinite;
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__small {
-webkit-animation: scale 1s 2s forwards;
animation: scale 1s 2s forwards;
transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__mars img {
-webkit-animation: scale 1s 2.1s forwards;
animation: scale 1s 2.1s forwards;
cursor: pointer;
transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(1) {
-webkit-animation: scale 1s 2.06s forwards;
animation: scale 1s 2.06s forwards;
transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(2) {
-webkit-animation: scale 1s 2.12s forwards;
animation: scale 1s 2.12s forwards;
transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(3) {
-webkit-animation: scale 1s 2.18s forwards;
animation: scale 1s 2.18s forwards;
transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(4) {
-webkit-animation: scale 1s 2.24s forwards;
animation: scale 1s 2.24s forwards;
transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(5) {
-webkit-animation: scale 1s 2.3s forwards;
animation: scale 1s 2.3s forwards;
transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(6) {
-webkit-animation: scale 1s 2.36s forwards;
animation: scale 1s 2.36s forwards;
transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(7) {
-webkit-animation: scale 1s 2.42s forwards;
animation: scale 1s 2.42s forwards;
transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(8) {
-webkit-animation: scale 1s 2.48s forwards;
animation: scale 1s 2.48s forwards;
transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(9) {
-webkit-animation: scale 1s 2.54s forwards;
animation: scale 1s 2.54s forwards;
transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(10) {
-webkit-animation: scale 1s 2.6s forwards;
animation: scale 1s 2.6s forwards;
transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(11) {
-webkit-animation: scale 1s 2.66s forwards;
animation: scale 1s 2.66s forwards;
transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(12) {
-webkit-animation: scale 1s 2.72s forwards;
animation: scale 1s 2.72s forwards;
transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(13) {
-webkit-animation: scale 1s 2.78s forwards;
animation: scale 1s 2.78s forwards;
transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(14) {
-webkit-animation: scale 1s 2.84s forwards;
animation: scale 1s 2.84s forwards;
transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(15) {
-webkit-animation: scale 1s 2.9s forwards;
animation: scale 1s 2.9s forwards;
transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(16) {
-webkit-animation: scale 1s 2.96s forwards;
animation: scale 1s 2.96s forwards;
transform: scale(0);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_peeps img {
-webkit-animation: slideBack 0.5s 0s forwards;
animation: slideBack 0.5s 0s forwards;
bottom: 0;
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development {
-webkit-animation: bob 3s 1.8s infinite;
animation: bob 3s 1.8s infinite;
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__small {
-webkit-animation: scaleBack 0.3s 0.1s forwards;
animation: scaleBack 0.3s 0.1s forwards;
transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__mars img {
-webkit-animation: scaleBack 0.3s 0.2s forwards;
animation: scaleBack 0.3s 0.2s forwards;
transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(1) {
-webkit-animation: scaleBack 0.3s 0.34s forwards;
animation: scaleBack 0.3s 0.34s forwards;
transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(2) {
-webkit-animation: scaleBack 0.3s 0.38s forwards;
animation: scaleBack 0.3s 0.38s forwards;
transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(3) {
-webkit-animation: scaleBack 0.3s 0.42s forwards;
animation: scaleBack 0.3s 0.42s forwards;
transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(4) {
-webkit-animation: scaleBack 0.3s 0.46s forwards;
animation: scaleBack 0.3s 0.46s forwards;
transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(5) {
-webkit-animation: scaleBack 0.3s 0.5s forwards;
animation: scaleBack 0.3s 0.5s forwards;
transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(6) {
-webkit-animation: scaleBack 0.3s 0.54s forwards;
animation: scaleBack 0.3s 0.54s forwards;
transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(7) {
-webkit-animation: scaleBack 0.3s 0.58s forwards;
animation: scaleBack 0.3s 0.58s forwards;
transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(8) {
-webkit-animation: scaleBack 0.3s 0.62s forwards;
animation: scaleBack 0.3s 0.62s forwards;
transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(9) {
-webkit-animation: scaleBack 0.3s 0.66s forwards;
animation: scaleBack 0.3s 0.66s forwards;
transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(10) {
-webkit-animation: scaleBack 0.3s 0.7s forwards;
animation: scaleBack 0.3s 0.7s forwards;
transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(11) {
-webkit-animation: scaleBack 0.3s 0.74s forwards;
animation: scaleBack 0.3s 0.74s forwards;
transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(12) {
-webkit-animation: scaleBack 0.3s 0.78s forwards;
animation: scaleBack 0.3s 0.78s forwards;
transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(13) {
-webkit-animation: scaleBack 0.3s 0.82s forwards;
animation: scaleBack 0.3s 0.82s forwards;
transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(14) {
-webkit-animation: scaleBack 0.3s 0.86s forwards;
animation: scaleBack 0.3s 0.86s forwards;
transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(15) {
-webkit-animation: scaleBack 0.3s 0.9s forwards;
animation: scaleBack 0.3s 0.9s forwards;
transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(16) {
-webkit-animation: scaleBack 0.3s 0.94s forwards;
animation: scaleBack 0.3s 0.94s forwards;
transform: scale(1);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div {
transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div {
transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div {
background-position: -6600px 0;
}
input#index3:checked + input + input + input + div + div + div + div {
background-position: -3000px 0;
}
input#index3:checked + input + input + input + div {
right: 4100px;
}
/* ----------------------------------
Animation chains
------------------------------------- */
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people label:nth-of-type(1) {
-webkit-animation: scale 1s 2s forwards;
animation: scale 1s 2s forwards;
transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people label:nth-of-type(2) {
-webkit-animation: scale 1s 2.1s forwards;
animation: scale 1s 2.1s forwards;
transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people label:nth-of-type(3) {
-webkit-animation: scale 1s 2.2s forwards;
animation: scale 1s 2.2s forwards;
transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__small {
-webkit-animation: scale 1s 2.3s forwards;
animation: scale 1s 2.3s forwards;
transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__select {
-webkit-animation: scale 1s 2.4s forwards;
animation: scale 1s 2.4s forwards;
transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(1) {
-webkit-animation: scale 1s 2.06s forwards;
animation: scale 1s 2.06s forwards;
transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(2) {
-webkit-animation: scale 1s 2.12s forwards;
animation: scale 1s 2.12s forwards;
transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(3) {
-webkit-animation: scale 1s 2.18s forwards;
animation: scale 1s 2.18s forwards;
transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(4) {
-webkit-animation: scale 1s 2.24s forwards;
animation: scale 1s 2.24s forwards;
transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(5) {
-webkit-animation: scale 1s 2.3s forwards;
animation: scale 1s 2.3s forwards;
transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(6) {
-webkit-animation: scale 1s 2.36s forwards;
animation: scale 1s 2.36s forwards;
transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(7) {
-webkit-animation: scale 1s 2.42s forwards;
animation: scale 1s 2.42s forwards;
transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(8) {
-webkit-animation: scale 1s 2.48s forwards;
animation: scale 1s 2.48s forwards;
transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(9) {
-webkit-animation: scale 1s 2.54s forwards;
animation: scale 1s 2.54s forwards;
transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(10) {
-webkit-animation: scale 1s 2.6s forwards;
animation: scale 1s 2.6s forwards;
transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(11) {
-webkit-animation: scale 1s 2.66s forwards;
animation: scale 1s 2.66s forwards;
transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(12) {
-webkit-animation: scale 1s 2.72s forwards;
animation: scale 1s 2.72s forwards;
transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(13) {
-webkit-animation: scale 1s 2.78s forwards;
animation: scale 1s 2.78s forwards;
transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(14) {
-webkit-animation: scale 1s 2.84s forwards;
animation: scale 1s 2.84s forwards;
transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(15) {
-webkit-animation: scale 1s 2.9s forwards;
animation: scale 1s 2.9s forwards;
transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(16) {
-webkit-animation: scale 1s 2.96s forwards;
animation: scale 1s 2.96s forwards;
transform: scale(0);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people label:nth-of-type(1) {
-webkit-animation: scaleBack 0.3s 0s forwards;
animation: scaleBack 0.3s 0s forwards;
transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people label:nth-of-type(2) {
-webkit-animation: scaleBack 0.3s 0.1s forwards;
animation: scaleBack 0.3s 0.1s forwards;
transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people label:nth-of-type(3) {
-webkit-animation: scaleBack 0.3s 0.2s forwards;
animation: scaleBack 0.3s 0.2s forwards;
transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__select {
-webkit-animation: scaleBack 0.3s 0.4s forwards;
animation: scaleBack 0.3s 0.4s forwards;
transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__small {
-webkit-animation: scaleBack 0.3s 0.3s forwards;
animation: scaleBack 0.3s 0.3s forwards;
transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(1) {
-webkit-animation: scaleBack 0.3s 0.06s forwards;
animation: scaleBack 0.3s 0.06s forwards;
transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(2) {
-webkit-animation: scaleBack 0.3s 0.12s forwards;
animation: scaleBack 0.3s 0.12s forwards;
transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(3) {
-webkit-animation: scaleBack 0.3s 0.18s forwards;
animation: scaleBack 0.3s 0.18s forwards;
transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(4) {
-webkit-animation: scaleBack 0.3s 0.24s forwards;
animation: scaleBack 0.3s 0.24s forwards;
transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(5) {
-webkit-animation: scaleBack 0.3s 0.3s forwards;
animation: scaleBack 0.3s 0.3s forwards;
transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(6) {
-webkit-animation: scaleBack 0.3s 0.36s forwards;
animation: scaleBack 0.3s 0.36s forwards;
transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(7) {
-webkit-animation: scaleBack 0.3s 0.42s forwards;
animation: scaleBack 0.3s 0.42s forwards;
transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(8) {
-webkit-animation: scaleBack 0.3s 0.48s forwards;
animation: scaleBack 0.3s 0.48s forwards;
transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(9) {
-webkit-animation: scaleBack 0.3s 0.54s forwards;
animation: scaleBack 0.3s 0.54s forwards;
transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(10) {
-webkit-animation: scaleBack 0.3s 0.6s forwards;
animation: scaleBack 0.3s 0.6s forwards;
transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(11) {
-webkit-animation: scaleBack 0.3s 0.66s forwards;
animation: scaleBack 0.3s 0.66s forwards;
transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(12) {
-webkit-animation: scaleBack 0.3s 0.72s forwards;
animation: scaleBack 0.3s 0.72s forwards;
transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(13) {
-webkit-animation: scaleBack 0.3s 0.78s forwards;
animation: scaleBack 0.3s 0.78s forwards;
transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(14) {
-webkit-animation: scaleBack 0.3s 0.84s forwards;
animation: scaleBack 0.3s 0.84s forwards;
transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(15) {
-webkit-animation: scaleBack 0.3s 0.9s forwards;
animation: scaleBack 0.3s 0.9s forwards;
transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(16) {
-webkit-animation: scaleBack 0.3s 0.96s forwards;
animation: scaleBack 0.3s 0.96s forw.........完整代码请登录后点击上方下载按钮下载查看
网友评论0