css3动画应用-音乐唱片旋转播放特效
生活随笔
收集整理的這篇文章主要介紹了
css3动画应用-音乐唱片旋转播放特效
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
css3動(dòng)畫(huà)應(yīng)用-音樂(lè)唱片旋轉(zhuǎn)播放特效
核心點(diǎn)：
1、設(shè)置圖片為圓形居中，使圖片一直不停旋轉(zhuǎn)。
2、文字標(biāo)題（潘瑋柏--反轉(zhuǎn)地球）一直從左到右不停循環(huán)移動(dòng)。
3、點(diǎn)擊圖標(biāo)，音樂(lè)暫停，圖片停止旋轉(zhuǎn)；點(diǎn)擊圖片，音樂(lè)播放，圖片開(kāi)始旋轉(zhuǎn)。
1、動(dòng)設(shè)置圖片為圓形居中，使圖片一直不停旋轉(zhuǎn)。
核心代碼：
#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);} }2、文字標(biāo)題（潘瑋柏--反轉(zhuǎn)地球）一直從左到右不停循環(huán)移動(dòng)。
核心代碼：
.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} }3、點(diǎn)擊圖標(biāo)，音樂(lè)暫停，圖片停止旋轉(zhuǎn)；點(diǎn)擊圖片，音樂(lè)播放，圖片開(kāi)始旋轉(zhuǎn)。
核心代碼：
//當(dāng)音樂(lè)播放完停止時(shí)，自動(dòng)停止圖片旋轉(zhuǎn)audio.addEventListener("ended",function(event){//xuanzhuan.setAttribute("id","");xuanzhuan.style.animationPlayState = "paused";},false);//點(diǎn)擊暫停播放時(shí)，音樂(lè)暫停，圖片停止旋轉(zhuǎn)icon1.οnclick=function(){audio.pause();pic1.style.display="none";pic2.style.display = "block";//xuanzhuan.setAttribute("id","");xuanzhuan.style.animationPlayState = "paused";};//點(diǎn)擊播放音樂(lè)時(shí)，音樂(lè)開(kāi)始播放，圖片開(kāi)始旋轉(zhuǎn)icon2.οnclick=function(){audio.play();pic1.style.display="block";pic2.style.display = "none";//xuanzhuan.setAttribute("id","xuanzhuan");xuanzhuan.style.animationPlayState = "running";}實(shí)例：
<!doctype html> <html lang="zh-cn"> <head><meta charset="UTF-8"><title>rotate音樂(lè)唱片旋轉(zhuǎn)特效</title><link rel="stylesheet" href="./newStyle.css"><script type="text/javascript" src="./myjs.js"></script> </head> <body><div class="box"><div class="title"><p>潘瑋柏--反轉(zhuǎn)地球</p></div><img class="play" id="xuanzhuan" src="./feel.jpg" alt="旋轉(zhuǎn)特效"><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="./潘瑋柏-反轉(zhuǎn)地球.mp3" type="audio/mpeg"></audio><div class="content"><p>反轉(zhuǎn)地球</p><p>演唱：潘瑋柏</p><p>Bow bow bow</p><p>讓我看到你雙手</p><p>對(duì)抗地心引力一起反轉(zhuǎn)地球</p><p>Bow bow bow</p><p>現(xiàn)在不適合羅嗦</p><p> 適者生存不然請(qǐng)你離開(kāi)這節(jié)奏</p><p> Bow bow bow</p><p> 讓我看到你點(diǎn)頭</p><p> 跟著我的音樂(lè)一起跳舞準(zhǔn)沒(méi)錯(cuò)</p><p> Bow bow bow</p><p> 現(xiàn)在不適合閃躲</p><p> 正面出擊看我怎么反轉(zhuǎn)地球</p><p> 睜開(kāi)雙眼看穿地球</p><p> 赤裸的一片天空</p><p> 我攤開(kāi)雙手接受所有最原始的節(jié)奏</p><p> 有沒(méi)有感到心情放松</p><p> 有沒(méi)有感到細(xì)胞跳動(dòng)</p><p> 節(jié)奏的變化,身體的擺動(dòng)</p><p> 讓你全身放松</p><p> 現(xiàn)在起不能羅嗦</p><p> 踏進(jìn)我的領(lǐng)域之中</p><p> 頻率太震撼</p><p> 你的心臟正在此起彼落</p><p> 跟著我走跟著我做跟我點(diǎn)頭擺動(dòng)雙手</p><p> 世界的一切的轉(zhuǎn)動(dòng)連結(jié)到我的音樂(lè)緊跟著我的腳步在走</p><p> 讓世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN</p><p> 別想壓抑我們定意世界的傳統(tǒng)</p><p> 讓世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN</p><p> 沒(méi)有對(duì)或錯(cuò)我只想潛入這節(jié)奏</p><p> 讓世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN</p><p> 音樂(lè)沒(méi)有自由仿佛墜進(jìn)了黑洞</p><p> 讓世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN</p><p> 現(xiàn)在跟著我們創(chuàng)造新世紀(jì)的秩序</p><p> Bow bow bow</p><p> 讓我看到你雙手</p><p> 對(duì)抗地心引力一起反轉(zhuǎn)地球</p><p> Bow bow bow</p><p> 現(xiàn)在不適合羅嗦</p><p> 適者生存不然請(qǐng)你離開(kāi)這節(jié)奏</p><p> Bow bow bow</p><p> 讓我看到你點(diǎn)頭</p><p> 跟著我的音樂(lè)一起跳舞準(zhǔn)沒(méi)錯(cuò)</p><p> Bow bow bow</p><p> 現(xiàn)在不適合閃躲</p><p> 正面出擊看我怎么反轉(zhuǎn)地球</p><p> 一道音波劃破天空</p><p> 在我的領(lǐng)域不停播送</p><p> 激發(fā)出的熱情不能抵擋你豎起的耳朵的誘惑</p><p> 你停不停你動(dòng)不動(dòng)全部在我掌控之中</p><p> 你知不知道地心引力在這永遠(yuǎn)拉不住我</p><p> 當(dāng)音樂(lè)力量合二為一創(chuàng)造出新的世界秩序</p><p> 不跟隨的人閉上你的....SHHH</p><p> 有別的比那更好的嗎</p><p> 有別的比那更出色嗎</p><p> 有別的比我們向往追求的音樂(lè)更獨(dú)特的嗎</p><p> 讓世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN</p><p> 別想壓抑我們定意世界的傳統(tǒng)</p><p> 讓世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN</p><p> 沒(méi)有對(duì)或錯(cuò)我只想潛入這節(jié)奏</p><p> 讓世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN</p><p> 音樂(lè)沒(méi)有自由仿佛墜進(jìn)了黑洞</p><p> 讓世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN</p><p> 現(xiàn)在跟著我們創(chuàng)造新世紀(jì)的秩序</p><p> Bow bow bow</p><p> 讓我看到你雙手</p><p> 對(duì)抗地心引力一起反轉(zhuǎn)地球</p><p> Bow bow bow</p><p> 現(xiàn)在不適合羅嗦</p><p> 適者生存不然請(qǐng)你離開(kāi)這節(jié)奏</p><p> Bow bow bow</p><p> 讓我看到你點(diǎn)頭</p><p> 跟著我的音樂(lè)一起跳舞準(zhǔn)沒(méi)錯(cuò)</p><p> Bow bow bow</p><p> 現(xiàn)在不適合閃躲</p><p> 正面出擊看我怎么反轉(zhuǎn)地球</p><p> Bow bow bow</p><p> 讓我看到你雙手</p><p> 對(duì)抗地心引力一起反轉(zhuǎn)地球</p><p> Bow bow bow</p><p> 現(xiàn)在不適合羅嗦</p><p> 適者生存不然請(qǐng)你離開(kāi)這節(jié)奏</p><p> Bow bow bow</p><p> 讓我看到你點(diǎn)頭</p><p> 跟著我的音樂(lè)一起跳舞準(zhǔn)沒(méi)錯(cuò)</p><p> Bow bow bow</p><p> 現(xiàn)在不適合閃躲</p><p> 正面出擊看我怎么反轉(zhuǎn)地球</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];//當(dāng)音樂(lè)播放完停止時(shí)，自動(dòng)停止圖片旋轉(zhuǎn)audio.addEventListener("ended",function(event){//xuanzhuan.setAttribute("id","");xuanzhuan.style.animationPlayState = "paused";},false);//點(diǎn)擊暫停播放時(shí)，音樂(lè)暫停，圖片停止旋轉(zhuǎn)icon1.οnclick=function(){audio.pause();pic1.style.display="none";pic2.style.display = "block";//xuanzhuan.setAttribute("id","");xuanzhuan.style.animationPlayState = "paused";};//點(diǎn)擊播放音樂(lè)時(shí)，音樂(lè)開(kāi)始播放，圖片開(kāi)始旋轉(zhuǎn)icon2.οnclick=function(){audio.play();pic1.style.display="block";pic2.style.display = "none";//xuanzhuan.setAttribute("id","xuanzhuan");xuanzhuan.style.animationPlayState = "running";} }; myjs.js Code?效果：
轉(zhuǎn)載于:https://www.cnblogs.com/gaotenglong/p/5703177.html
與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的css3动画应用-音乐唱片旋转播放特效的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 怎么删除u盘中的cdfs 删除U盘中的C
- 下一篇： 华为上机：求2的N次幂的值