<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3外星人的城市和UFO</title>
<style>
body {
background: #3d2671;
}
.circu {
position: relative;
width: 500px;
height: 500px;
border-radius: 100%;
border: 9px solid #040b03;
margin: 30px auto;
background: #1a002f;
overflow: hidden;
}
.suelo {
position: relative;
width: 500px;
height: 251px;
border-radius: 0 0 500px 500px;
background: #3d2671;
margin: 271px auto;
}
.edi {
position: absolute;
width: 70px;
height: 152px;
background: #493dcd;
margin: -635px 70px
}
.edi::before {
content: "";
display: block;
width: 0;
height: 0;
border-bottom: 50px solid #7744bb;
border-left: 70px solid transparent;
margin: -30px 0px
}
ul.vent {
display: block;
width: 50px;
height: 132px;
list-style: none;
margin: 35px -27px
}
ul.vent li {
display: inline-block;
width: 12px;
height: 12px;
background: #fff504;
}
.edi3 {
position: absolute;
width: 70px;
height: 192px;
background: #30084a;
margin: -600px 201px;
-moz-border-radius: 100px / 30px;
-webkit-border-radius: 100px / 30px;
border-radius: 100px / 30px;
}
.edi3:after {
content: '';
position: absolute;
left: 0px;
top: 0px;
width: 70px;
height: 21px;
background: #553377;
-moz-border-radius: 100px / 30px;
-webkit-border-radius: 100px / 30px;
border-radius: 100px / 30px;
}
ul.vent3 {
display: block;
width: 50px;
height: 132px;
list-style: none;
margin: 35px -28px
}
ul.vent3 li {
display: inline-block;
width: 21px;
height: 12px;
background: #fff504;
}
ul.vent3 li:nth-child(1) {
background: #8cfffd;
}
ul.vent3 li:nth-child(2) {
background: #ff4573;
}
ul.vent3 li:nth-child(3) {
background: gray;
}
ul.vent3 li:nth-child(4) {
background: #8cfffd;
}
ul.vent3 li:nth-child(5) {
background: #8cfffd;
;
}
ul.vent3 li:nth-child(6) {
background: #ff4573;
}
ul.vent3 li:nth-child(7) {
background: #ff4573;
}
ul.vent3 li:nth-child(8) {
background: gray;
}
ul.vent3 li:nth-child(9) {
background: #8cfffd;
;
}
ul.vent3 li:nth-child(10) {
background: #ff4573;
}
ul.vent3 li:nth-child(11) {
background: gray;
}
ul.vent3 li:nth-child(12) {
background: gray;
}
ul.vent3 li:nth-child(14) {
background: #8cfffd;
;
}
ul.vent3 li:nth-child(13) {
background: #ff4573;
}
.asc {
position: absolute;
width: 21px;
height: 172px;
background: #5f5ba6;
margin: -590px 271px;
}
.asc::before {
content: "";
display: block;
width: 17px;
height: 21px;
background: rgba(255, 255, 255, .3);
border: 2px solid cyan;
animation: sube 12s alternate infinite;
-moz-animation: sube 12s alternate infinite;
-webkit-animation: sube 12s alternate infinite;
-o-animation: sube 12s alternate infinite;
margin: 150px 0;
}
.circ {
position: absolute;
width: 65px;
height: 19px;
border-radius: 100%;
border: 2px solid cyan;
margin: -603px 201px;
animation: bo 1s alternate infinite;
-moz-animation: bo 1s alternate infinite;
-webkit-animation: bo 1s alternate infinite;
-o-animation: bo 1s alternate infinite;
}
.circ::before {
content: "";
display: block;
width: 50px;
height: 12px;
border-radius: 100%;
border: 2px solid #ff6666;
margin: 1px 5px
}
.circ::after {
content: "";
display: block;
width: 21px;
height: 5px;
border-radius: 100%;
border: 2px solid yellow;
margin: -14px 19px
}
.edi6 {
position: absolute;
border-bottom: 152px solid #663399;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
height: 0;
width: 70px;
margin: -630px 345px;
}
.edi6::before {
content: "";
display: block;
width: 0;
height: 0;
border-bottom: 50px solid #30084a;
border-right: 70px solid transparent;
margin: -50px 0
}
ul.vent6 {
display: block;
width: 50px;
height: 132px;
list-style: none;
margin: 53px -40px
}
ul.vent6 li {
display: inline-block;
width: 70px;
height: 12px;
border-bottom: 2px solid #30084a;
;
}
ul.vent6 li::before {
content: "";
display: block;
width: 30px;
height: 12px;
background: #ff6666;
}
ul.vent6 li::after {
content: "";
display: block;
width: 30px;
height: 12px;
background: #00caf0;
margin: -12px 40px
}
ul.arboles {
display: block;
width: 500px;
height: 291px;
list-style: none;
margin: -553px -30px
}
ul.arboles li {
display: inline-block;
width: 21px;
height: 21px;
border-radius: 100%;
background: white;
margin-left: 5px
}
ul.arboles li::before {
content: "";
display: block;
width: 3px;
height: 21px;
background: black;
margin: 21px 8px
}
ul.arboles li:nth-child(1) {
background: cyan;
}
ul.arboles li:nth-child(2) {
background: #ff6666;
}
ul.arboles li:nth-child(5) {
background: cyan;
}
ul.arboles li:nth-child(6) {
background: #ff6666;
}
ul.arboles li:nth-child(7) {
background: yellow;
}
ul.arboles li:nth-child(10) {
background: #ff6666;
}
ul.arboles li:nth-child(11) {
background: yellow;
}
ul.arboles li:nth-child(12) {
background: cyan;
}
ul.arboles li:nth-child(14) {
background: yellow;
}
ul.arboles li:nth-child(15) {
background: #ff6666;
}
ul.arboles li:nth-child(16) {
background: cyan;
}
.luna {
position: relative;
width: 121px;
height: 121px;
border-radius: 100%;
background: white;
margin: 30px auto;
}
.road {
position: relative;
width: 500px;
height: 121px;
background: #4444bc;
margin: 271px auto;
}
ul.lineas {
display: block;
width: 300px;
height: 90px;
list-style: none;
margin: 212px 90px;
animation: corre 5s alternate infinite;
-moz-animation: corre 5s alternate infinite;
-webkit-animation: corre 5s alternate infinite;
-o-animation: corre 5s alternate infinite;
}
ul.lineas li {
display: inline-block;
width: 70px;
height: 1px;
background: #49f4b5;
}
ul.lineas li:nth-child(1) {
margin: 3px 0px;
}
ul.lineas li:nth-child(2) {
margin: -9px 0px
}
ul.lineas li:nth-child(3) {
margin: -21px 21px;
}
ul.lineas li:nth-child(4) {
margin: -9px 30px;
}
ul.lineas li:nth-child(5) {
margin: -30px 45px;
}
ul.lineas li:nth-child(6) {
margin: -12px 30px;
}
ul.lineas li:nth-child(7) {
margin: 0 -30px;
}
ul.lineas li:nth-child(8) {
margin: -21px -7px;
}
ul.lineas li:nth-child(9) {
margin: 0px -12px;
}
ul.lineas li:nth-child(10) {
margin: -9px -7px;
}
ul.lineas li:nth-child(11) {
margin: 0px -12px;
}
ul.lineas li:nth-child(12) {
margin: -21px -7px;
}
.ovni {
position: absolute;
width: 50px;
height: 12px;
border-radius: 100%;
background: cyan;
margin: -700px -30px;
animation: corre3 12s alternate infinite;
-moz-animation: corre3 12s alternate infinite;
-webkit-animation: corre3 12s alternate infinite;
-o-animation: corre3 12s alternate infinite;
}
.ovni::before {
content: "";
display: block;
width: 33px;
height: 21px;
border-radius: 40px 40px 0px 0px;
background: #ff6666;
margin: -19px 8px;
}
.ovni::after {
content: "";
display: block
网页模板——纯CSS3实现外星人的城市和UFO动画效果源码.zip （1个子文件） 
132686843811279947 
index.html 13KB资源评论
易小侠
- 粉丝: 6634
- 资源: 9万+
最新资源
- 基于java的自习室管理和预约系统设计与实现.docx
- C++实现的基于huffman编码的文件压缩解压demo，供学习用
- No.1176 基于组态王和S7-200 PLC的锅炉温度控制系统设计 带解释的梯形图程序，接线图原理图图纸，io分配，组态画面
- 固体电介质电树枝击穿，以及SF6气体，流注放电过程
- libstdc++.so.6
- 两相交错并联buck boost变器仿真 采用双向结构，管子均为双向管 模型内包含开环，电压单环，电压电流双闭环三种控制方式 两个电感的电流均流控制效果好 matlab simulink plecs仿
- springboot在线教育平台.zip
- “互联网+”中国脉动地图——腾讯移动互联发展指数报告.pdf
- 【报告PDF】破解网络视频创新广告形式.pdf
- 【报告PDF】2015汽车消费新常态研究.pdf
- opencv-4.10.0-vs2019-x86
- 7大员工内推明星业.pdf
- 2013爱德曼新兴市场信任度调查.pdf
- 2014-2015 数字营销和O2O趋势.pdf
- 2014Q4与2015Q1新增对比报告.pdf
- 2014爱德曼中国企业信任度调查.pdf
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
