<!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资源评论
易小侠
- 粉丝: 6607
- 资源: 9万+
最新资源
- 基于Kotlin语言的Android开发工具类集合源码
- 零延迟 DirectX 11 扩展实用程序.zip
- 基于Java的语音识别系统设计源码
- 基于Java和HTML的yang_home766个人主页设计源码
- 基于Java与前端技术的全国实时疫情信息网站设计源码
- 基于鸿蒙系统的HarmonyHttpClient设计源码，纯Java实现类似OkHttp的HttpNet框架与优雅的Retrofit注解解析
- 基于HTML和JavaScript的廖振宇图书馆前端设计源码
- 基于Java的Android开发工具集合源码
- 通过 DirectX 12 Hook (kiero) 实现通用 ImGui.zip
- 基于Java开发的YY网盘个人网盘设计源码
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
