jquery星球介绍app点击交互效果-html代码-BFW代码库

代码语言：html

代码描述：jquery星球介绍app点击交互效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600";
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  color: #FFF;
  text-decoration: none;
}

html, body {
  height: 100%;
  width: 100%;
}

body {
  padding: 0px;
  margin: 0;
  font-family: "Source Sans Pro", sans-serif;
  background: #150633;
  background: -webkit-linear-gradient(90deg, #150633, #1e094a);
  background: linear-gradient(90deg, #150633, #1e094a);
  -webkit-font-smoothing: antialiased;
}

.flex {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app {
  background: #122E91;
  background: -webkit-linear-gradient(0deg, #122E91, #2F54C9);
  background: linear-gradient(0deg, #122E91, #2F54C9);
  width: 370px;
  text-align: center;
  overflow: hidden;
  height: 650px;
  position: relative;
  box-shadow: 0 19px 48px rgba(0, 0, 0, 0.22), 0 15px 32px rgba(0, 0, 0, 0.15);
}
.app .title {
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  position: relative;
  z-index: 9999;
}
.app .apptext {
  position: absolute;
  bottom: 30px;
  padding: 0px 30px;
  text-align: left;
}
.app .apptext .mercury, .app .apptext .jupiter, .app .apptext .uranus {
  display: none;
}
.app .apptext h2 {
  color: #FFF;
  margin-bottom: 5px;
}
.app .apptext p {
  font-weight: 300;
  color: rgba(255, 255, 255, 0.8);
}
.app svg {
  min-width: 600px;
  position: absolute;
  top: 0px;
  left: -80px;
}
.app svg #planetone, .app svg #planettwo, .app svg #planetthree {
  -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.app svg.planetone #planetone {
  -webkit-transform: scale(1.7);
  -moz-transform: scale(1.7);
  -ms-transform: scale(1.7);
  -o-transform: scale(1.7);
  transform: scale(1.7);
  transform-origin: center center;
}
.app svg.planetone #planettwo, .app svg.planetone #planetthree {
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  -ms-transform: scale(0.6);
  -o-transform: scale(0.6);
  transform: scale(0.6);
  transform-origin: center;
  opacity: 0.3;
  filter: alpha(opacity=30);
}
.app svg.planettwo #planettwo {
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
  transform-origin: center;
}
.app svg.planettwo #planetone, .app svg.planettwo #planetthree {
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  -ms-transform: scale(0.6);
  -o-transform: scale(0.6);
  transform: scale(0.6);
  transform-origin: center;
  opacity: 0.3;
  filter: alpha(opacity=30);
}
.app svg.planetthree #planetthree {
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
  transform-origin: center;
}
.app svg.planetthree #planetone, .app svg.planetthree #planettwo {
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  -ms-transform: scale(0.6);
  -o-transform: scale(0.6);
  transform: scale(0.6);
  transform-origin: center;
  opacity: 0.3;
  filter: alpha(opacity=30);
}
</style>

</head>
<body translate="no">
<div class="flex">
<div class="app">
<h2 class="title">Click A Planet</h2>


<svg version="1.1" id="planets" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;" xml:space="preserve">
<style type="text/css">
      .st0{opacity:0.4;}
      .st1{fill:#5538D7;}
      .st2{fill:#4F46E3;}
      .st3{fill:#77BBFF;}
      .st4{fill:#3998FF;}
      .st5{fill:#3285FE;}
      .st6{fill:#3C9AFF;}
      .st7{fill:#606182;}
      .st8{fill:#6D7974;}
      .st9{fill:#94AD70;}
      .st10{fill:#899F64;}
      .st11{fill:#80965D;}
      .st12{fill:#849960;}
      .st13{fill:#525D95;}
      .st14{fill:#556E9A;}
      .st15{fill:#639FA3;}
      .st16{fill:#5A9198;}
      .st17{fill:#55898F;}
      .st18{fill:#5C989E;}
    </style>
<filter id="blurMe">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
<a href="#0" class="planetone">
<g id="planetone">
<g class="st0">
<circle class="st1" cx="258.2" cy="172" r="112.5" />
</g>
<g class="st0">
<circle class="st2" cx="258.2" cy="172" r="97.4" />
</g>
<g>
<g>
<circle class="st3" cx="258.2" cy="172" r="80.2" />
<path class="st4" d="M337.4,184.5c0.6-4.1,1-8.2,1-12.5c0-22.2-9-42.3-23.5-56.8c-16.5,50.9-62.4,87.4-116.5,87.4
            c-5,0-9.9-0.3-14.7-0.9c9.9,24.7,31.7,43.4,58.4,48.9c1.4,0.1,2.9,0.1,4.3,0.1C288.1,250.8,323.6,223.2,337.4,184.5z" />
<path class="st5" d="M338.4,172c0-9.7-1.7-19-4..........完整代码请登录后点击上方下载按钮下载查看