WEB前端开发简单的音乐播放动画

Linux下的前端开发工具 前端开发切图软件 前端开发常用的软件下载

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8″>
    <meta name=”renderer” content=”webkit”>
    <meta name=”viewport” content=”initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0,width=device-width”>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
    <title>HTML5</title>
    <link rel=”stylesheet” href=”css/common.css” />
    <script type=”text/javascript” src=”js/jquery-2.1.4.min.js”></script>
</head>
<style>
    .main {
        width: 200px;
        height: 200px;
        margin: 40px auto;
        position: relative;
    }
    .pan,
    .gan,
    .yue1,
    .yue2,
    .yue3 {
        position: absolute;
    }
    .pan {
        width: 124px;
        height: 124px;
        background: url(images/盘.png) center no-repeat;
        top: 30px;
        left: 50px;
        -webkit-animation: change 2s infinite linear;
    }
    @-webkit-keyframes change {
        0% {
            -webkit-transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
        }
    }
    .gan {
        width: 61px;
        height: 74px;
        background: url(images/杆.png) center no-repeat;
        top: -30px;
        left: 125px;
        -webkit-transform: rotateZ(52deg);
        -webkit-animation: shake 2s forwards ease-in-out;
    }
    @-webkit-keyframes shake {
        40% {
            top: -5px;
            -webkit-transform: rotateZ(0);
        }
        60% {
            top: -5px;
            -webkit-transform: rotateZ(8deg);
        }
        100% {
            top: -5px;
            -webkit-transform: rotateZ(-8deg);
        }
    }
    .yue1 {
        width: 27px;
        height: 32px;
        background: url(images/乐奏1.png) center no-repeat;
        top: 0;
        left: 0px;
        -webkit-animation: moveit 1.5s infinite alternate ease-in-out;
    }
    .yue2 {
        width: 24px;
        height: 20px;
        background: url(images/乐奏2.png) center no-repeat;
        top: 15px;
        left: 30px;
        -webkit-animation: moveit 1s infinite alternate ease-in-out;
    }
    .yue3 {
        width: 10px;
        height: 23px;
        background: url(images/乐奏3.png) center no-repeat;
        top: 20px;
        left: 60px;
        -webkit-animation: moveit 1.8s infinite alternate ease-in-out;
    }
    @-webkit-keyframes moveit {
        0% {
            -webkit-transform: translateY(5px);
            opacity: 0;
        }
        100% {
            -webkit-transform: translateY(-5px);
            opacity: 1;
        }
    }
</style>
<body>
    <div class=”main”>
        <div class=”pan”></div>
        <div class=”gan”></div>
        <div class=”yue1″></div>
        <div class=”yue2″></div>
        <div class=”yue3″></div>
    </div>
</body>
</html>

web前端的开发工具 前端怎么混合开发工具 好的前端开发工具

» 本文来自:前端开发者 » 《WEB前端开发简单的音乐播放动画》
» 本文链接地址:https://www.rokub.com/5377.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!