CSS3 缩放背景动画 demo

用两个position FIXED的元素,一个做背景,再加上缩放动画特效,另一个做页面的容器,外加滚动条即可,也可以使用其他滚动条CSS库,如slimscroll.js等等,基本的架构能在IE8上正常显示。

演示: http://lljh.bid

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>

标签: none

添加新评论