css3動畫應用-音樂唱片旋轉播放特效

時間  2019-11-19
標籤 css3 css 動畫 應用 音樂 唱片 旋轉 播放 特效 欄目 CSS 简体版
原文   原文鏈接

css3動畫應用-音樂唱片旋轉播放特效

核心點：

　　一、設置圖片爲圓形居中，使圖片一直不停旋轉。javascript

　　二、文字標題（潘瑋柏--反轉地球）一直從左到右不停循環移動。css

　　三、點擊圖標，音樂暫停，圖片中止旋轉；點擊圖片，音樂播放，圖片開始旋轉。html

一、動設置圖片爲圓形居中，使圖片一直不停旋轉。

核心代碼：java

#xuanzhuan{
    -webkit-animation: play 10s linear infinite;
       -moz-animation: play 10s linear infinite;
            animation: play 10s linear infinite;
}
@-webkit-keyframes play{
    0%{-webkit-transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
@-moz-keyframes play {
    0%{-moz-transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
@keyframes play{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

二、文字標題（潘瑋柏--反轉地球）一直從左到右不停循環移動。

核心代碼：css3

.title p{
    position: relative;
    top: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    text-align: center;
    -webkit-animation: anim2 8s linear infinite;
}
@-webkit-keyframes anim2 {
    0% { left: 200px; opacity: 0.2}
    25% { left: 100px; opacity: 0.6}
    50% { left: 0px; opacity: 1}
    75% { left: -100px; opacity: 0.6}
    100% { left: -200px; opacity: 0.2}
}

三、點擊圖標，音樂暫停，圖片中止旋轉；點擊圖片，音樂播放，圖片開始旋轉。

核心代碼：web

     //當音樂播放完中止時，自動中止圖片旋轉
    audio.addEventListener("ended",function(event){
        //xuanzhuan.setAttribute("id","");
        xuanzhuan.style.animationPlayState = "paused";
    },false);
    //點擊暫停播放時，音樂暫停，圖片中止旋轉
    icon1.onclick=function(){
        audio.pause();
        pic1.style.display="none";
        pic2.style.display = "block";
        //xuanzhuan.setAttribute("id","");
        xuanzhuan.style.animationPlayState = "paused";
    };
    //點擊播放音樂時，音樂開始播放，圖片開始旋轉
    icon2.onclick=function(){
        audio.play();
        pic1.style.display="block";
        pic2.style.display = "none";
        //xuanzhuan.setAttribute("id","xuanzhuan");
        xuanzhuan.style.animationPlayState = "running";
    }

實例：ide

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>rotate音樂唱片旋轉特效</title>
    <link rel="stylesheet" href="./newStyle.css">
    <script type="text/javascript" src="./myjs.js"></script>
</head>
<body>
    <div class="box">
        <div class="title">
            <p>潘瑋柏--反轉地球</p>
        </div>
        <img class="play" id="xuanzhuan" src="./feel.jpg" alt="旋轉特效">
        <div class="big"></div>
        <div class="middle"></div>
        <div class="small">
            <div id="pic1">
                <img id="icon1" src="./play.jpg" alt="play">
            </div>
            <div id="pic2">
                <img id="icon2" src="./play.jpg" alt="play">
            </div>
        </div>
        <audio autoplay="true"  loop="loop">
            <source src="./潘瑋柏-反轉地球.mp3" type="audio/mpeg">
        </audio>
        <div class="content">
            <p>反轉地球</p>
            <p>演唱：潘瑋柏</p>

            <p>Bow bow bow</p>
            <p>讓我看到你雙手</p>
            <p>對抗地心引力一塊兒反轉地球</p>
            <p>Bow bow bow</p>
            <p>如今不適合羅嗦</p>
            <p> 適者生存否則請你離開這節奏</p>
            <p> Bow bow bow</p>
            <p> 讓我看到你點頭</p>
            <p> 跟着個人音樂一塊兒跳舞準沒錯</p>
            <p> Bow bow bow</p>
            <p> 如今不適合閃躲</p>
            <p> 正面出擊看我怎麼反轉地球</p>
            <p> 睜開雙眼看穿地球</p>
            <p> 赤裸的一片天空</p>
            <p> 我攤開雙手接受全部最原始的節奏</p>
            <p> 有沒有感到心情放鬆</p>
            <p> 有沒有感到細胞跳動</p>
            <p> 節奏的變化,身體的擺動</p>
            <p> 讓你全身放鬆</p>
            <p> 如今起不能羅嗦</p>
            <p> 踏進個人領域之中</p>
            <p> 頻率太震撼</p>
            <p> 你的心臟正在此起彼落</p>
            <p> 跟着我走跟着我作跟我點頭擺動雙手</p>
            <p> 世界的一切的轉動連結到個人音樂緊跟着個人腳步在走</p>
            <p> 讓世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN</p>
            <p> 別想壓抑咱們定意世界的傳統</p>
            <p> 讓世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN</p>
            <p> 沒有對或錯我只想潛入這節奏</p>
            <p> 讓世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN</p>
            <p> 音樂沒有自由彷彿墜進了黑洞</p>
            <p> 讓世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN</p>
            <p> 如今跟着咱們創造新世紀的秩序</p>
            <p> Bow bow bow</p>
            <p> 讓我看到你雙手</p>
            <p> 對抗地心引力一塊兒反轉地球</p>
            <p> Bow bow bow</p>
            <p> 如今不適合羅嗦</p>
            <p> 適者生存否則請你離開這節奏</p>
            <p> Bow bow bow</p>
            <p> 讓我看到你點頭</p>
            <p> 跟着個人音樂一塊兒跳舞準沒錯</p>
            <p> Bow bow bow</p>
            <p> 如今不適合閃躲</p>
            <p> 正面出擊看我怎麼反轉地球</p>

            <p> 一道音波劃破天空</p>
            <p> 在個人領域不停播送</p>
            <p> 激發出的熱情不能抵擋你豎起的耳朵的誘惑</p>
            <p> 你停不停你動不動所有在我掌控之中</p>
            <p> 你知不知道地心引力在這永遠拉不住我</p>
            <p> 當音樂力量合二爲一創造出新的世界秩序</p>
            <p> 不跟隨的人閉上你的....SHHH</p>
            <p> 有別的比那更好的嗎</p>
            <p> 有別的比那更出色嗎</p>
            <p> 有別的比咱們嚮往追求的音樂更獨特的嗎</p>
            <p> 讓世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN</p>
            <p> 別想壓抑咱們定意世界的傳統</p>
            <p> 讓世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN</p>
            <p> 沒有對或錯我只想潛入這節奏</p>
            <p> 讓世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN</p>
            <p> 音樂沒有自由彷彿墜進了黑洞</p>
            <p> 讓世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN</p>
            <p> 如今跟着咱們創造新世紀的秩序</p>
            <p> Bow bow bow</p>
            <p> 讓我看到你雙手</p>
            <p> 對抗地心引力一塊兒反轉地球</p>
            <p> Bow bow bow</p>
            <p> 如今不適合羅嗦</p>
            <p> 適者生存否則請你離開這節奏</p>
            <p> Bow bow bow</p>
            <p> 讓我看到你點頭</p>
            <p> 跟着個人音樂一塊兒跳舞準沒錯</p>
            <p> Bow bow bow</p>
            <p> 如今不適合閃躲</p>
            <p> 正面出擊看我怎麼反轉地球</p>
            <p> Bow bow bow</p>
            <p> 讓我看到你雙手</p>
            <p> 對抗地心引力一塊兒反轉地球</p>
            <p> Bow bow bow</p>
            <p> 如今不適合羅嗦</p>
            <p> 適者生存否則請你離開這節奏</p>
            <p> Bow bow bow</p>
            <p> 讓我看到你點頭</p>
            <p> 跟着個人音樂一塊兒跳舞準沒錯</p>
            <p> Bow bow bow</p>
            <p> 如今不適合閃躲</p>
            <p> 正面出擊看我怎麼反轉地球</p>
        </div>
    </div>
</body>
</html>
html Code 
*{
    margin: 0px;
    padding: 0px;
    font-family: "微軟雅黑";
    font-size: 14px;
}
body{
    background-color: black;
}
.box{
    width: 340px;
    height: 600px;
    position: relative;
    top: 30px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: 0 auto;
    border-radius: 10px;
    background-color: #4372ca;
    /*opacity: 0.6;*/
}
.play{
    width: 280px;
    height: 280px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    top: 80px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: 0 auto;
    box-shadow: 0 0 5px 2px #000;
}
#xuanzhuan{
    -webkit-animation: play 10s linear infinite;
       -moz-animation: play 10s linear infinite;
            animation: play 10s linear infinite;
}
@-webkit-keyframes play{
    0%{-webkit-transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
@-moz-keyframes play {
    0%{-moz-transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
@keyframes play{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
.big{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: absolute;
    top: 32%;
    left: 0px;
    right: 0px;
    margin: auto;
    background-color: black;
    z-index: 2;
}
.middle{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: 197px;
    left: 0px;
    right: 0px;
    margin: auto;
    background-color: white;
    z-index: 3;
}
.small{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    top: 202px;
    left: 0px;
    right: 0px;
    margin: auto;
    background-color: black;
    z-index: 4;
    overflow: hidden;
    box-shadow: 0 0 3px 3px #000000;
}
.title{
    width: 60%;
    height: 5%;
    position: absolute;
    /*border: 1px solid red;*/
    top: 3%;
    left: 0px;
    right: 0px;
    margin: auto;
    text-align: center;
    line-height: 30px;
    overflow: hidden;
}
.title p{
    position: relative;
    top: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    text-align: center;
    -webkit-animation: anim2 8s linear infinite;
}
@-webkit-keyframes anim2 {
    0% { left: 200px; opacity: 0.2}
    25% { left: 100px; opacity: 0.6}
    50% { left: 0px; opacity: 1}
    75% { left: -100px; opacity: 0.6}
    100% { left: -200px; opacity: 0.2}
}
.content{
    width: 80%;
    height: 33%;
    position: absolute;
    /*border: 1px solid red;*/
    top: 65%;
    left: 0px;
    right: 0px;
    margin: auto;
    text-align: center;
    line-height: 30px;
    overflow: hidden;
}
.content p{
    position: relative;
    top: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    text-align: center;
    -webkit-animation: anim1 200s linear infinite;
}
@-webkit-keyframes anim1{
    0% {top: 200px;opacity: 0.4}
    5% {top: 0px;opacity: 1}
    15% {top: -200px;opacity: 1}
    20% {top: -400px;opacity: 1}
    25% {top: -600px;opacity: 1}
    30% {top: -800px;opacity: 1}
    35% {top: -1000px;opacity: 1}
    40% {top: -1200px;opacity: 1}
    45% {top: -1400px;opacity: 1}
    50% {top: -1600px;opacity: 1}
    55% {top: -1800px;opacity: 1}
    60% {top: -2000px;opacity: 1}
    65% {top: -2200px;opacity: 1}
    70% {top: -2400px;opacity: 1}
    75% {top: -2600px;opacity: 1}
    80% {top: -2800px;opacity: 1}
    85% {top: -3000px;opacity: 1}
    90% {top: -3200px;opacity: 1}
    95% {top: -3400px;opacity: 0.8}
    100%{top: -3600px;opacity: 0.4}
}
#pic1{
    display: block;
}
#icon1{
    position: absolute;
    top: -38px;
    left: -2px;
    width: 300px;
    z-index: 5;
    cursor: pointer;
}
#pic2{
    display: none;
}
#icon2{
    position: absolute;
    top: -57px;
    left: -222px;
    width: 400px;
    z-index: 5;
    cursor: pointer;
}
myStyle.css Code 
/**
 * Created by gao on 2016/7/25.
 */
window.onload=function(){
    var icon1 = document.getElementById("icon1");
    var icon2 = document.getElementById("icon2");
    var pic1 = document.getElementById("pic1");
    var pic2 = document.getElementById("pic2");
    var xuanzhuan = document.getElementById("xuanzhuan");
    var audio = document.getElementsByTagName("audio")[0];
    //當音樂播放完中止時，自動中止圖片旋轉
    audio.addEventListener("ended",function(event){
        //xuanzhuan.setAttribute("id","");
        xuanzhuan.style.animationPlayState = "paused";
    },false);
    //點擊暫停播放時，音樂暫停，圖片中止旋轉
    icon1.onclick=function(){
        audio.pause();
        pic1.style.display="none";
        pic2.style.display = "block";
        //xuanzhuan.setAttribute("id","");
        xuanzhuan.style.animationPlayState = "paused";
    };
    //點擊播放音樂時，音樂開始播放，圖片開始旋轉
    icon2.onclick=function(){
        audio.play();
        pic1.style.display="block";
        pic2.style.display = "none";
        //xuanzhuan.setAttribute("id","xuanzhuan");
        xuanzhuan.style.animationPlayState = "running";
    }
};
myjs.js Code 

效果：oop

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程