<!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>HTML5 CSS3 带悬停显示星球详情功能的太阳系</title>
<style>
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Press+Start+2P");
@import url("https://fonts.googleapis.com/css?family=VT323");
@import url("https://fonts.googleapis.com/css?family=Josefin+Sans");
.star:nth-of-type(1) {
left: 66vw;
top: 9vw;
}
.star:nth-of-type(2) {
left: 99vw;
top: 37vw;
}
.star:nth-of-type(3) {
left: 18vw;
top: 17vw;
}
.star:nth-of-type(4) {
left: 21vw;
top: 19vw;
}
.star:nth-of-type(5) {
left: 6vw;
top: 18vw;
}
.star:nth-of-type(6) {
left: 98vw;
top: 19vw;
}
.star:nth-of-type(7) {
left: 43vw;
top: 21vw;
}
.star:nth-of-type(8) {
left: 85vw;
top: 27vw;
}
.star:nth-of-type(9) {
left: 80vw;
top: 18vw;
}
.star:nth-of-type(10) {
left: 59vw;
top: 1vw;
}
.star:nth-of-type(11) {
left: 1vw;
top: 18vw;
}
.star:nth-of-type(12) {
left: 99vw;
top: 26vw;
}
.star:nth-of-type(13) {
left: 89vw;
top: 7vw;
}
.star:nth-of-type(14) {
left: 3vw;
top: 4vw;
}
.star:nth-of-type(15) {
left: 78vw;
top: 29vw;
}
.star:nth-of-type(16) {
left: 18vw;
top: 12vw;
}
.star:nth-of-type(17) {
left: 24vw;
top: 15vw;
}
.star:nth-of-type(18) {
left: 32vw;
top: 41vw;
}
.star:nth-of-type(19) {
left: 43vw;
top: 4vw;
}
.star:nth-of-type(20) {
left: 53vw;
top: 7vw;
}
.star:nth-of-type(21) {
left: 5vw;
top: 48vw;
}
.star:nth-of-type(22) {
left: 78vw;
top: 17vw;
}
.star:nth-of-type(23) {
left: 26vw;
top: 22vw;
}
.star:nth-of-type(24) {
left: 11vw;
top: 19vw;
}
.star:nth-of-type(25) {
left: 71vw;
top: 20vw;
}
html,
body {
margin: 0;
max-width: 100%;
height: 100%;
overflow: hidden;
}
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100vh;
width: 100vw;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
background: -webkit-linear-gradient(left, rgba(204, 41, 0, 0.8), #003366, #000d1a, #000d1a, #000d1a, #000d1a);
background: linear-gradient(to right, rgba(204, 41, 0, 0.8), #003366, #000d1a, #000d1a, #000d1a, #000d1a);
}
.container:before {
content: '';
display: block;
height: 0;
padding-bottom: 37%;
width: 37%;
background: #ff9933;
position: absolute;
left: -36%;
margin: auto;
top: 0;
bottom: 0;
border-radius: 50%;
box-shadow: 20px 0 150px 20px #ff8000;
}
.container .star {
background: #fff;
height: .3vh;
width: .3vh;
position: absolute;
opacity: 1;
z-index: 0;
}
.container .section {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
position: relative;
height: 100%;
-webkit-transition: all 0.4s;
transition: all 0.4s;
text-align: center;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.container .section .cplanet {
-webkit-transition: all 0.3s;
transition: all 0.3s;
will-change: trasform;
}
.container .section .cplanet .planet {
overflow: hidden;
will-change: auto;
border-radius: 50%;
-webkit-transition: box-shadow 0.3s;
transition: box-shadow 0.3s;
}
.container .section .cplanet .planet:after,
.container .section .cplanet .planet:before {
visibility: hidden;
}
.container .section .desc {
position: absolute;
width: 22vw;
height: 22vw;
margin: auto;
top: 0;
bottom: 0;
left: 55%;
overflow: hidden;
}
.container .section .desc:after {
position: absolute;
width: 90%;
height: 100%;
color: white;
padding: 10px;
left: 0;
margin: 0;
text-align: justify;
font-size: 0.7vw;
font-family: 'Josefin Sans', sans-serif;
padding-top: 100%;
}
.container .section .planetname {
position: absolute;
width: 90%;
height: 0;
padding-bottom: 90%;
margin: auto;
left: 0;
right: 0;
bottom: 80%;
visibility: hidden;
}
.container .section .planetname .line {
position: absolute;
width: 1px;
height: 10vh;
margin-left: -65%;
background: rgba(255, 255, 255, 0.5);
bottom: 0;
z-index: 20;
}
.container .section .planetname .line:after {
display: block;
color: white;
font-family: 'Press Start 2P', cursive;
position: absolute;
width: 20%;
top: -45%;
padding-left: 0px;
font-size: 0.8vw;
}
.container .section:nth-child(1) .planet {
box-shadow: 1em 0em 0.22em 0 rgba(255, 255, 204, 0.64) inset;
}
.container .section:nth-child(2) .planet {
box-shadow: 1em 0em 0.44em 0 rgba(255, 255, 204, 0.56) inset;
}
.container .section:nth-child(3) .planet {
box-shadow: 1em 0em 0.66em 0 rgba(255, 255, 204, 0.48) inset;
}
.container .section:nth-child(4) .planet {
box-shadow: 1em 0em 0.88em 0 rgba(255, 255, 204, 0.4) inset;
}
.container .section:nth-child(5) .planet {
box-shadow: 1em 0em 1.1em 0 rgba(255, 255, 204, 0.32) inset;
}
.container .section:nth-child(6) .planet {
box-shadow: 1em 0em 1.32em 0 rgba(255, 255, 204, 0.24) inset;
}
.container .section:nth-child(7) .planet {
box-shadow: 1em 0em 1.54em 0 rgba(255, 255, 204, 0.16) inset;
}
.container .section:nth-child(8) .planet {
box-shadow: 1em 0em 1.76em 0 rgba(255, 255, 204, 0.08) inset;
}
.container .section:hover {
-webkit-box-flex: 9;
-ms-flex-positive: 9;
flex-grow: 9;
-webkit-transition: all 0.4s;
transition: all 0.4s;
background: rgba(255, 255, 255, 0.1);
}
.container .section:hover .cplanet {
-webkit-transform: translateX(-11vw) !important;
transform: translateX(-11vw) !important;
-webkit-transition: all 0.4s;
transition: all 0.4s;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.container .section:hover .cplanet .planetname {
visibility: visible;
}
.container .section:hover .planet {
box-shadow: 0 0 1em -0.35em rgba(255, 255, 255, 0.2), 0 -1em 1.1em 0 rgba(68, 68, 68, 0.4) inset, 0 0 2.5em 0 rgba(0, 0, 0, 0.4) inset;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.container .section:hover .planet:after,
.container .section:hover .planet:before {
visibility: visible;
}
.container .section:hover .desc:after {
padding-top: 6%;
-webkit-transition: padding-top 4s ease-in;
transition: padding-top 4s ease-in;
}
.container .section:nth-child(1) .desc:after {
content: "Mercury is the smallest and innermost planet in the Solar System. Its orbital period (about 88 Earth days) is less than any other planet in the Solar System. Seen from Earth, it appears to move around its orbit in about 116 days. It has no known natural satellites. It is named after the Roman deity Mercury, the messenger to the gods.\a \aLike Venus, Mercury orbits the Sun within Earths orbit as a inferior planet, so it can only be seen visually in the morning or the evening sky, and never exceeds 28° away from the Sun. Also, like Venus and the Moon, it displays the complete range of phases as it moves around its orbit relative to Earth. Although Mercury can appear as a bright star-like object when viewed from Earth, its proximity to the Sun often makes it more difficult to see than Venus.";
white-space: pre-wrap;
}
.container .section:nth-child(1) .cplanet {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 6%;
height: 0;
padding-bottom: 6%;
border-radius: 50%;
z-index: 1;
}
.container .section:nt
HTML5+CSS3实现带悬停显示星球详情功能的太阳系动画效果源码.zip （1个子文件） 
132689870637297628 
index.html 38KB资源评论
易小侠
- 粉丝: 6634
- 资源: 9万+
最新资源
- 微信社团小程序ssm-微信小程序毕业项目，适合计算机毕-设、实训项目、大作业学习.rar
- 校园综合服务小程序+ssm-微信小程序毕业项目，适合计算机毕-设、实训项目、大作业学习.rar
- 微信平台签到系统的设计与实现springboot-微信小程序毕业项目，适合计算机毕-设、实训项目、大作业学习.rar
- 微信小程序的高校党费收缴系统ssm-微信小程序毕业项目，适合计算机毕-设、实训项目、大作业学习.rar
- 学生活动管理系统+ssm-微信小程序毕业项目，适合计算机毕-设、实训项目、大作业学习.rar
- 新闻资讯微信小程序开发后端+php-微信小程序毕业项目，适合计算机毕-设、实训项目、大作业学习.rar
- 自动驾驶控制器，基于分布式驱动电动汽车的四轮侧偏刚度估计，采用容积卡尔曼（ckf）进行估计，能够很好地估计汽车行驶过程中的侧偏刚度，并与转化的侧向轮胎力进行比较，具有很好的估计效果 模型中第一个模块
- 新闻资讯系统设计+springboot-微信小程序毕业项目，适合计算机毕-设、实训项目、大作业学习.rar
- 数据结构PTA理论题答案.zip
- 微信小程序的驾校预约管理系统--论文-微信小程序毕业项目，适合计算机毕-设、实训项目、大作业学习.zip
- 微信小程序的英语学习激励系统--论文-微信小程序毕业项目，适合计算机毕-设、实训项目、大作业学习.zip
- 微信小程序基于BS模式的学生实习与就业管理系统设计与实现springboot-微信小程序毕业项目，适合计算机毕-设、实训项目、大作业学习.rar
- 学生知识成果展示与交流+ssm-微信小程序毕业项目，适合计算机毕-设、实训项目、大作业学习.rar
- 学习自律养成小程序+ssm-微信小程序毕业项目，适合计算机毕-设、实训项目、大作业学习.rar
- 医院挂号系统设计与实现+ssm-微信小程序毕业项目，适合计算机毕-设、实训项目、大作业学习.rar
- 微信小程序评分小程序ssm-微信小程序毕业项目，适合计算机毕-设、实训项目、大作业学习.rar
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
