HTML前端网页制作之帧动画

最新推荐文章于 2024-05-13 14:34:46 发布

Playful_Elbow

最新推荐文章于 2024-05-13 14:34:46 发布

阅读量844

点赞数 1

文章标签： html5 javascript

本文链接：https://blog.csdn.net/Playful_Elbow/article/details/124226825

版权

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
        *,body{
            padding: 0;
            margin:0;
        }
        .main{
            width: 600px;
            height: 400px;
            position:relative;
            background-image: url('res/htmlLX/bg06.jpg');
            background-size: cover;
        }
       #img{
           background-image: url('res/htmlLX/map.png');
           position:absolute;
           background-size: cover;
           left: -300px;
           top:50px;
           width:300px;
           height:300px;
       }
       .title{
           width:100%;
           text-align:center;
           padding-top:20px;
           letter-spacing:10px;
       }
       .main-p{
           width:100%;
           text-align:center;
       }
       .content{
           width: 270px;
           height:200px;
           position:absolute;
           left:320px;
           top:100px;
       }
       .title-cont{
           width: 90%;
           height:40px;
           line-height: 40px;
           border-bottom:1px solid #CD3333;
           color:#CD3333;
           padding-left:10px;
       }
       .content p{
           line-height: 28px;
           font-size: 14px;
           padding-left:10px;
       }
    </style>
</head>

<body>
    <div class="main">
        <h2 class="title">联系我们 </h2>
        <p class="main-p">CONTACT US</p>
        <div id="img"></div>
        <div class="content">
            <h4 class="title-cont">北京某某酒业有限公司</h4>
            <p>联系电话：400-xxx-1080</p>
            <p>Email： kefu@xxxx.com</p>
            <p>商务合作：marketing@xxxx.com</p>
            <p>网站地址：http://www.xxxx.com</p>
        </div>
    </div>

   <script type="text/javascript">
        window.onload = move;
        var left = -300;//inner的左边距
        var raf;
        function move(){
       document.getElementById("img").style.left=left+"px";
       left +=5;

       raf= window.requestAnimationFrame(move);
         if(left == 0){
            window.cancelAnimationFrame(raf);
       }
        }

   </script>
</body>

</html>

Playful_Elbow

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML前端网页制作之帧动画

<!DOCTYPE html><html> <head> <title></title> <meta charset="utf-8" /> <style type="text/css"> *,body{ padding: 0; margin:0; } .main{ w...
复制链接

扫一扫