[响应式Web开发项目教程] 摇晃的桃子（带素材图版）

最新推荐文章于 2024-01-16 22:12:53 发布

puppyzho

最新推荐文章于 2024-01-16 22:12:53 发布

阅读量2.1k

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_65989375/article/details/128052946

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    p{
        font-family:"微软雅黑";
        font-size: 40px;
        position: absolute;
        top: -100px;
        left: 0px;
    }
    .act_wrapper {
        position:relative;
        z-index:1;
        min-width:1000px;/*元素最小宽度1000px*/
        margin: 0 auto;
        overflow:hidden;
    }
    .act_wrapper .act_bg {
        position:absolute;
        left:50%;
        top:0;
        z-index:1;
        width:1920px;
        margin-left:-1350px;
    }
    .act_wrapper .act_content {
        position:relative;
        z-index:2;
        width:1000px;
        height:1200px;
        margin: 0 auto;
        margin-top:-569px
    }
    .act_bg {
        background:url(image/摇晃的桃子背景图.jpeg) 100% 0 no-repeat;
        height:750px
    }
    .mod_style {
        position:absolute;
        top:716px;
        left:200px;
        width:870px;
        height:560px
    }
    .peach {
        position:absolute;
        top:0;
        left:0;
        width:90px;
        height:100px;
        display:block;
        background:url(image/桃子.png)no-repeat 0 0;/*设置背景图片为精灵图片*/
    }
    .peach1 {
        background-position:0 0;
        top:100px;
        left:72px
    }
    .peach2 {
        background-position:0 -115px;
        top:39px;
        left:242px
    }
    .peach3 {
        background-position:0 -215px;
        top:71px;
        left:452px
    }
    .peach4 {
        background-position:0 -328px;
        top:156px;
        left:261px
    }
    .peach5 {
        background-position:0 -435px;
        top:256px;
        left:412px
    }
    .peach6 {
        background-position:0 -545px;
        top:247px;
        left:575px
    }
    
    .shake1 {
        -webkit-animation-duration:2.5s;
    }
    .shake2,.shake6 {
        -webkit-animation-duration:3.5s;
    }
    .shake3 {
        -webkit-animation-duration:1.5s;
    }
    .shake4 {
        -webkit-animation-duration:4s;
    }
    .shake5 {
        -webkit-animation-duration:3s;
    }
    .shake1,.shake2,.shake3,.shake4,.shake5,.shake6 {
        -webkit-animation-iteration-count:infinite;/*动画被播放的次数：无限次播放*/
        -webkit-animation-name:shake;/*动画名称：摇晃*/
        -webkit-animation-timing-function:ease-in-out;/*动画的速度曲线：以低速开始和结束*/
    }
    @-webkit-keyframes shake{
        0% {
            -webkit-transform:rotate(2deg);
            -webkit-transform-origin:50% 0;
        }
        20% {
            -webkit-transform:rotate(10deg);
            -webkit-transform-origin:50% 0;
        }
        40% {
            -webkit-transform:rotate(0deg);
            -webkit-transform-origin:50% 0;
        }
        60% {
            -webkit-transform:rotate(-2deg);
            -webkit-transform-origin:50% 0;
        }
        80% {
            -webkit-transform:rotate(-10deg);
            -webkit-transform-origin:50% 0;
        }
        100% {
            -webkit-transform:rotate(0deg);
            -webkit-transform-origin:50% 0;
        }
     }
     </style>
</head>
<body>
    <div class="act_wrapper">
        <div class="act_content">
            <div class="mod_style">
                <p><center></center></p><p>摇晃的桃子</p>
                <span class="peach peach1 shake1" ></span>
                <span class="peach peach2 shake2" ></span>
                <span class="peach peach3 shake3" ></span>
                <span class="peach peach4 shake4" ></span>
                <span class="peach peach5 shake5" ></span>
                <span class="peach peach6 shake6" ></span>
            </div>
        </div>
        <div class="act_bg"></div>
    </div>
</body>
</html>