<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3星球旋转手机表单代码 - A5源码</title>
<style>
html,
body {
padding: 0;
margin: 0;
font-family: 'lucida grande', 'lucida sans unicode', lucida, helvetica, 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
font-size: 16px;
color: #000000;
}
body {
/* background-image: url(images/bg.jpg); */
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
@keyframes animtran {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
@keyframes animtrans {
from {
transform: rotateZ(360deg);
}
to {
transform: rotateZ(0deg);
}
}
@-webkit-keyframes animtran {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
@-webkit-keyframes animtrans {
from {
transform: rotateZ(360deg);
}
to {
transform: rotateZ(0deg);
}
}
#advert {
width: 300px;
height: 300px;
margin: 10% auto;
position: relative;
}
#advert .bg1 {
width: 260px;
height: 260px;
position: absolute;
top: 20px;
left: 20px;
z-index: 10;
}
#advert .bg1 div {
width: 260px;
height: 260px;
border: #ccc 1px solid;
border-radius: 15em;
position: relative;
animation: animtran 16s linear infinite;
-webkit-animation: animtran 16s linear infinite;
}
#advert .bg1 img {
width: 50px;
position: absolute;
animation: animtrans 16s linear infinite;
-webkit-animation: animtrans 16s linear infinite;
}
#advert .bg1 .icon01 {
bottom: 25px;
left: 7px;
}
#advert .bg1 .icon02 {
top: 80px;
left: -24px;
}
#advert .bg1 .icon03 {
top: -7px;
left: 44px;
}
#advert .bg1 .icon04 {
top: -7px;
right: 44px;
}
#advert .bg1 .icon05 {
top: 80px;
right: -24px;
}
#advert .bg1 .icon06 {
bottom: 25px;
right: 7px;
}
#advert .bg1 .icon07 {
bottom: -25px;
left: 105px;
}
#advert .bg2 {
width: 180px;
height: 180px;
position: absolute;
top: 60px;
left: 60px;
z-index: 9;
}
#advert .bg2 div {
width: 180px;
height: 180px;
border: #e376bd 1px solid;
border-radius: 15em;
position: relative;
animation: animtrans 12s linear infinite;
-webkit-animation: animtrans 12s linear infinite;
}
#advert .bg2 span {
display: inline-block;
background-color: #FFFFFF;
overflow: hidden;
border-radius: 15em;
position: absolute;
animation: animtran 6s linear infinite;
-webkit-animation: animtran 6s linear infinite;
}
#advert .bg2 img {
padding: 10px;
display: block;
}
#advert .bg2 .icon08 {
top: 10px;
left: 13px;
}
#advert .bg2 .icon09 {
bottom: 0;
left: 7px;
}
#advert .bg2 .icon10 {
bottom: 40px;
right: -15px;
}
#advert .bg3 {
width: 100px;
height: 100px;
position: absolute;
top: 100px;
left: 100px;
z-index: 8;
}
#advert .bg3 div {
width: 100px;
height: 100px;
border: #e077bf 1px dotted;
border-radius: 15em;
position: relative;
animation: animtran 8s linear infinite;
-webkit-animation: animtran 8s linear infinite;
}
#advert .bg3 span {
display: inline-block;
background-color: #FFFFFF;
overflow: hidden;
border-radius: 15em;
position: absolute;
animation: animtrans 4s linear infinite;
-webkit-animation: animtrans 4s linear infinite;
}
#advert .bg3 img {
padding: 10px;
display: block;
}
#advert .bg3 .icon11 {
top: -14px;
right: 0px;
}
#advert .bg3 .icon12 {
bottom: -13px;
right: 10px;
}
#advert .content {
width: 130px;
height: 50px;
background: linear-gradient(to right, #fa71ad, #c77dd1);
position: absolute;
z-index: 11;
left: 85px;
top: 125px;
border-radius: 5px;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 20px;
box-shadow: #f6f6f6 8px 8px 8px 4px;
cursor: pointer;
}
@keyframes ani-one {
from {
left: 260px;
}
to {
left: 16px
}
}
@keyframes ani-two {
from {
left: 260px;
}
to {
left: 70px
}
}
@keyframes ani-three {
from {
top: 0;
left: 0;
}
to {
top: 8px;
left: 8px;
}
}
@keyframes ani-four {
0% {
width: 130px;
height: 50px;
left: 85px;
top: 125px;
box-shadow: #f6f6f6 8px 8px 8px 4px;
border: #eee 0px solid;
margin-left: 0;
}
100% {
width: 259px;
height: 333px;
left: 50%;
top: 0px;
box-shadow: #FFFFFF 0 0 0 0;
border: #eee 1px solid;
margin-left: -130px;
}
}
@keyframes ani-five {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes ani-six {
from {
left: 260px;
}
to {
left: 0;
}
}
@-webkit-keyframes ani-one {
from {
left: 260px;
}
to {
left: 16px
}
}
@-webkit-keyframes ani-two {
from {
left: 260px;
}
to {
left: 70px
}
}
@-webkit-keyframes ani-three {
from {
top: 0;
left: 0;
}
to {
top: 8px;
left: 8px;
}
}
@-webkit-keyframes ani-four {
0% {
width: 130px;
height: 50px;
left: 85px;
top: 125px;
box-shadow: #f6f6f6 8px 8px 8px 4px;
border: #eee 0px solid;
margin-left: 0;
}
100% {
width: 259px;
height: 333px;
left: 50%;
top: 0px;
box-shadow: #FFFFFF 0 0 0 0;
border: #eee 1px solid;
margin-left: -130px;
}
}
@-webkit-keyframes ani-five {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-webkit-keyframes ani-six {
from {
left: 260px;
}
to {
left: 0;
}
}
#applyfor {
width: 259px;
height: 333px;
margin: 20% auto;
position: relative;
display: none;
}
#applyfor form {
padding: 13px 16px 30px;
width: 225px;
height: 288px;
border: #eee 1px solid;
border-radius: 6px;
/* box-shadow: #f6f6f6 10px 10px 0px; */
position: relative;
background-color: #fff;
overflow: hidden;
}
#applyfor #shadow {
width: 259px;
height: 333px;
border-radius: 5px;
position: absolute;
z-index: -1;
top: 0;
left: 0;
background-color: #f3f3f3;
}
#applyfor button {
width: 120px;
height: 46px;
background: linear-gradient(to right, #fa71ad, #c77dd1);
border-radius: 5px;
text-align: center;
line-height: 46px;
cursor: pointer;
color: #fff;
font-size: 20px;
box-shadow: #f6f6f6 8px 8px 8px 4px;
border: none;
margin: 30px 0;
padding: 0;
position: absolute;
top: 228px;
left: 260px;
}
#applyfor input {
width: 225px;
border: none;
border-bottom: #eee 1px solid;
margin-top: 20px;
padding: 10px 0 10px 26px;
font-size: 16px;
box-sizing: border-box;
background-repeat: no-repeat;
background-size: auto 18px;
background-position: 0 center;
position: absolute;
left: 260px;
}
#applyfor input:nth-child(2) {
background-image: url(icons/tower.png);
margin-top: 30px;
top: 41px;
}
#applyfor input:nth-child(3) {
background-image: url(icons/people.png);
top: 110px;
}
#applyfor input:nth-child(4) {
background-image: url(icons/tel.png);
top: 169px;
}
#applyfor form div {
position: absolute;
width: 257px;
height: 50px;
line-height: 50px;
top: 0;
left: 0;
background-color: #f6f6f6;
}
#applyfor i {
display: inline-block;
width: 6px;
height: 18px;
background: linear-gradient(to bottom, #fa71ad, #c77dd1);
border-radius: 2px;
position: absolute;
top: 16px;
left: 16px;
}
#applyfor span {
margin-left: 34px;
color: #333333;
/* position: absolute;
display: inl
纯CSS3实现星球旋转手机表单动画源码.zip
版权申诉
23 浏览量
2022-11-09
22:10:44
上传
评论
收藏 41KB ZIP 举报
纯CSS3实现星球旋转手机表单动画源码.zip （17个子文件） 
132689933345037242 images 
index.html 13KB icons 
icon-10.png 2KB icon-02.png 4KB icon-08.png 315B icon-01.png 4KB icon-06.png 7KB tower.png 1KB icon-11.png 445B icon-12.png 619B finger.png 586B icon-07.png 4KB icon-03.png 3KB tel.png 1KB icon-04.png 3KB icon-05.png 6KB icon-09.png 1KB people.png 1KB资源评论
