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

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

代码语言：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%);
    	h.........完整代码请登录后点击上方下载按钮下载查看