纯html+css炫酷地球仪动画效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}body {background: #000;}@keyframes runing {0% {transform: rotate(23.6deg) rotateX(-23.6deg) rotateY(0deg);}100% {transform: rotate(23.6deg) rotateX(-23.6deg) rotateY(360deg);}}.big {position: fixed;top: 50%;left: 50%;/*position: relative;*/width: 1000px;height: 1000px;transform: translate(-50%,-55%);/*background: seagreen;*/}.bigbox {position: absolute;top: 50%;left: 50%;width: 600px;height: 600px;/*background: seagreen;*/transform: translate(-50%,-50%);perspective: 1200px;}.box {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;/*background: orangered;*/transform-style: preserve-3d;animation: runing 15s linear infinite;}.box div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;color: #fff;border: 1px solid #fff;border-radius: 50%;}.box div:nth-child(1) {}.box div:nth-child(2) {transform: rotateY(22.5deg);}.box div:nth-child(3) {transform: rotateY(45deg);}.box div:nth-child(4) {transform: rotateY(67.5deg);}.box div:nth-child(5) {transform: rotateY(90deg);}.box div:nth-child(6) {transform: rotateY(112.5deg);}.box div:nth-child(7) {transform: rotateY(135deg);}.box div:nth-child(8) {transform: rotateY(157.5deg);}.box div:nth-child(9) {transform: translateY(-300px) rotateX(90deg) scale(0);}.box div:nth-child(10) {transform: translateY(-225px) rotateX(90deg) scale(.66);}.box div:nth-child(11) {transform: translateY(-150px) rotateX(90deg) scale(.865);}.box div:nth-child(12) {transform: translateY(-75px) rotateX(90deg) scale(.97);}.box div:nth-child(13) {transform: translateY(0) rotateX(90deg) scale(1);}.box div:nth-child(14) {transform: translateY(75px) rotateX(90deg) scale(.97);}.box div:nth-child(15) {transform: translateY(150px) rotateX(90deg) scale(.865);}.box div:nth-child(16) {transform: translateY(225px) rotateX(90deg) scale(.66);}.box div:nth-child(17) {transform: translateY(300px) rotateX(90deg) scale(0);}.but {position: absolute;top: 50%;left: 50%;width: 3px;height: 680px;background: #fff;border-radius: 0;transform: translate(-50%,-50%) rotate(23.6deg);}.fix {position: absolute;top: 50%;left: 50%;width: 680px;height: 680px;z-index: 99;/*background: seagreen;*//*opacity: .5;*/border-radius:50%;border-top: 20px solid #fff;border-right: 20px solid #fff;border-left: 20px solid transparent;border-bottom: 20px solid transparent;transform: translate(-52%,-51%) rotate(68.6deg);}.foot {position: absolute;top: 850px;left: 50%;transform: translate(-50%,0);z-index: 3;width: 30px;height: 60px;background: #fff;}.footer {position: absolute;top: 765px;left: 50%;width:300px;height:300px;border:solid 1px black;background: #fff;border-radius: 50%;transform: translate(-50%,0) rotateX(80deg);}.footer:after{content: '';display:inline-block;width:300px;height: 320px;position:relative;opacity: 0.8;background: #fff;top:50%;left:-0.5px;border-left: 1px solid #000;border-right: 1px solid #000;border-bottom: 1px solid #000;border-bottom-left-radius: 45%;border-bottom-right-radius: 45%;}</style>
</head>
<body><div class="big"><div class="bigbox"><div class="box"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><div class="but"></div></div><div class="fix"></div><div class="foot"></div><div class="footer"></div></div>
</body>
</html>

纯html+css炫酷地球仪动画效果相关推荐

html中flash的简单动画效果,css实现快速炫酷抖动动画效果
1.Animate.css简介 Animate.css是一个可在您的Web项目中使用的即用型跨浏览器动画库.非常适合强调,首页,滑块和引导注意的提示.它是一个来自国外的 CSS3 动画库,它预设了抖动 ...
【每日一练】138—CSS实现炫酷背景动画效果
以下是今天练习的最终效果: HTML代码: <!DOCTYPE html> <html lang="en"> <head><meta na ...
android svg动画框架,Android实现炫酷SVG动画效果
svg是目前十分流行的图像文件格式了,svg严格来说应该是一种开放标准的矢量图形语言,使用svg格式我们可以直接用代码来描绘图像,可以用任何文字处理工具打开svg图像,通过改变部分代码来使图像具有交互 ...
android炫酷的动画效果
这段时间看到一些比较好看的android动画效果,下面我就给大家一些我比较喜欢的动画效果,并附上源码希望对你们有用处. 1.很简单却很酷的粒子破碎效果介绍: 实现思路 1.新建一个 Bean Pa ...
html惊喜盒子效果,网页设计之css炫酷3d盒子效果
EasyDemo*CSS概述及样式表知识点个人总结(一&&二) 一.CSS CSS概述 1.1.1CSS的作用 1.1.2什么是CSS *CSS:层叠样式表,简称样式表 *用于html ...
Android实现炫酷SVG动画效果
svg是眼下十分流行的图像文件格式了,svg严格来说应该是一种开放标准的矢量图形语言,使用svg格式我们能够直接用代码来描画图像,能够用不论什么文字处理工具打开svg图像.通过改变部分代码来使图像具有 ...
如何做一个炫酷的动画网站-css实现图片上下浮动效果
目前网站制作技术已经非常成熟.所以要实现一个炫酷的动画网站还是非常容易,现在通过js和css就都能实现.直接css就能实现各种效果,下面我们来通过一个小动画看看如何用css来实现让你的网站图片上下浮动 ...
html飞机动画,基于纯CSS3纸飞机炫酷动画特效
简要教程 Flyaway.css是一款使用纯CSS3制作的炫酷纸飞机动画特效.Flyout模式可以应用于登录页面,信息发送成功,如果填的信息有误,可以使用Shake模式,代表信息输入有误. Flyaw ...
[译] CSS 变量实现炫酷鼠标悬浮效果
原文: Stunning hover effects with CSS variables 我的博客:[译] CSS 变量实现炫酷鼠标悬浮效果我最近从Grover网站上的有趣的悬停动画中获得灵感.将 ...

纯html+css炫酷地球仪动画效果

纯html+css炫酷地球仪动画效果相关推荐

最新文章

热门文章