阅读 788
(中秋创意投稿)纯css实现3d效果,嫦娥卫星环月动画。

(中秋创意投稿)纯css实现3d效果,嫦娥卫星环月动画。

“我正在参加中秋创意投稿大赛,详情请看:中秋创意投稿大赛

前言:

值此中秋佳节之际,我们的神州十二号于9月17号也传来了顺利返航的消息。突然就想到了我国的嫦娥卫星探月。古代有嫦娥奔月的神话,现代我国将神话变成了现实!那就来个卫星绕月的动画吧。

  • 元素:月亮、轨道、嫦娥卫星、中国红。
  • 要求:看起来尽量真实。

先来张效果图吧:

gtmhj-2gkdy.gif

实现:

一、月亮

思路:添加一个div,设置背景为月亮的平面图,然后设为圆形。 去哪找月球的真实图片呢,国家航天局官网www.cnsa.gov.cn/n6758824/n6… 好了就用这张图片吧!

image.png html:

<!-- 首先我们创建一个月亮 -->
<div class="mercury "></div>
复制代码

css:

.mercury {
	position: absolute;
	z-index: 3;
	left: 50%;
	top: 50%;
	margin-left: -300px;
	margin-top: -300px;
	height: 600px;
	width: 600px;
        //这里我们让左右有点压缩的效果
	background-size: 800px 600px !important;
	border-radius: 300px;
	background: url(../assets/mercury.jpg);
}
复制代码

效果:

image.png 这样肯定是不够的,现在我们再加点阴影和光照效果,让月亮看起来更加立体。 比如这样:

image.png 属性介绍:(box-shadow)把一个或多个下拉阴影添加到框上。 链接:developer.mozilla.org/zh-CN/docs/… 好了那现在添加多个内外的阴影,使月亮看起来更加立体!我们假设太阳光从左边照向月亮。

boxShadow: -90px 20px 50px 0 black inset,//右侧内部阴影 0 0px 130px 40px rgba(73, 61, 59, 0.1) inset,//左侧内部阴影 0 0px 23px 4px rgba(230, 223, 221, 0.3) inset,//左侧内部小阴影,让看起来有点层次 -20px 0 60px 0 rgba(189, 183, 181, 0.3);//外部发光,向左偏移

完整代码css:

.mercury {
	position: absolute;
	z-index: 3;
	left: 50%;
	top: 50%;
	margin-left: -300px;
	margin-top: -300px;
	height: 600px;
	width: 600px;
        //这里我们让左右有点压缩的效果
	background-size: 800px 600px !important;
	border-radius: 300px;
	background: url(../assets/mercury.jpg);
        //添加阴影
        box-shadow: -90px 20px 50px 0 black inset, 0 0px 130px 40px rgba(73, 61, 59, 0.1) inset, 0 0px 23px 4px rgba(230, 223, 221, 0.3) inset, -20px 0 60px 0 rgba(189, 183, 181, 0.3);
}
复制代码

效果图:

image.png 是不是有点那意思了呢!果然,人靠衣装、佛靠金装。

二、轨道

思路:添加一个圆形div,然后压缩成椭圆。

html:

<!-- 首先我们创建一个月亮 -->
<div class="mercury "></div>
<!-- 我们再创建一条嫦娥绕月的轨道 -->
<div class="satellite-orbits"></div>
复制代码

我们添加一个1000px的圆形,并做好定位。css:

.satellite-orbits {
	height: 1000px;
	width: 1000px;
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 50%;
	margin-left: -500px;
	margin-top: -500px;
	border: 7px solid rgba(189, 183, 181, 0.2);
	border-radius: 50%;
       }
复制代码

效果:

image.png 怎么压扁呢?
transform:scaleY(s)通过设置 Y 轴的值来定义缩放转换。
属性介绍:(transform)developer.mozilla.org/zh-CN/docs/…
transform: scaleY(0.5); image.png
这样还不够,我们查看transform不难发现还有rotate属性:(定义沿着指定轴进行3D旋转。)mdn上的例子是这样的,transform: rotateX(45deg);

image.png 好了!现在我们同样的设置轨道沿着X轴做旋转调整到合适的角度。 transform: scaleY(0.5) rotateX(70deg);

image.png ok!有点那意思了。
但是问题来了,下方轨道线应该是在月球前方,上方的线在后方。这样才有立体的效果呀。
GG~ 怎么办?
没有解决不了的问题,只有解决不了问题的人!
不行!我想想
几东后。。发现了好东西。

