當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css3动画应用-音乐唱片旋转播放特效

發(fā)布時間：2024/10/12 编程问答 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 css3动画应用-音乐唱片旋转播放特效小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

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

核心點：

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

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

　　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、文字標題（潘瑋柏--反轉地球）一直從左到右不停循環(huán)移動。

核心代碼：

.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">潘瑋柏--反轉地球</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">反轉地球演唱：潘瑋柏Bow bow bow讓我看到你雙手對抗地心引力一起反轉地球Bow bow bow現(xiàn)在不適合羅嗦 適者生存不然請你離開這節(jié)奏 Bow bow bow 讓我看到你點頭 跟著我的音樂一起跳舞準沒錯 Bow bow bow 現(xiàn)在不適合閃躲 正面出擊看我怎么反轉地球 睜開雙眼看穿地球 赤裸的一片天空 我攤開雙手接受所有最原始的節(jié)奏 有沒有感到心情放松 有沒有感到細胞跳動 節(jié)奏的變化,身體的擺動 讓你全身放松 現(xiàn)在起不能羅嗦 踏進我的領域之中 頻率太震撼 你的心臟正在此起彼落 跟著我走跟著我做跟我點頭擺動雙手 世界的一切的轉動連結到我的音樂緊跟著我的腳步在走 讓世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN 別想壓抑我們定意世界的傳統(tǒng) 讓世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN 沒有對或錯我只想潛入這節(jié)奏 讓世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN 音樂沒有自由仿佛墜進了黑洞 讓世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN 現(xiàn)在跟著我們創(chuàng)造新世紀的秩序 Bow bow bow 讓我看到你雙手 對抗地心引力一起反轉地球 Bow bow bow 現(xiàn)在不適合羅嗦 適者生存不然請你離開這節(jié)奏 Bow bow bow 讓我看到你點頭 跟著我的音樂一起跳舞準沒錯 Bow bow bow 現(xiàn)在不適合閃躲 正面出擊看我怎么反轉地球 一道音波劃破天空 在我的領域不停播送 激發(fā)出的熱情不能抵擋你豎起的耳朵的誘惑 你停不停你動不動全部在我掌控之中 你知不知道地心引力在這永遠拉不住我 當音樂力量合二為一創(chuàng)造出新的世界秩序 不跟隨的人閉上你的....SHHH 有別的比那更好的嗎 有別的比那更出色嗎 有別的比我們向往追求的音樂更獨特的嗎 讓世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN 別想壓抑我們定意世界的傳統(tǒng) 讓世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN 沒有對或錯我只想潛入這節(jié)奏 讓世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN 音樂沒有自由仿佛墜進了黑洞 讓世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN 現(xiàn)在跟著我們創(chuàng)造新世紀的秩序 Bow bow bow 讓我看到你雙手 對抗地心引力一起反轉地球 Bow bow bow 現(xiàn)在不適合羅嗦 適者生存不然請你離開這節(jié)奏 Bow bow bow 讓我看到你點頭 跟著我的音樂一起跳舞準沒錯 Bow bow bow 現(xiàn)在不適合閃躲 正面出擊看我怎么反轉地球 Bow bow bow 讓我看到你雙手 對抗地心引力一起反轉地球 Bow bow bow 現(xiàn)在不適合羅嗦 適者生存不然請你離開這節(jié)奏 Bow bow bow 讓我看到你點頭 跟著我的音樂一起跳舞準沒錯 Bow bow bow 現(xiàn)在不適合閃躲 正面出擊看我怎么反轉地球</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动画应用-音乐唱片旋转播放特效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：怎么删除u盘中的cdfs 删除U盘中的C
下一篇：华为上机：求2的N次幂的值

编程问答

css3动画应用-音乐唱片旋转播放特效

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

核心點：

1、動設置圖片為圓形居中，使圖片一直不停旋轉。

2、文字標題（潘瑋柏--反轉地球）一直從左到右不停循環(huán)移動。

3、點擊圖標，音樂暫停，圖片停止旋轉；點擊圖片，音樂播放，圖片開始旋轉。

總結

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

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

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