<!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资源评论
易小侠
- 粉丝: 6562
- 资源: 9万+
最新资源
- 谐波电流注入应用于电机控制器 附带电机谐波抑制说明文档 注：为解决汽车NvH而开发，旨在消除转矩谐波，降低运行噪声…… 已成功应
- 基于Java和前端技术的超市水果购买程序设计源码
- 基于Python的招聘网站爬虫设计源码，限制速度优化版
- 基于Python实现的Safety-Helmet-Wearing-Dataset数据集处理源码
- 基于Vue框架的CMS内容管理系统设计源码
- 基于HTML、CSS、JavaScript和Python的多语言博客网页设计源码
- Matlab simulink模型，单相光伏储能模型可再生能源发电 太阳能发电蓄电池储能建模与仿真 可调节光照强度，采用MP
- 基于ArcGIS Runtime for Android的Java天地图basemap设计源码
- 纯电动两挡AMT挡曲线（动力性和经济性）
- 模块化多电平变流器 MMC 的VSG控制 同步发电机控制 MATLAB–Simulink仿真模型 5电平三相MMC，载波移相调制
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
