CSS3 缩放背景动画 demo
评论 0 热度 517
用两个position FIXED的元素，一个做背景，再加上缩放动画特效，另一个做页面的容器，外加滚动条即可，也可以使用其他滚动条CSS库，如slimscroll.js等等，基本的架构能在IE8上正常显示。
css部分：
*{margin: 0;padding: 0;box-sizing: border-box;-webkit-box-sizing: border-box;}
html{
font-weight: 100;
background-color: #323232;
color: white;
}
.bg{
width: 100%;
height: 100%;
animation: fbg 15s infinite;
-webkit-animation: fbg 15s infinite;
background-image: url(https://i.loli.net/2018/07/09/5b42e1ec3e49f.jpg);
background-repeat: no-repeat;
background-position: right;
background-size: cover;
position: fixed;
top: 0;
}
.bd{
position: fixed;
top: 0;
z-index: 99;
height: 100%;
width: 100%;
box-shadow: 0 0 50px black inset;
}
.b{
font-size: 35px;
display: block;
white-space: normal;
word-break: break-all;
word-wrap: break-word;
overflow-y: scroll;
height: 100%;
padding: 35px;
}
@keyframes fbg{
0%{-webkit-transform: scale(1.1);transform: scale(1.1);}
50%{-webkit-transform: scale(1);transform: scale(1);}
100%{-webkit-transform: scale(1.1);transform: scale(1.1);}
}
@-webkit-keyframes fbg{
0%{-webkit-transform: scale(1.1);transform: scale(1.1);}
50%{-webkit-transform: scale(1);transform: scale(1);}
100%{-webkit-transform: scale(1.1);transform: scale(1.1);}
}html部分：
<!DOCTYPE html>
<html id="html">
<head>
<meta charset="UTF-8">
<title>CSS3 缩放背景 附滚动条</title>
</head>
<body>
<div class="bg"></div>
<div class="bd">
<div class="b">
<p><script type="text/javascript">
for (var i = 0; i < 2000; i++) {
document.write(2333);
}
</script></p>
</div>
</div>
</body>
</html>