CSS3实现球的自由落体

最新推荐文章于 2021-07-28 11:46:14 发布

霜月枫桥

最新推荐文章于 2021-07-28 11:46:14 发布

阅读量1.7k

点赞数

分类专栏： Web前台demo小记

本文链接：https://blog.csdn.net/MOONCOM/article/details/68944721

版权

Web前台demo小记专栏收录该内容

22 篇文章 2 订阅

订阅专栏

代码如下所示：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>HTML5+CSS3练习</title>
	<script src="jquery-1.8.3.min.js"></script>
</head>
<body>
	<fieldset style="height:550px;">
		<legend>自由落体</legend>
		北京时间：<span class="time"></span>
		<figure class="circle"></figure>
		<figure class="shadow"></figure>
		<style>
		  @keyframes circle{
		  	0%,100%{
		  		margin-top:20px;
		  	}
		  	2%{
		  		margin-top:20px;
		  	}
		  	98%{
		  		margin-top:20px;
		  	}
		  	48%{
		  		margin-top: 300px;
		  	}
		  	52%{
		  		margin-top: 300px;
		  	}
		  }

		  .circle{
          	height:200px;
          	width:200px;
          	margin:20px auto 0px;
          	border-radius: 50%;
          	position: relative;
          	z-index: 10;
          	background-image: radial-gradient(circle at 70px 80px,#39c,#000);
          	animation:circle 2s ease-in infinite alternate;
          }

		  @keyframes shadow{
		  	0%,100%{
		  		height: 50px;
		  		width: 50px;
		  		margin-left: -25px;
		  		margin-top: 40px;
		  		background-color:rgba(0,0,0,0.5);
		  	}
		  	2%{
		  		height: 50px;
		  		width: 50px;
		  		margin-left: -25px;
		  		margin-top: 40px;
		  		background-color:rgba(0,0,0,0.5);
		  	}
		  	98%{
		  		height: 50px;
		  		width: 50px;
		  		margin-left: -25px;
		  		margin-top: 40px;
		  		background-color:rgba(0,0,0,0.5);
		  	}
		  	48%{
		  		height: 170px;
		  		width: 170px;
		  		margin-left: -85px;
		  		margin-top: -10px;
		  		background-color: rgba(0,0,0,0.8);
		  	}
		  	52%{
		  		height: 170px;
		  		width: 170px;
		  		margin-left: -85px;
		  		margin-top: -10px;
		  		background-color: rgba(0,0,0,0.8);
		  	}
		  }
          
          .shadow{
          	transform-style:preserve-3d;
          	transform:rotate3d(1,0,0,80deg);
          	animation:shadow 2s ease-in infinite alternate;
            border-radius: 50%;
            position: absolute;
            top: 470px;
            left: 50%;
          }
		</style>
		<script>
        $(function(){
        	time();
        	window.setInterval(time,1000);

        });        
        var time=function(){
        	var date=new Date();
        	$(".time").text(date.toLocaleString());
        }
		</script>
	</fieldset>
	
</body>
</html>

实现效果如下所示：

霜月枫桥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3实现球的自由落体

代码如下所示： HTML5+CSS3练习自由落体北京时间： @keyframes circle{ 0%,100%{ margin-top:20px; } 2%{ margin-top:20px; } 98%{ margin-top:20px;
复制链接

扫一扫