验证中...
8月18日(周六)成都源创会火热报名中,四位一线行业大牛与你面对面,探讨区块链技术热潮下的冷思考。
片段 1 片段 2
弹力球
原始数据 复制代码
<!doctype html><!-- doctype声明文本类型 符合W3c统一的标准规范 -->
<html lang="en"><!--html超文本标记语言-->
<head><!--非可视化标签,供浏览器识别运用-->
<meta charset="UTF-8"><!--meta标签优化,charset编码字符编码,utf8万国码-->
<meta name="Generator" content="EditPlus®"><!--Genertaor生产工具,content目录-->
<meta name="Author" content="">
<!--声明网站三要素:关键字,网页描述和标题-->
<meta name="Keywords" content=""><!--Keywords为网页关键字,引入属性-->
<meta name="Description" content=""><!--Description为网页描述-->
<title>弹力球</title><!--title为当前网页的标题-->
<style>
*{
margin:0px;
padding:0px;
}
body{
background-color: #393B39;
}
.wrap{
border:1px solid transparent;
border-radius:50%;
}
.content{
position:relative;
top:300px;
width:500px;
height:200px;
margin:55px auto;
}
.content .box{
position:relative;
top:0px;
left:90px;
width:90px;
height:170px;
float:left;
margin-right:30px;
}
.content .box .ball{
position:absolute;
top:0px;
left:30px;
width:35px;
height:35px;
margin:0px auto;
border-radius:50%;
z-index:1;
}
.content .box .ball-left{
background: radial-gradient(rgb(231, 244, 0),rgb(38, 231, 133));
animation:ball-left;
animation-duration:1s;
animation-iteration-count:infinite;
}
.content .box .ball-center{
background: radial-gradient(rgb(255, 187, 41) 5px,rgb(255, 78, 42) 20px);
animation:ball-center;
animation-duration:1s;
animation-iteration-count:infinite;
animation-delay:0.3s;
}
.content .box .ball-right{
background: linear-gradient(rgb(242, 129, 156) 5px,rgb(34, 143, 212) );
box-shadow:0px 2px 10px 0px rgb(123, 141, 231);
animation:ball-right;
animation-duration:1s;
animation-delay:0.08s;
animation-iteration-count:infinite;
}
@keyframes ball-left{
0%{top:10px}
10%{top:20px}
30%{top:5px}
50%{top:20px}
60%{top:30px}
70%{top:60px}
75%{top:65px}
80%{top:70px}
100%{top:100px;box-shadow:0px 1px 30px 0px #cdcdcd}
}
@keyframes ball-center{
0%{top:10px}
10%{top:20px}
30%{top:5px}
50%{top:20px}
60%{top:30px}
70%{top:60px}
75%{top:65px}
80%{top:70px}
100%{top:100px}
}
@keyframes ball-right{
0%{top:10px}
10%{top:20px}
30%{top:5px}
50%{top:20px}
60%{top:30px}
70%{top:65px}
100%{top:100px}
}
.content .box .shadow{
position:absolute;
top:80px;
left:20px;
width:55px;
height:25px;
margin:58px auto;
border-radius:50%;
animation:shadow;
animation-duration:1s;
animation-iteration-count:infinite;
}
@keyframes shadow{
0%{background-color: rgba(209, 209, 209,0.3)}
50%{background-color: rgba(209, 209, 209,0.2)}
100%{background-color: rgba(209, 209, 209,0.1);transform:scale(1.1)}
}
</style>
</head>
<body>
<div class="wrap">
<div class="content">
<div class="box">
<div class="ball ball-left">
</div>
<div class="shadow">
</div>
</div>
<div class="box">
<div class="ball ball-center">
</div>
<div class="shadow">
</div>
</div>
<div class="box">
<div class="ball ball-right">
</div>
<div class="shadow">
</div>
</div>
</div>
</div>
</body>
</html>
弹力球.html
原始数据 复制代码
<!doctype html><!-- doctype声明文本类型 符合W3c统一的标准规范 -->
<html lang="en"><!--html超文本标记语言-->
<head><!--非可视化标签,供浏览器识别运用-->
<meta charset="UTF-8"><!--meta标签优化,charset编码字符编码,utf8万国码-->
<meta name="Generator" content="EditPlus®"><!--Genertaor生产工具,content目录-->
<meta name="Author" content="">
<!--声明网站三要素:关键字,网页描述和标题-->
<meta name="Keywords" content=""><!--Keywords为网页关键字,引入属性-->
<meta name="Description" content=""><!--Description为网页描述-->
<title>弹力球</title><!--title为当前网页的标题-->
<style>
*{
margin:0px;
padding:0px;
}
body{
background-color: #393B39;
}
.wrap{
border:1px solid transparent;
border-radius:50%;
}
.content{
position:relative;
top:300px;
width:500px;
height:200px;
margin:55px auto;
}
.content .box{
position:relative;
top:0px;
left:90px;
width:90px;
height:170px;
float:left;
margin-right:30px;
}
.content .box .ball{
position:absolute;
top:0px;
left:30px;
width:35px;
height:35px;
margin:0px auto;
border-radius:50%;
z-index:1;
}
.content .box .ball-left{
background: radial-gradient(rgb(231, 244, 0),rgb(38, 231, 133));
animation:ball-left;
animation-duration:1s;
animation-iteration-count:infinite;
}
.content .box .ball-center{
background: radial-gradient(rgb(255, 187, 41) 5px,rgb(255, 78, 42) 20px);
animation:ball-center;
animation-duration:1s;
animation-iteration-count:infinite;
animation-delay:0.3s;
}
.content .box .ball-right{
background: linear-gradient(rgb(242, 129, 156) 5px,rgb(34, 143, 212) );
box-shadow:0px 2px 10px 0px rgb(123, 141, 231);
animation:ball-right;
animation-duration:1s;
animation-delay:0.08s;
animation-iteration-count:infinite;
}
@keyframes ball-left{
0%{top:10px}
10%{top:20px}
30%{top:5px}
50%{top:20px}
60%{top:30px}
70%{top:60px}
75%{top:65px}
80%{top:70px}
100%{top:100px;box-shadow:0px 1px 30px 0px #cdcdcd}
}
@keyframes ball-center{
0%{top:10px}
10%{top:20px}
30%{top:5px}
50%{top:20px}
60%{top:30px}
70%{top:60px}
75%{top:65px}
80%{top:70px}
100%{top:100px}
}
@keyframes ball-right{
0%{top:10px}
10%{top:20px}
30%{top:5px}
50%{top:20px}
60%{top:30px}
70%{top:65px}
100%{top:100px}
}
.content .box .shadow{
position:absolute;
top:80px;
left:20px;
width:55px;
height:25px;
margin:58px auto;
border-radius:50%;
animation:shadow;
animation-duration:1s;
animation-iteration-count:infinite;
}
@keyframes shadow{
0%{background-color: rgba(209, 209, 209,0.3)}
50%{background-color: rgba(209, 209, 209,0.2)}
100%{background-color: rgba(209, 209, 209,0.1);transform:scale(1.1)}
}
</style>
</head>
<body>
<div class="wrap">
<div class="content">
<div class="box">
<div class="ball ball-left">
</div>
<div class="shadow">
</div>
</div>
<div class="box">
<div class="ball ball-center">
</div>
<div class="shadow">
</div>
</div>
<div class="box">
<div class="ball ball-right">
</div>
<div class="shadow">
</div>
</div>
</div>
</div>
</body>
</html>

评论列表( 0 )

你可以在登录后,发表评论