原

css实现动画效果案列:冒泡案列

7060人阅读 2019/6/6 19:30 总访问：118139 评论：0 收藏：0 手机

分类: 初吻给了奶嘴

css实现动画效果案列:冒泡案列

效果图:

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body,html {
				width: 100%;
				height: 100px;
				background-color: #9b59b6;
				margin: 0;
				padding: 0;
			}
			
			.bubbels {
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 0;
				overflow: hidden;
				top: 0;
				left: 0;
			}
			.bubble {
				position: absolute;
				bottom: 0;
				width: 40px;
				height: 40px;
				background: #f1f1f1;
				border-radius: 50%;
				opacity: 0.1;
				animation:  flying 10s infinite ease-in;
			}
			
			.bubble:nth-child(1){
				width: 40px;
				height: 40px;
				left: 0%;
				animation-direction: 8s;
			}
			.bubble:nth-child(2){
				width: 20px;
				height: 20px;
				left: 20%;
				animation-direction: 10s;
				animation-delay: 2s;
			}
			.bubble:nth-child(3){
				width: 50px;
				height: 50px;
				left: 35%;
				animation-direction: 10s;
				animation-delay: 2s;
			}
			
			.bubble:nth-child(4){
				width: 80px;
				height: 80px;
				left: 50%;
				animation-direction: 7s;
				animation-delay: 0s;
			}
			
			.bubble:nth-child(5){
				width: 80px;
				height: 80px;
				left: 15%;
				animation-direction: 7s;
				animation-delay: 0s;
			}.bubble:nth-child(6){
				width: 60px;
				height: 60px;
				left: 35%;
				animation-direction: 6s;
				animation-delay: 2s;
			}.bubble:nth-child(7){
				width: 60px;
				height: 60px;
				left: 70%;
				animation-direction: 6s;
				animation-delay: 3s;
			}
			.bubble:nth-child(8){
				width: 5px;
				height: 5px;
				left: 25%;
				animation-direction: 4s;
				animation-delay: 0.25;
			}
			.bubble:nth-child(9){
				width: 70px;
				height: 70px;
				left: 80%;
				/*动画效果和持续的时间*/
				animation-direction: 12s;
				animation-delay: 4s;
			}
			.bubble:nth-child(10){
				width: 12px;
				height: 12px;
				left: 2%;
				animation-direction: 4s;
				animation-delay: 1s;
			}
			@keyframes flying{
				0%{
					bottom: -100px;
					transform: translateX(0);
				}
				
				50%{
					transform: translateX(100px);
				}
				
				100%{
					bottom: 1000px;
					transform: translateX(-200px);
				}
			}
		</style>
	</head>
	<body>
		<div class="bubbels">
			<div class="bubble"></div>
			<div class="bubble"></div>
			<div class="bubble"></div>
			<div class="bubble"></div>
			<div class="bubble"></div>
			<div class="bubble"></div>
			<div class="bubble"></div>
			<div class="bubble"></div>
			<div class="bubble"></div>
			<div class="bubble"></div>
		</div>
	</body>
</html>