css+js实现一个炫酷背景计算器代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：css+js实现一个炫酷背景计算器代码，背景是气泡上升动画效果。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body{
    	width: 100%;
    	height: 100vh;
    	margin: 0;
    	padding: 0;
    	background:  linear-gradient(125deg, #2c3e50, #2cae60, #2980b9, #e74c3c, #8e44ad);
    	animation: bgmoving 15s infinite;
    	background-size: 400%;
      font-family: ubuntu, supercell-magic;
    }
    @keyframes bgmoving{
    	0%{
    		background-position: 0% 50%;
    	}
    	50%{
    		background-position: 100% 50%;
    	}
    	100%{
    		background-position: 0% 50%;
    	}
    }
    .buttons{
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%,-50%);
    	margin-top: 40px;
    }
    .button{
    	width: 50px;
    	height: 50px;
    	border-radius: 50%;
    	font-size: 25px;
    	margin: 4px;
    	padding: 5px;
    	cursor: pointer;
    	background: rgba(0,0,0,0.4);
    	border: 2px solid white;
    	color: white;
    	font-family: supercell-magic;
        z-index: -1;
    }
    .button:hover{
        color: #333;
        transition: 0.2s;
    }
    .input-container{
    	top: 0;
    	left: 50%;
    	width: 100%;
    	overflow: hidden;
    	border-bottom: 3px solid white;
    }
    .textview{
      font-family: supercell-magic;
    	background: none;
    	width: 100%;
    	height: 100%;
    	margin-right: 10px;
    	font-size: 30px;
    	padding: 5px;
    	border: none;
    	outline: none;
    	animation: font_color 5s ease-in-out infinite;
    }
    @keyframes font_color{
    	0%{
    		color: #2980b9;
    	}
    	50%{
    		color: #8e44ad;
    	}
    	70%{
    		color: #e74c3c;
    	}
    	100%{
    		color: #2980b9;
    	}
    }
    .main{
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	border: 6px solid;
    	padding: 50px;
    	transform: translate(-50%,-50%);
    	height: 350px;
    	width: 230px;
    	background: rgba(0,0,0,0.6);
    	box-shadow: 0 15px 25px rgba(0,0,0,0.6);
    	animation: border_style 4s ease-in-out infinite;
    }
    @keyframes border_style{
    	0%{
    		border-color: #2980b9;
    	}
    	50%{
    		border-color: #2c3e50;
    	}
    	70%{
    		border-color: #e74c3c;
    	}
    	100%{
    		border-color: #2980b9;
    	}
    }
    
    
    
    .bubbles{
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	z-index: 0;
    	overflow: hidden;
    	top: 0;
    	left: 0;
    }
    .bubble{
    	position: absolute;
    	bottom: -100px;
    	border-radius: 50%;
    	background: #fff;
    	opacity: 0.5;
    	animation: flying 10s infinite ease-in;
    }
    .bubble:nth-child(1){
    	width: 40px;
    	height: 40px;
    	left: 10%;
    	animation-duration: 8s;
    }
    .bubble:nth-child(2){
    	width: 60px;
    	height: 60px;
    	right: 10%;
    	animation-duration: 10s;
    	animation-delay: 3s;
    }
    .bubble:nth-child(3){
    	width: 20px;
    	height: 20px;
    	left: 50%;
    	animation-duration: 7s;
    	animation-delay: 1s;
    }
    .bubble:nth-child(4){
    	width: 35px;
    	height: 35px;
    	left: 50%;
    	animation-duration: 9s;
    	animation-delay: 2s;
    }
    .bubble:nth-child(5){
    	width: 50px;
    	height: 50px;
    	left: 40%;
    	animation-duration: 10s;
    	animation-delay: 4s;
    }
    .bubble:nth-child(6){
    	width: 55px;
    	height: 55px;
    	left: 25%;
    	animation-duration: 5s;
    	animation-delay: 2s;
    }
    .bubble:nth-child(7){
    	width: 45px;
    	height: 45px;
    	left: 80%;
    	animation-duration: 12s;
    	animation-delay: 3s;
    }
    .bubble:nth-child(8){
    	width: 50px;
    	height: 50px;
    	left: 10%;
    	animation-duration: 8s;
    	animation-delay: 1s;
    }
    .bubble:nth-child(9){
    	width: 80px;
    	height: 80px;
    	left: 65%;
    	animation-duration: 8s;
    	animation-delay: 1s;
    }
    .bubble:nth-child(10){
    	width: 40px;
    	height: 40px;
    	left: 70%;
    	animation-duration: 8.5s;
    	animation-delay: 3s;
    }
    .bubble:nth-child(11){
    	width: 30px;
    	height: 30px;
    	left: 55%;
    	animation-duration: 6.5s;
    	animation-delay: 3s;
    }
    .bubble:nth-child(12){
    	width: 35px;
    	height: 35px;
    	left: 75%;
    	animation-duration: 5.5s;
    	animation-delay: 5s;
    }
    .bubble:nth-child(13){
    	width: 55px;
    	height: 55px;
    	left: 45%;
    	animation-duration: 9.5s;
    	animation-delay: 10s;
    }
    .bubble:nth-child(14){
    	width: 70px;
    	height: 70px;
    	left: 60%;
    	animation-duration: 6.9s;
    	animation-delay: 4.3s;
    }
    .bubble:nth-child(15){
    	width: 30px;
    	height: 30px;
    	left: 50%;
    	animation-duration: 8.5s;
    	animation-delay: 7s;
    }
    .bubble:nth-child(16){
    	width: 80px;
    	height: 80px;
    	left: 90%;
    	animation-duration: 8.5s;
    	animation-delay: 5s;
    }
    .bubble:nth-child(17){
    	width: 20px;
    	height: 20px;
    	left: 15%;
    	animation-duration: 4.5s;
    	animation-delay: 2s;
    }
    .bubble:nth-child(18){
    	width: 50px;
    	height: 50px;
    	left: 10%;
    	animation-duration: 5.5s;
    	animation-delay: 0s;
    }
    .bubble:nth-child(19){
    	width: 45px;
    	height: 45px;
    	left: 20%;
    	animation-duration: 7.5s;
    	animation-delay: 3s;
    }
    .bubble:nth-child(20){
    	width: 75px;
    	height: 75px;
    	left: 25%;
    	animation-duration: 9.5s;
    	animation-delay: 3s;
    }
    @keyframes flying{
    	0%{
    		bottom: -100px;
    		transform: translateX(0);
    	}
    	50%{
    		transform: translateX(100px);
    	}
    	100%{
    		bottom: 1400px;
    		transform: tr.........完整代码请登录后点击上方下载按钮下载查看