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

2440

“我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛”

前言：

值此中秋佳节之际，我们的神州十二号于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/…

© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
前端
喜欢就支持一下吧
点赞0 分享
AI-robot的头像-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
14年前 2.6W+
机器学习之随机森林回归篇（RandomForestRegressor）-一一网
机器学习之随机森林回归篇（RandomForestRegressor）
机器学习之随机森林回归篇（RandomForestRegressor）
4年前 4241
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS-一一网
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
4年前 3921
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞-一一网
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
19年前 3844
Wireshark之抓包文件保存-一一网
Wireshark之抓包文件保存
Wireshark之抓包文件保存
4年前 3412
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3164
相关推荐
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3164
手摸手教你实现vue的动态路由（addRoute版）-一一网
手摸手教你实现vue的动态路由（addRoute版）
手摸手教你实现vue的动态路由（addRoute版）
4年前 3150
Unity实用功能之使用TextMeshPro组件-一一网
Unity实用功能之使用TextMeshPro组件
Unity实用功能之使用TextMeshPro组件
4年前 3101
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …-一一网
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …...
4年前 2849
Windi CSS 在 Vue3 + Vite 项目中的使用-一一网
Windi CSS 在 Vue3 + Vite 项目中的使用
Windi CSS 在 Vue3 + Vite 项目中的使用
3年前 2748
vue3 使用 qrcode.vue 生成二维码-一一网
vue3 使用 qrcode.vue 生成二维码
vue3 使用 qrcode.vue 生成二维码
4年前 2655
搜索
开启精彩搜索
世界，您好！-一一网
3.7W+人已阅读
世界，您好！
TOP1
番茄社区无限观看+付费视频破解教程-一一网
番茄社区无限观看+付费视频破解教程
5年前3.2W+人已阅读
TOP2
香蕉视频v3.8.3_VIP会员破解教程-一一网
香蕉视频v3.8.3_VIP会员破解教程
5年前3.1W+人已阅读
TOP3
[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网
密码保护：[桜井宁宁]COS和泉纱雾超可爱写真福利集
5年前2.8W+人已阅读
TOP4
[桜井宁宁] 爆乳奶牛少女cos写真-一一网
密码保护：[桜井宁宁] 爆乳奶牛少女cos写真
5年前2.8W+人已阅读
TOP5
快猫v1.1.7会员破解版_最新快猫vip破解教程大全-一一网
快猫v1.1.7会员破解版_最新快猫vip破解教程大全
5年前2.8W+人已阅读
TOP6
标签云
默认路由黑裙黑群晖麦克风车机鸿蒙系统鸿蒙系统鸿蒙OS鸿蒙驱动软件驱动题库音频剪辑音乐剪辑面板面具静态雷石集群随机阿里云