<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>fre fiber demo</title>
</head>
<body>
<style>
body {
background: #010911;
font-family: sans-serif;
}
h1 {
color: rgb(0, 204, 10);
}
#animation {
width: 380px;
height: 380px;
transform: translate(50%, 50%);
margin: 20px auto;
}
.slow {
background: #f60066;
color: white;
padding: 5px;
display: inline-block;
margin: 5px;
font-size: 12px;
border-radius: 50%;
}
.wraper{
margin: 20px auto;
width: 700px;
text-align: center;
}
ul.solarsystem {
position: relative;
height: 400px;
list-style: none;
transition: all 0.09s ease-in;
transform: translate(-480px, -336px);
}
ul.solarsystem li {
text-indent: -9999px;
display: block;
position: absolute;
border: 2px solid #394057;
}
ul.solarsystem li span {
display: block;
position: absolute;
width: 10px;
height: 10px;
border-radius: 5px;
}
ul.solarsystem li.active.sun span,
ul.solarsystem li.active.earth .moon {
border: none;
box-shadow: none;
}
ul.solarsystem li.sun {
width: 40px;
height: 40px;
border-radius: 20px;
background: #fc3;
background-image: gradient(linear,
left bottom,
left top,
color-stop(0.22, rgb(204, 153, 0)),
color-stop(1, rgb(255, 219, 112)));
top: 302px;
left: 462px;
border: none;
box-shadow: 0 0 50px #c90;
z-index: 100;
transition: all 0.2s ease-in;
}
ul.solarsystem li.sun span {
width: 60px;
height: 60px;
border-radius: 50%;
}
ul.solarsystem li.mercury {
width: 100px;
height: 100px;
border-radius: 52px;
top: 270px;
left: 430px;
z-index: 99;
}
ul.solarsystem li.mercury span {
background: #b6bac5;
top: 10px;
left: 10px;
}
ul.solarsystem li.venus {
width: 160px;
height: 160px;
border-radius: 82px;
top: 240px;
left: 400px;
z-index: 98;
}
ul.solarsystem li.venus span {
background: #bf8639;
top: 118px;
left: 5px;
}
ul.solarsystem li.earth {
width: 220px;
height: 220px;
border-radius: 112px;
top: 210px;
left: 370px;
z-index: 97;
}
ul.solarsystem li.earth span {
background: #06c;
top: 56px;
left: 5px;
}
ul.solarsystem li.earth span.moon {
width: 4px;
height: 4px;
border-radius: 2px;
background: #ccc;
top: 12px;
left: 12px;
}
ul.solarsystem li.mars {
width: 280px;
height: 280px;
border-radius: 142px;
top: 180px;
left: 340px;
z-index: 96;
}
ul.solarsystem li.mars span {
background: #aa4200;
top: 0px;
left: 175px;
}
ul.solarsystem li.asteroids_meteorids {
top: 155px;
left: 315px;
z-index: 1;
background: url(http://neography.com/experiment/circles/solarsystem/asteroids_meteorids.png) no-repeat 0 0;
width: 330px;
height: 330px;
border-radius: 165px;
border: none;
}
ul.solarsystem li.jupiter {
width: 340px;
height: 340px;
border-radius: 172px;
top: 150px;
left: 310px;
z-index: 95;
}
ul.solarsystem li.jupiter span {
background: #e0ae6f;
top: 67px;
left: 24px;
}
ul.solarsystem li,
ul.solarsystem li.earth span {
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: orbit;
}
ul.solarsystem li.mercury {
animation-duration: 5s;
}
ul.solarsystem li.venus {
animation-name: retrograde;
animation-duration: 8s;
}
ul.solarsystem li.earth {
animation-duration: 12s;
}
ul.solarsystem li.earth span {
animation-duration: 2s;
}
ul.solarsystem li.mars {
animation-duration: 20s;
}
ul.solarsystem li.asteroids_meteorids {
animation-duration: 50s;
}
ul.solarsystem li.jupiter {
animation-duration: 30s;
}
@keyframes orbit {
from {
transform: rotate(0deg);
color: white;
font-size: 200%;
}
to {
transform: rotate(360deg);
color: black;
font-size: 50%;
}
}
@keyframes retrograde {
from {
transform: rotate(0deg);
color: white;
font-size: 200%;
}
to {
transform: rotate(-360deg);
color: black;
font-size: 50%;
}
}
</style>
<div id="animation">
<ul class="solarsystem">
<li class="sun"><span>Sun</span></li>
<li class="mercury"><span>Mercury</span></li>
<li class="venus"><span>Venus</span></li>
<li class="earth"><span>Earth<span class="moon">Moon</span></span>
</li>
<li class="mars"><span>Mars</span></li>
<li class="asteroids_meteorids"><span>Asteroids</span></li>
<li class="jupiter"><span>Jupiter</span></li>
</ul>
</div>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>
win10专业版 winsock和winsock2注册表
4星 · 超过85%的资源 需积分: 41 40 浏览量
2019-10-06
10:34:18
上传
评论 2
收藏 16KB ZIP 举报 
Desktop.zip （3个子文件） 
index2.html 6KB
index.js 1KB
winsock和winsock2.zip 14KB资源评论
帝巴哥2020-06-17没有解决问题，但还是表示感谢。
phubing
- 粉丝: 607
- 资源: 850
最新资源
- 操作简单的Mongodb网页web管理工具,基于Spring Boot2.0支持mongodb集群.zip
- tms-mongodb-web,提供访问mongodb数据的REST API和可灵活扩展的mongodb web 客户端.zip
- SpringBoot整合mongodb学习MongoTemplate和MongoRepository两种方式CRUD使用.zip
- SpringBoot整合MongoDB实现对数据库的CRUD小demo.zip
- Python操作MongoDB数据库的基本一些操作 .zip
- NOSQL数据库监控工具，目前实现了对Redis、MongoDB的监控功能 .zip
- mongoDB数据库的增删改查，以及所需要的配置.zip
- mongodb数据库idea测试.zip
- koa 分别 连接 mysql、mongodb数据库操作.zip
- 基于pytorch实现的人体部件分割源码+模型.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
