如何用原生js或者jq或者css3制作会动的歌词 用JS或jquery或CSS3做到旋转。。
JS \u600e\u4e48\u52a8\u6001\u8bbe\u7f6eCSS3\u52a8\u753b\u7684\u6837\u5f0f\u50cf\u8fd9\u79cd\u6548\u679c\uff0c\u4f60\u8981\u60f3\u77e5\u9053\uff0c
\u5df2\u7ecf\u4e0b\u8f7d\u4e0b\u6765\uff0c\u4f60\u62c6\u5f00\u770b\u4e00\u4e0b\u5c31\u77e5\u9053\u4e86\u3002
\u8bf4\u8bf4\u539f\u7406\uff0c\u8fd9\u91cc\u5e76\u4e0d\u662f\u7eafcss3\uff0c\uff0c\u53ea\u662f\u7528css3\u5b9a\u4e49\u597d\u52a8\u753b\uff0c
@-moz-keyframes tips {
0% {box-shadow: 0px 0px 0px #f00;}
25% {box-shadow: 0px 0px 8px #f00;}
50% {box-shadow: 0px 0px 0px #f00;}
100% {box-shadow: 0px 0px 8px #f00;}
}
\u7136\u540e\uff0cjs\u5728\u5207\u5c4f\u540e\uff0c\u7528Js\u6765\u89e6\u53d1\u8fd9\u4e00\u4e2a\u6837\u5f0f\uff0c\u8fd9\u4e2a\u6837\u5f0f\u8c03\u7528\u4e86\u521a\u624d\u5b9a\u4e49\u7684\u52a8\u753b\u3002
.tips {
-webkit-animation:tips 1s;
-moz-animation:tips 1s ;
}
\u5f53\u7136css3\u662f\u53ef\u4ee5\u505a\u7684\uff0c\u53ea\u662f\u7528\u7eafcss3\uff0c\u5c31\u6ca1\u529e\u6cd5\u50cf\u8fd9\u6837\u53ef\u4ee5\u62d6\u52a8\u5207\u5c4f\uff0c\u8fd9\u4e2a\u662f\u9700\u8981js\u6216\u8005jq\u6765\u5b8c\u6210\u3002\u3002\u3002
~\u5982\u679c\u4f60\u8ba4\u53ef\u6211\u7684\u56de\u7b54\uff0c\u8bf7\u53ca\u65f6\u70b9\u51fb\u3010\u91c7\u7eb3\u4e3a\u6ee1\u610f\u56de\u7b54\u3011\u6309\u94ae
~~\u624b\u673a\u63d0\u95ee\u7684\u670b\u53cb\u5728\u5ba2\u6237\u7aef\u53f3\u4e0a\u89d2\u8bc4\u4ef7\u70b9\u3010\u6ee1\u610f\u3011\u5373\u53ef\u3002
~\u4f60\u7684\u91c7\u7eb3\u662f\u6211\u524d\u8fdb\u7684\u52a8\u529b
~~O(\u2229_\u2229)O\uff0c\u8bb0\u5f97\u597d\u8bc4\u548c\u91c7\u7eb3\uff0c\u4e92\u76f8\u5e2e\u52a9\uff0c\u8c22\u8c22\u3002
\u3000\u3000js\u548cjquery\u505a\u4e0d\u5230\u7684\uff0c\u9996\u5148\u8fd9\u4e2a\u662fcss3\u4e2d\u76843d\u8f6c\u6362\uff0c\u7528\u5230transform\uff1arotateX(50deg) \uff0c\u53ea\u4e0d\u8fc7\u662f\u65cb\u8f6c\u4e2d\u5fc3\u8981\u5728\u4f60\u753b\u7684\u7ebf\u4e2d\u95f4\uff0c\u8bbe\u7f6etransform-origin:50% 0; \uff08\u8fd9\u91cc\u662fxy\u8f74\uff0c\u53ef\u4ee5\u7406\u89e3\u4e3a\u96c6\u5408\u7b2c\u56db\u9879\u73b0\uff0c\u6240\u4ee5\u65cb\u8f6c\u8f74\u6240\u5728\u4f4d\u7f6e\u5c31\u662f\u7ea2\u8272\u7bad\u5934\u4f4d\u7f6e\u7684\u5750\u6807\uff0cx\u548c-y\uff09
\u3000\u3000\u6574\u7406\u4ee3\u7801\uff1a
\u3000\u3000div{ width:500px; height:500px; background:#333; transform-origin:50% 0; transform:rotateX(50deg);
\u3000\u3000\u5982\u6709\u7591\u95ee\u6b22\u8fce\u54a8\u8be2
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Player</title>
<style type="text/css">
#audio-wrapper{
border:1px solid;
text-align:center;
}
.activated{
color:#33b;
font-weight:bold;
background:#ddf;
}
#lrc{
text-align:center;
width:360px;
height:400px;
overflow:hidden;
border:2px solid #ddd;
box-shadow:2px 2px 2px silver;
}
.lyrics-container{
position:relative;
width:99%;
height:80%;
border:1px solid red;
overflow:hidden;
}
.lyrics-container2{
position:absolute;
width:355px;
}
#lrc p{
text-indent:0;
margin:0;
padding:6px;
}
.music-title,.album,.artist{
margin:0;
padding:4px;
text-indent:0;
text-align:left;
}
</style>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="#audio-wrapper">
<p><audio src="data/aimei.mp3" controls></audio></p>
</div>
<div id="lrc"></div>
<script type="text/javascript">
$(document).ready(function(){
var $lrc = $('#lrc');
var html ='';
$('audio').on('play',function(){
var start = new Date();
if($lrc.html() == ''){
$.ajax({
url:'data/aimei.xml',
type:'get',
dataType:'xml',
success:function(data){
html += '<div class="info">';
if($(data).find('TITLE').length > 0){
html += '<p class="music-title">歌曲：' + $(data).find('TITLE').text()+'</p>';
}
if($(data).find('ALBUM').length > 0){
html += '<p class="album">专辑：' + $(data).find('ALBUM').text()+'</p>';
}
if($(data).find('ARTIST').length > 0){
html += '<p class="artist">演唱：' + $(data).find('ARTIST').text()+'</p>';
}
html += '</div>';
html += '<div class="lyrics-container">'
html += '<div class="lyrics-container2">'
$(data).find('LRC').each(function(){
html += '<p class="lyrics" tag="'+ $(this).attr('TAG') +'">' + $(this).text() +'</p>';
});
html += '</div></div>';
$lrc.html(html);
//alert($(data).find('LRC').length);
}
});
}
var timer = setInterval(function(){
var now = new Date();
var elapsed = now - start;
if($lrc.find('.lyrics').length){
$lrc.find('.lyrics').each(function(){
var isOK = elapsed - $(this).attr('tag');
if(isOK < 13 && isOK > 0){
$lrc.find('.lyrics').removeClass('activated');
$(this).addClass('activated');
if($(this).prevAll('.lyrics').length > 3){
$('.lyrics-container2').animate({
'top':'-=30px'
});
//console.log($(this).prevAll('.lyrics').length);
}
}
});
}
},10);
});
});
</script>
</body>
</html>
看你对这个歌词怎么看了，如果只是单纯的滚动，你用js或者jq控制滚动条就行你给歌词参数里面配上时间，然后挨个执行定时器就行
会动的歌词？你想怎么动？
不知道你是要什么样的效果
如果是跟mv里一样的话就ajax获取歌词
只是想动的话，就css就行了
绛旓細鍦ㄤ竴浜涙妧鏈鍧涗笌qq缇ょ粡甯哥湅鍒版湁杩欐牱绫讳技鐨勬彁闂紝褰撶劧鎻愬嚭杩欐牱闂鐨勯氬父閮芥槸鏂版墜涓轰簡瑙ｅ喅澶у鐨勭枒鎯戯紝鍚屾椂甯姪鏂版墜绋嬪簭鍛樿兘鏇村揩鎺屾彙瀛︿範鐨勬柟鍚戯紝涓嶈嚧浜庡紕閿欓噸鐐圭瑪鑰呬互鑷繁韬涔犲拰浣跨敤缁忛獙鍒嗕韩缁欏ぇ瀹讹紝鏈変换浣曢棶棰樻垨鐤戞儜锛屾杩庣暀瑷鍦ㄥ洖绛旈鐩棶棰樺墠锛岄鍏堝ぇ瀹堕渶瑕佷簡瑙ｄ笅浠涔堟槸js锛屼粈涔堟槸jQueryjs锛屽嵆JavaScript鍦...
绛旓細鏁堟灉鍥撅細浠ｇ爜鎴浘锛氾紙鍏抽敭閮ㄥ垎鐢ㄦ妗嗘爣鍑猴級婧愮爜锛<!DOCTYPE html> Document var showDate = document.getElementById('date'); // 鑾峰彇椤甸潰鍏冪礌 var showWeek = document.getElementById('week'); // 鑾峰彇椤甸潰鍏冪礌 var time = new Date();var year = time.get...
绛旓細鍐茬獊瑙ｅ喅鏂规硶鏍稿績灏辨槸璋冪敤$.noConflict();//鏂规硶1: 鍦ㄤ唬鐮佹渶鍓嶉潰鍐欏涓嬩唬鐮. 鍗冲彲閲婃斁$绗﹀彿鐨勪娇鐢ㄦ潈.浣跨敤jQuery浠ｆ浛$jQuery.noConflict();鍚庨潰濡傛灉瑕佷娇鐢╦Query鐨勫嚱鏁,閭ｄ箞鐢╦Query 鏉ユ浛浠 // 鏂规硶2: 鍦ㄤ唬鐮佹渶鍓嶉潰鍐欏涓嬩唬鐮; 鑷畾涔夎闂var jq=$.noConflict();鍚庨潰濡傛灉瑕佷娇鐢╦Query鐨勫嚱鏁,閭ｄ箞鐢...
绛旓細jquery涔熸槸鍘熺敓js鍐欑殑鍛锛屼綘鍙互鍘荤湅瀹炵幇銆傛湁浜哄啓濂戒簡绫诲簱锛屽疄鐜颁簡寰堝瀹炵敤鏂规硶锛屽吋瀹逛簡娴忚鍣紝鎴戜滑鐢ㄥ氨鎴愶紝浣曞繀鍘诲啀鍘婚噸澶嶉犺疆瀛愩備綘涔熷彲浠ヤ笉鐢╦query锛岃嚜宸卞幓鍐欍
绛旓細} //鍒ゆ柇濡傛灉鐢ㄦ埛鎸変笅浜嗙┖鏍奸敭(keycode=32)锛宨f(keyNum==32){ alert('鎮ㄦ寜涓嬩簡绌烘牸');} } 鍓╀笅鍙﹀涓や釜鎸夐敭鏂规硶鍚岀悊 jquery鐨勬柟寮忕洃鍚敭鐩樹簨浠 jquery鐨勪篃鍒嗕负涓変釜杩囩▼锛屼絾鏄湪浜嬩欢鍚嶇О涓婃湁鎵涓嶅悓 keyup锛氭煇涓敭鐩樼殑閿鏉惧紑 keydown锛氭煇涓敭琚寜涓 keypress锛氭煇涓敭鐩樼殑閿鎸変笅鎴鎸変綇 ...
绛旓細鏄殑锛岄渶瑕佷竴浜涙渶鍩烘湰javascript鍩虹锛屽洜涓jQuery涔熷彧鏄熀浜巎avascript鍐欑殑涓涓鏋惰屽凡銆備絾鏄鏋滄偍鐪媕Query鐨凙PI鑳界湅鎳傜殑璇漥avascript锛鍘熺敓JS锛変篃涓嶅繀澶湪鎰忋傛垜灏卞師鐢烰S寮濮嬪氨娌℃庝箞瀛︼紝鍚庢潵鐩存帴鐪jq銆俲q鐔熸倝浜嗗弽鍊掑湪鏉ユ繁鍏ョ殑瀛︿範鍘熺敓JS锛堟ц兘涓婂師鐢烰S杩滃ぇ浜巎q锛夈傜幇鍦ㄥ凡缁忔槸涓浼佷笟鐨勯甯墠绔伐绋嬪笀锛屽墠杞...
绛旓細4銆佽缃ソ鏍囩锛堝鍥炬槸div鏍囩锛屽彉閲忓悕box锛夛紝浣跨敤document.body.appendChild娣诲姞鏍囩鍒癰ody褰撲腑銆5銆佹爣绛炬坊鍔犱互鍚庯紝渚濈劧鍙互淇敼鏍峰紡锛屽鍥炬槸浣跨敤document.getElementById鏂规硶鏍规嵁id鑾峰彇鏍囩锛屼慨鏀箂tyle銆6銆佹爣绛炬坊鍔犱互鍚庯紝涔熷彲浠ョ粰鍏舵坊鍔犲拰鍒犻櫎event澶勭悊銆傚鍥炬槸浣跨敤jQuery缁檌d涓篿mg-preview-box鐨勬爣绛炬坊鍔爃over...
绛旓細Load浜嬩欢鏄湪椤甸潰鍔犺浇瀹屾瘯鍚庤Е鍙戯紱ready浜嬩欢鏄湪DOM妯″瀷鏋勯犲畬姣曪紝鍔犺浇澶栭儴鏂囦欢鍓嶈Е鍙戯紱JQuery鐨剅eady浜嬩欢瀹為檯涓婃槸瀵笽E鐨剅eadystatechange浜嬩欢鍜孌OM鐨凞OMContentLoaded浜嬩欢杩涜灏佽锛岃繖涓や簨浠堕兘鏄湪DOM鏍戠粨鏋勪笅杞藉苟瑙ｆ瀽瀹屾瘯鍚庤Е鍙戙
绛旓細鏈鍩烘湰鐨 绫婚夋嫨鍣.class鍔犱笂绱㈠紩鍖归厤閫夋嫨鍣 :eq(index)(".xxx:eq(0)")
绛旓細this灏辨槸鍘熺敓鐨js锛岃幏鍙栧綋鍓嶅璞°備綘杩欓噷$()鏂规硶涓嶈繃鎶婂畠鏋勯犳垚浜jquery瀵硅薄鑰屽凡銆傜户鎵跨粨鏋勬瘮杈冨鏉傚鏍凤紝绠鍗曟潵璇村氨鏄妸鐖剁被鐨勫疄渚嬭祴缁欏瓙绫荤殑鍘熷瀷銆備粙缁嶆渶缁忓吀鐨勪竴绉嶇户鎵挎柟寮 瀵勭敓缁勫悎寮忕户鎵://鐖剁被 function SuperType(name){ this.name = name;this.colors = ["red","blue"];} //鐖剁被鍘熷瀷...
