像星球运动
来源:互联网 发布:小筱邸模型制作数据 编辑:程序博客网 时间:2024/04/27 18:33
<!DOCTYPE html>
<html>
<head>
<title>万有引力星球转动</title>
<style type="text/css">
.wrapper{
width:100px;
height:100px;
background:lightblue;
border-radius:50%;
border:2px solid lightgreen;
position: absolute;
top:200px;
left:400px;
cursor:pointer;
}
.wrapper:after{
content:'你猜';
display:inline-block;
width:100px;
height:100px;
line-height:100px;
border-radius:50%;
text-align:center;
color:#fff;
font-size:24px;
}
.wrapper:hover .round{
-webkit-transform:scale(1);
opacity:1;
-webkit-animation:rotating 6s 1.2s linear infinite alternate;
}
@-webkit-keyframes rotating{
0%{
-webkit-transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(180deg);
}
}
.round{
width:240px;
height:240px;
border:2px solid lightgreen;
border-radius:50%;
position: absolute;
top:-70px;
left:-70px;
-webkit-transition:all 1s;
-webkit-transform:scale(0.35);
opacity:0;
}
.round span{
width:40px;
height:40px;
line-height:40px;
display:inline-block;
border-radius:50%;
background:lightblue;
border:2px solid lightgreen;
color:#fff;
text-align:center;
position:absolute;
}
.round span:nth-child(1){
right:-22px;
top:50%;
margin-top:-22px;
}
.round span:nth-child(2){
left:-22px;
top:50%;
margin-top:-22px;
}
.round span:nth-child(3){
left:50%;
bottom:-22px;
margin-left:-22px;
}
.round span:nth-child(4){
left:50%;
top:-22px;
margin-left:-22px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="round">
<span>东邪</span>
<span>西毒</span>
<span>南乞</span>
<span>北丐</span>
</div>
</div>
</body>
</html>
<html>
<head>
<title>万有引力星球转动</title>
<style type="text/css">
.wrapper{
width:100px;
height:100px;
background:lightblue;
border-radius:50%;
border:2px solid lightgreen;
position: absolute;
top:200px;
left:400px;
cursor:pointer;
}
.wrapper:after{
content:'你猜';
display:inline-block;
width:100px;
height:100px;
line-height:100px;
border-radius:50%;
text-align:center;
color:#fff;
font-size:24px;
}
.wrapper:hover .round{
-webkit-transform:scale(1);
opacity:1;
-webkit-animation:rotating 6s 1.2s linear infinite alternate;
}
@-webkit-keyframes rotating{
0%{
-webkit-transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(180deg);
}
}
.round{
width:240px;
height:240px;
border:2px solid lightgreen;
border-radius:50%;
position: absolute;
top:-70px;
left:-70px;
-webkit-transition:all 1s;
-webkit-transform:scale(0.35);
opacity:0;
}
.round span{
width:40px;
height:40px;
line-height:40px;
display:inline-block;
border-radius:50%;
background:lightblue;
border:2px solid lightgreen;
color:#fff;
text-align:center;
position:absolute;
}
.round span:nth-child(1){
right:-22px;
top:50%;
margin-top:-22px;
}
.round span:nth-child(2){
left:-22px;
top:50%;
margin-top:-22px;
}
.round span:nth-child(3){
left:50%;
bottom:-22px;
margin-left:-22px;
}
.round span:nth-child(4){
left:50%;
top:-22px;
margin-left:-22px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="round">
<span>东邪</span>
<span>西毒</span>
<span>南乞</span>
<span>北丐</span>
</div>
</div>
</body>
</html>
0 0
- 像星球运动
- 不知道有像地球一样美丽的星球
- isolib对像结合TweenLite的运动
- 【实例】小球运动,像皮筋那样
- 实现滑屏效果,就像弹簧 还有阻尼运动
- 34.像香蕉一样飞行的水果:抛掷运动
- 基于陀螺进行运动检测的电子稳像方案
- unity3d 经像模糊特效 适用于高速运动物体的运动模糊
- 电子星球
- B612星球
- [codeforces229B]星球
- 星球联盟
- 星球联盟
- 星球联盟
- 运动
- 运动
- 敏捷开发之三——像橄榄球运动一样scrum
- 星球学院(1)
- matlab 图片画直方图
- 图像处理:卷积模块FPGA 硬件加速
- 为VMWare下的CentOS配置网络连接(NAT模式)、克隆
- 浅谈CSS定义超链接<a>正确顺序L-V-H-A
- 4.22
- 像星球运动
- C语言中的EOF的浅识
- git am 部分发生冲突的处理
- 使用 casperjs 完成百度相关搜索
- vim中ctrl+z的问题解决方案
- Bomb
- EBS常用的几个网站
- Codeforces Round #410 (Div. 2) Mike and distribution 思维
- Mysql学习笔记三——特殊的NULL