image.png transform-style:设置元素的子元素是位于 3D 空间中还是平面中。链接:developer.mozilla.org/zh-CN/docs/…
这不正是我要的吗?
好了继续:
“设置元素的子元素”,那就开始吧。
调整dom结构让月亮成为轨道的子元素,并设置preserve-3d让子元素位于 3D 空间中。
html:

<!-- 我们再创建一条嫦娥绕月的轨道 -->
<div class="satellite-orbits">
<!-- 首先我们创建一个月亮 --> 
<div class="mercury "></div>
</div>
复制代码

css:

.mercury {
	position: absolute;
	z-index: 3;
	left: 50%;
	top: 50%;
	margin-left: -300px;
	margin-top: -300px;
	height: 600px;
	width: 600px;
        //这里我们让左右有点压缩的效果
	background-size: 800px 600px !important;
	border-radius: 300px;
	background: url(../assets/mercury.jpg);
        //添加阴影
        box-shadow: -90px 20px 50px 0 black inset, 0 0px 130px 40px rgba(73, 61, 59, 0.1) inset, 0 0px 23px 4px rgba(230, 223, 221, 0.3) inset, -20px 0 60px 0 rgba(189, 183, 181, 0.3);
}

.satellite-orbits {
	height: 1000px;
	width: 1000px;
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 50%;
	margin-left: -500px;
	margin-top: -500px;
	border: 7px solid rgba(189, 183, 181, 0.2);
	border-radius: 50%;
        transform: scaleY(0.5) rotateX(70deg); //压缩
        transform-style: preserve-3d;//子元素是位于 3D 空间中
}
复制代码

效果: image.png 因为transform会影响子元素,我们调整dom后,月亮也被压扁了。
那矫正吧!给月亮添加反向的transform。 .mercury{transform:rotateX(-70deg) scaleY(2);}
效果: image.png

三、嫦娥卫星

我们的主角嫦娥卫星登场! 思路:添加一个卫星,相对于轨道对齐。
先找一个嫦娥卫星的效果图。 就你了

image.png html:

<!-- 我们再创建一条嫦娥绕月的轨道 -->
<div class="satellite-orbits">
    <!-- 首先我们创建一个月亮 --> 
    <div class="mercury "></div>
    <!-- 嫦娥卫星 --> 
    <div class="Change"></div>
</div>

复制代码

css

.Change {
	background: url(../assets/Change.png);
	background-size: 100%;
	width: 150px;
	height: 75px;
	position: absolute;
	top: calc(50% - 75px);
	right: 0;
	transform:rotateX(-70deg) scaleY(2);//同样的校正
}
复制代码

效果:

image.png 至此一个静态的嫦娥卫星绕月就完成了,现在我们添加动画吧!

四、添加动画

思路:让地球顺时针旋转,同时让卫星轨道滚动起来。为了达到立体效果,卫星要有远近效果。好了开始吧!
预备属性知识:animation这肯定是必不可少的。 链接:developer.mozilla.org/zh-CN/docs/…

1、月球旋转动画。

怎么让月球运动?我特意问了下做ui小伙伴,他的回答是:

image.png
豁然开朗,没错,走动就好了,确实“简单!”。还记得我们之前的月亮是背景图吗?那我们让图片向x轴走动。 那我们就创建关键帧吧:

   @keyframes autogiration {
	from {
		background-position-x: 0px;
	}

	to {
		background-position-x: -2400px;
	}
    }
复制代码

我们添加动画并引入关键帧:
animation-name: autogiration; //动画名称
animation-duration: 60s; //持续时间
animation-delay: 1s; //一秒后执行
animation-iteration-count: infinite; //无限次播放
animation-timing-function: linear; //匀速
css:

.mercury {
	position: absolute;
	z-index: 3;
	left: 50%;
	top: 50%;
	margin-left: -300px;
	margin-top: -300px;
	height: 600px;
	width: 600px;
	//这里我们让左右有点压缩的效果
	background-size: 800px 600px !important;
	border-radius: 300px;
	background: url(../assets/mercury.jpg);
	//添加阴影
        box-shadow: -90px 20px 50px 0 black inset, 0 0px 130px 40px rgba(73, 61, 59, 0.1) inset, 0 0px 23px 4px rgba(230, 223, 221, 0.3) inset, -20px 0 60px 0 rgba(189, 183, 181, 0.3);
	//矫正
        transform: rotateX(-70deg) scaleY(2);
	animation-name: autogiration;
	//动画名称
      animation-duration: 60s;
	//持续时间
      animation-delay: 1s;
	//一秒后执行
      animation-iteration-count: infinite;
	//无限次播放
      animation-timing-function: linear;
	//匀速
}
复制代码

