css3动画应用-音乐唱片旋转播放特效
生活随笔
收集整理的這篇文章主要介紹了
css3动画应用-音乐唱片旋转播放特效
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
css3動畫應用-音樂唱片旋轉播放特效
核心點：
1、設置圖片為圓形居中，使圖片一直不停旋轉。
2、文字標題（潘瑋柏--反轉地球）一直從左到右不停循環移動。
3、點擊圖標，音樂暫停，圖片停止旋轉；點擊圖片，音樂播放，圖片開始旋轉。
1、動設置圖片為圓形居中，使圖片一直不停旋轉。
核心代碼：
#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、文字標題（潘瑋柏--反轉地球）一直從左到右不停循環移動。
核心代碼：
.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、點擊圖標，音樂暫停，圖片停止旋轉；點擊圖片，音樂播放，圖片開始旋轉。
核心代碼：
//當音樂播放完停止時，自動停止圖片旋轉audio.addEventListener("ended",function(event){//xuanzhuan.setAttribute("id","");xuanzhuan.style.animationPlayState = "paused";},false);//點擊暫停播放時，音樂暫停，圖片停止旋轉icon1.οnclick=function(){audio.pause();pic1.style.display="none";pic2.style.display = "block";//xuanzhuan.setAttribute("id","");xuanzhuan.style.animationPlayState = "paused";};//點擊播放音樂時，音樂開始播放，圖片開始旋轉icon2.οnclick=function(){audio.play();pic1.style.display="block";pic2.style.display = "none";//xuanzhuan.setAttribute("id","xuanzhuan");xuanzhuan.style.animationPlayState = "running";}實例：
<!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.οnclick=function(){audio.pause();pic1.style.display="none";pic2.style.display = "block";//xuanzhuan.setAttribute("id","");xuanzhuan.style.animationPlayState = "paused";};//點擊播放音樂時，音樂開始播放，圖片開始旋轉icon2.οnclick=function(){audio.play();pic1.style.display="block";pic2.style.display = "none";//xuanzhuan.setAttribute("id","xuanzhuan");xuanzhuan.style.animationPlayState = "running";} }; myjs.js Code?效果：
轉載于:https://www.cnblogs.com/gaotenglong/p/5703177.html
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的css3动画应用-音乐唱片旋转播放特效的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 怎么删除u盘中的cdfs 删除U盘中的C
- 下一篇： 华为上机：求2的N次幂的值