摇晃的桃子

最新推荐文章于 2022-11-26 16:01:25 发布

叫我小袁就好

最新推荐文章于 2022-11-26 16:01:25 发布

阅读量4.2k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_42788101/article/details/89683003

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摇晃的桃子</title>
    <style>
        p{
            font-family: "微软雅黑";
            font-size: 40px;
            position: absolute;
            top: -100px;
            left: 0px;
        }
        .act_wrapper{
            position: relative;
            z-index: 1;
            min-width: 1000px;
            margin: 0 auto;
            overflow: hidden;
        }
        .act_wrapper .act_bg{
            position: absolute;
            left: 50%;
            top: 0;
            z-index: 1;
            width: 1920px;
            margin-left: -600px;
        }
        .act_wrapper .act_content{
            position: relative;
            z-index: 2;
            width: 1000px;
            height: 1200px;
            margin: 0 auto;
            margin-top: -569px;
        }

        .act_bg{
            background:url("../img/bg.jpg");
            height: 750px;
        }
        .mod_style{
            position: absolute;
            top: 716px;
            left: 200px;
            width: 870px;
            height: 560px;
        }
        .peach{
            position: absolute;
            top: 0px;
            left: 0;
            width: 90px;
            height: 100px;
            display: block;
            background: url("../img/peach.png") no-repeat 0 0;
        }
        .peach1{
            background-position: 0 0;
            top: 130px;
            left: 72px;
        }
        .peach2{
            background-position: 0 0;
            top: 35px;
            left: 200px;
        }
        .peach3{
            background-position: 0 0;
            top: 71px;
            left: 452px;
        }
        .peach4{
            background-position: 0 0;
            top: 140px;
            left: 261px;
        }
        .peach5{
            background-position: 0 0;
            top: 256px;
            left: 412px;
        }

        .shake1{
            -webkit-animation-duration: 2.5s;
        }
        .shake2{
            -moz-animation-duration: 3.5s;
        }
        .shake3{
            -webkit-animation-duration: 1.5s;
        }
        .shake4{
            -webkit-animation-duration: 4.5s;
        }
        .shake5{
            -webkit-animation-duration: 3s;
        }

        .shake1,.shake2,.shake3,.shake4,.shake5{
            -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;
            }
            25%{
                -webkit-transform: rotate(10deg);
                -webkit-transform-origin: 50% 0;
            }
            50%{
                -moz-transform: rotate(0deg);
                -moz-transform-origin: 50% 0;
            }
            100%{
                -moz-transform: rotate(-10deg);
                -moz-transform-origin: 50% 0;
            }
        }

    </style>
</head>
<body>
<div class="act_wrapper">
    <div class="act_content">
        <div class="mod_style">
            <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>
        </div>
    </div>
    <div class="act_bg"></div>
</div>
</body>
</html>

袁同学——2019年4月29日