效果图:

autogiration.gif so easy!感谢ui大兄弟。

2、轨道旋转

让卫星轨道滚动起来! 关键属性:rotateZ developer.mozilla.org/zh-CN/docs/…
那就围着Z轴旋转360deg吧,别忘了我们之前的scaleY(0.5) rotateX(70deg)!

添加关键帧:

@keyframes operation {
	from {
		transform: scaleY(0.5) rotateX(70deg) rotateZ(0);
	}

	to {
		transform: scaleY(0.5) rotateX(70deg) rotateZ(360deg);
	}
}
复制代码

引入operation并设置参数: css:

.satellite-orbits {
	height: 1000px;
	width: 1000px;
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 50%;
	margin-left: -500px;
	margin-top: -500px;
	border: 7px solid rgba(189, 183, 181, 0.2);
	border-radius: 50%;
        transform: scaleY(0.5) rotateX(70deg); //压缩
        transform-style: preserve-3d;//子元素是位于 3D 空间中
          
          animation-name: operation; //动画名称
          animation-duration: 60s; //持续时间
          animation-delay: 1s; //一秒后执行
          animation-iteration-count: infinite; //无限次播放
          animation-timing-function: linear; //均速
}
复制代码

效果图:

image.png 旋转一会,发现问题了。之前我们设置transform-style: preserve-3d;时让月亮成为了轨道的子元素,旋转影响了月球。 和之前月亮被压扁一样,那再次矫正月亮。
添加反向动画rotateZ由0到-360deg,修改月亮关键帧:

@keyframes autogiration {
	from {
		background-position-x: 0px;
		transform: rotateZ(0) rotateX(-70deg) scaleY(2);
	}

	to {
		background-position-x: -2400px;
		transform: rotateZ(-360deg) rotateX(-70deg) scaleY(2);
	}
}
复制代码

再看看效果:

image.png

3、添加卫星远近效果。

我们把轨道分成四份,分别是代表 右下  左下 左上 右上区域。如图:

image.png 关键属性:scale用于修改元素大小,链接:developer.mozilla.org/zh-CN/docs/… 好了,那就添加动画吧,同样的也矫正卫星。
关键帧:

@keyframes revise-operation {
     // 分成四份 分别是代表 右下  左下 左上 右上区域。
      // 然后通过	scale改变卫星大小实现远近效果。
      0% {
            transform: scale(1) rotateZ(0) rotateX(-70deg) scaleY(2);
	}

	25% {
		transform: scale(2) rotateZ(-90deg) rotateX(-70deg) scaleY(2);
	}

	50% {
		transform: scale(1) rotateZ(-180deg) rotateX(-70deg) scaleY(2);
	}

	75% {
		transform: scale(0.5) rotateZ(-270deg) rotateX(-70deg) scaleY(2);
	}

	100% {
		transform: scale(1) rotateZ(-360deg) rotateX(-70deg) scaleY(2);
	}
}
复制代码

引入,这里我们就简写了,和上面一样意思:animation: revise-operation 60s 1s infinite linear;
css:

// 然后我们的主角嫦娥卫星登场!
.Change {
	background: url(../assets/Change.png);
	background-size: 100%;
	width: 150px;
	height: 75px;
	position: absolute;
	top: calc(50% - 75px);
	right: 0;
	transform:rotateZ(0) rotateX(-70deg) scaleY(2);//同样的校正
          
        animation: revise-operation 60s 1s infinite linear;//实现远近效果
}
复制代码

效果图:

end.gif

4、添加小红旗

最后我们添加一个小红旗吧。 html:

<div class="cn"></div>
复制代码

css:

.cn {
	background: url(../assets/cn3.png);
	background-size: 100%;
	width: 32px;
	height: 32px;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate3d(118px, 100px, 0px);
}
复制代码

总结:

哈哈面向api编程,还有很多需要改进的地方,欢迎小伙伴讨论交流,祝大家中秋快乐!喜欢的朋友多谢三连击哦!第一次写掘金,想要掘金大大小礼物!。

1632058320.png 完整代码:gitee.com/time_value/…

文章分类
前端
文章标签