淡入动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
</head>
<style type="text/css">
.dataDialog {
position: absolute;
left: 750px;
bottom: 55px;
width: 1580px;
height: 470px;
-webkit-transform: translate(0,550px);
transform: translate(0,550px);
opacity: 0;
-webkit-transition: opacity .5s,-webkit-transform .5s;
transition: opacity .5s,-webkit-transform .5s;
transition: transform .5s,opacity .5s;
transition: transform .5s,opacity .5s,-webkit-transform .5s;
background-color: rgba(11,9,25,.9);
border: 2px solid #5698fd;
border-radius: 30px;
}
.dataDialog.show {
-webkit-transform: translate(0,0);
transform: translate(0,0);
opacity: 1;
}
.dataDialog:before {
content: '';
position: absolute;
top: -30px;
left: 18px;
width: 870px;
height: 60px;
background: url("../../static/img/light.png") no-repeat;
background-size: 100%;
}
.dataDialog .title {
font-size: 60px;
line-height: 2;
color: #fff;
text-align: center;
}
.dataDialog .dataMenu {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
padding: 0 90px;
}
.dataDialog a {
width: 334px;
height: 350px;
background: #fff url("../../static/img/btn_data.png") no-repeat;
background-size: 100%;
}
.dataDialog.show a {
-webkit-transform: translate(0,0) !important;
transform: translate(0,0) !important;
background: #fff !important;
}
.dataDialog a:nth-of-type(2) {
-webkit-transition: -webkit-transform .5s .5s;
transition: -webkit-transform .5s .5s;
transition: transform .5s .5s;
transition: transform .5s .5s, -webkit-transform .5s .5s;
-webkit-transform: translate(-360px,0);
transform: translate(-360px,0);
}
.dataDialog a:nth-of-type(3) {
-webkit-transition: -webkit-transform .5s .6s;
transition: -webkit-transform .5s .6s;
transition: transform .5s .6s;
transition: transform .5s .6s, -webkit-transform .5s .6s;
-webkit-transform: translate(-713px,0);
transform: translate(-713px,0);
}
.dataDialog a:nth-of-type(4) {
-webkit-transition: -webkit-transform .5s .7s;
transition: -webkit-transform .5s .7s;
transition: transform .5s .7s;
transition: transform .5s .7s, -webkit-transform .5s .7s;
-webkit-transform: translate(-1069px,0);
transform: translate(-1069px,0);
}
.dataDialog a.active {
background: url("../../static/img/btn_data_active.png") no-repeat;
}
</style>
<!-- <script type="text/javascript">
function getRandomNumber() {
return Math.floor(Math.random() * 255);
}
function getBrightness(r, b, g) {
// brightness calculation from http://alienryderflex.com/hsp.html
return Math.sqrt(
0.299 * (r * r) +
0.587 * (g * g) +
0.114 * (b * b)
);
}
setInterval(()=> {
const r = getRandomNumber(),
g = getRandomNumber(),
b = getRandomNumber(),
brightness = getBrightness(r,g,b);
document.documentElement.style.setProperty(`--r`, r);
document.documentElement.style.setProperty(`--g`, g);
document.documentElement.style.setProperty(`--b`, b);
let bgColor;
if (brightness > 40) {
bgColor = '#121212';
} else {
bgColor = '#BDBCBF';
}
document.documentElement.style.setProperty(`--bg`, bgColor);
}, 2000);
</script> -->
<body>
<div class="dataDialog show"><p class="title">睡眠数据</p><div class="dataMenu"><a href="#/sleepReport/1" class="active"><p class="name">夜猫子型</p><p class="desc"><!-- react-text: 150 -->模拟1·<!-- /react-text --><span class="week">周</span></p></a><a href="#/sleepReport/2"><p class="name">夜猫子型</p><p class="desc"><!-- react-text: 155 -->模拟2·<!-- /react-text --><span class="week">周</span></p></a><a href="#/sleepReport/3"><p class="name">夜猫子型</p><p class="desc"><!-- react-text: 160 -->模拟3·<!-- /react-text --><span class="week">周</span></p></a><a href="#/sleepReport/4"><p class="name">夜猫子型</p><p class="desc"><!-- react-text: 165 -->模拟4·<!-- /react-text --><span class="month">月</span></p></a></div></div>
</body>
</html>
来源：https://www.cnblogs.com/Aladingding/p/7445347.html