旋转的地球css3

最新推荐文章于 2023-05-11 14:27:38 发布
最新推荐文章于 2023-05-11 14:27:38 发布
阅读量560 收藏 1
点赞数

css3果然博大精深：

1.代码里面还有用box-shadow制作椭圆形阴影的效果，厉害了！之前找了好久都没找到，今天给找到了

html:

<section class="stage">
    <figure class="ball">
    	<span class="shadow"></span>
    </figure>
  </section>

css:

.ball .shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
    -webkit-transform: rotateX(90deg) translateZ(-150px);
    -moz-transform: rotateX(90deg) translateZ(-150px);
    -ms-transform: rotateX(90deg) translateZ(-150px);
    -o-transform: rotateX(90deg) translateZ(-150px);
    transform: rotateX(90deg) translateZ(-150px);
    z-index: -1;
}

效果：　　

2.下面才是重点:

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>旋转的地球</title>  
<style>  
	* {margin:0; padding:0; border:0;}  
	.ball {
	  display: inline-block;
	  width: 100%;
	  height: 100%;
	  margin: 0;
	  border-radius: 50%;
	  position: relative;
	  -webkit-transform-style: preserve-3d;
	  background: url('http://hop.ie/balls/images/world-map-one-color.png') repeat-x;
	  background-size: auto 100%;
	  -webkit-animation: move-map 30s infinite linear;
	  -moz-animation: move-map 30s infinite linear;
	  -o-animation: move-map 30s infinite linear;
	  -ms-animation: move-map 30s infinite linear;
	  animation: move-map 30s infinite linear;
	}

	.ball:before {
	  content: "";
	  position: absolute;
	  top: 0%;
	  left: 0%;
	  width: 100%;
	  height: 100%;
	  border-radius: 50%;
	  box-shadow: -40px 10px 70px 10px rgba(0,0,0,0.5) inset;
	  z-index: 2;
	}

	.ball:after {
	  content: "";
	  position: absolute;
	  border-radius: 50%;
	  width: 100%;
	  height: 100%;
	  top: 0;
	  left: 0;
	  -webkit-filter: blur(0);
	  opacity: 0.3;
	  background: radial-gradient(circle at 50% 80%, #81e8f6, #76deef 10%, #055194 66%, #062745 100%);
	}

	.ball .shadow {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
	  -webkit-transform: rotateX(90deg) translateZ(-150px);
	  -moz-transform: rotateX(90deg) translateZ(-150px);
	  -ms-transform: rotateX(90deg) translateZ(-150px);
	  -o-transform: rotateX(90deg) translateZ(-150px);
	  transform: rotateX(90deg) translateZ(-150px);
	  z-index: -1;
	}
	body {
	  width: 300px;
	  margin: 20px auto;
	  background: linear-gradient(to bottom, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);
	  background-repeat: no-repeat;
	}

	.stage {
	  width: 300px;
	  height: 300px;
	  display: inline-block;
	  margin: 20px;
	  -webkit-perspective: 1200px;
	  -moz-perspective: 1200px;
	  -ms-perspective: 1200px;
	  -o-perspective: 1200px;
	  perspective: 1200px;
	  -webkit-perspective-origin: 50% 50%;
	  -moz-perspective-origin: 50% 50%;
	  -ms-perspective-origin: 50% 50%;
	  -o-perspective-origin: 50% 50%;
	  perspective-origin: 50% 50%;
	}

	@-moz-keyframes move-map {
	  0% {
	    background-position: -849px 0; }

	  100% {
	    background-position: 0 0; } }

	@-webkit-keyframes move-map {
	  0% {
	    background-position: 0 0; }
	  100% {
	    background-position: -849px 0; }
	}


	@-o-keyframes move-map {
	  0% {
	    background-position: -849px 0; }

	  100% {
	    background-position: 0 0; } }

	@-ms-keyframes move-map {
	  0% {
	    background-position: -849px 0; }

	  100% {
	    background-position: 0 0; } }

	@keyframes move-map {
	  0% {
	    background-position: -849px 0; }

	  100% {
	    background-position: 0 0; } } 
</style>  
</head> 
<body>  
	<section class="stage">
    <figure class="ball">
    	<span class="shadow"></span>
    </figure>
  </section> 
</body>  
</html>

可以复制上面的代码到框框中运行试试哦！　

2

 

还有更好玩的css3：http://www.w3cplus.com/css3/spheres.html

有时间一定要自己写写！^_^

weixin_34417183
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css地球旋转
HELLOWORLD!
07-19 471
<!doctype html> <html> <head> <meta charset="utf-8"> <title>css地球旋转</title> <style> * {margin:0; padding:0; border:0;} .rotateBox {width:200px; height:200px; margin:100px; } .rotateBoxImg {width:200px; height:200p
css制作旋转地球
最新发布
果栋的博客
09-06 552
地球与网状格格顺时针旋转，光边逆时针旋转，这种效果使用的是动画效果与过渡效果实现，样式代码如下：map1、map2、map3盒子的背景分别是地球、描边、网格。地球有一个比较亮的描边，还有一些网格状的东西罩在上面。
CSS实现天体旋转
2201_75321887的博客
05-11 747
主要运用了animation动画，使地球进行自转，月球进行公转，效果如下（GIF动图有点大，传不进来），地球自己在旋转，月球围绕地球进行旋转。
vue中通过css实现旋转地球
m0_62276354的博客
11-26 1258
动态地球旋转
css animation动画完成后隐藏_如何使用CSS实现旋转地球动画效果
weixin_39636696的博客
11-21 402
旋转地球功能实现主要借助于CSS动画效果完成，通过移动地图背景图层，云彩图层等，在视觉上呈现出旋转地球效果。旋转地球最终实现效果如下图所示：旋转地球效果展示设计思路与核心技术旋转地球效果实现主要借助于animation动画属性完成，在动画关键之keyframe编写时移动图片坐标位置，实现背景地图图片位置移动。为体现移动效果，进一步定义了云彩与飞机，飞机居中固定，云彩与地球非同步移动，最终呈现出动态...
CSS3网状地球旋转特效
06-24
**CSS3网状地球旋转特效详解** 在网页设计中，动态元素往往能吸引用户的注意力，增强网站的互动性。"CSS3网状地球旋转特效"就是一种利用CSS3技术实现的创新视觉效果，它通过线条构成的网状结构，模拟出地球的形态，...
纯css3多边形地球仪特效
07-24
纯CSS3多边形地球仪特效是一种利用现代Web技术实现的视觉效果，它结合了CSS3的特性，如转换（transform）、过渡（transition）和3D变换，来创建一个动态的、具有立体感的地球模型。这个特效展示了地球在网页上的自转...
CSS3旋转动画地球周转特效特效代码
03-20
【CSS3旋转动画地球周转特效】是Web前端开发中一种运用CSS3技术实现的动态视觉效果。CSS3作为层叠样式表的第三个版本，引入了许多新的功能和特性，其中包括强大的动画效果，使得网页元素可以展现出丰富的动态表现。...
3D地球旋转代码_3D地球旋转代码_
10-02
在本项目中，我们关注的是一个使用HTML5、CSS3和JavaScript实现的3D地球旋转效果。这个技术栈主要用于创建动态、交互式的网页元素，尤其是视觉上吸引人的3D图形。下面将详细介绍如何通过这些技术来实现3D地球旋转。 ...
html实现旋转地球特效
03-13
本文将详细介绍如何使用HTML、CSS和CSS3的animation属性来实现一个旋转地球的特效。 首先，我们需要理解HTML的基础结构。HTML（超文本标记语言）是网页内容的主要描述语言，用于构建网页的元素框架。在这个场景中，...
地球自转的动画
12-23
这是一个地球自转的动画
CSS3旋转动画地球周转特效.zip
07-11
代码简介：CSS3旋转动画地球周转特效是一款3D效果的旋转变形特效下载。
逼真的Canvas 3D css3地球旋转动画特效.zip
07-11
代码片段：  
纯CSS3实现地球自转实现代码(图文教程附送源码)
12-13
最终成果： 素材：两张图片, espaco.jpg(1600*1000) terra.jpg(900*450) 第一步，形成静态图（地球背景全屏，地球大小为450px*450px，地球位置为上下左右居中）： 复制代码代码如下:<!DOCTYPE html><html><head> <meta charset=”UTF-8″> <title>Planet Earth</title> <style type=”text/css”>body{ background: url(espaco.jpg) no-repeat 0 0; background-size: 1
CSS3图片围绕地球周转旋转动画特效
06-11
一款很漂亮的3D效果旋转变形特效代码，CSS3图片围绕地球周转旋转动画特效素材下载。
【小白学前端】化腐朽为神奇-HTML+CSS3实现旋转地球（day02-4）
长安紫薯的专栏
05-10 1261
功能需求 实现地球旋转，本质是一张图片，在网页中图片都是矩形没有直接提供圆形，CSS3提供了圆角样式，非常方便的解决了这个问题。 先准备一个正方形的图片，然后设置其当圆角超过图片半径时，自然就成为一个圆。 CSS3增加了强大的动画功能，可以让图片进行旋转。 界面原型 实现代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>旋
html 地球页面代码,纯CSS3实现地球自转实现代码(图文教程附送源码)
weixin_33054847的博客
06-03 7784
最终成果：素材：两张图片,espaco.jpg(1600*1000)terra.jpg(900*450)第一步，形成静态图(地球背景全屏，地球大小为450px*450px，地球位置为上下左右居中)：复制代码代码如下:Planet Earthbody{background: url(espaco.jpg) no-repeat 0 0;background-size: 100%; /* 背景图片被拉伸...
使用纯 CSS3 动画实现地球转动
热门推荐
wlx1991的专栏
12-27 1万+
旋转 * {margin:0; padding:0; border:0;} div {width:200px; height:200px; margin-left:100px; margin-top:-100px;} img {width:200px; height:200px; border-radius:100px; animation:myfirst 5s linear infinite;
CSS3动画 - 地球 - 指南针旋转
草巾冒小子的博客
10-17 2548
1. 效果图 2. 代码如下： &amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;html&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;head&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;meta charset=&
css3 一张地球图片3d旋转
09-04
使用CSS3的transform属性可以实现一张地球图片的3D旋转效果。首先，我们需要将图片设置为3D效果的容器，可以使用CSS的perspective属性设置透视视角。 例如，我们可以在HTML中创建一个div元素，并将其类名设置为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值