˼·
1.°Ñµ¥¸öÄÚÈݱ༺㬼ÆËã×ÔÉí¿í¶È£¬È·¶¨³õʼλÖÃ
2.Òƶ¯µÄ¾àÀëÊÇÆÁÄ»¿í¶È
3.js¶¯Ì¬µÄÌí¼Ócss¶¯»º¯Êý£¬½«¸ß¶È¡¢¶¯»Òƶ¯Ê±¼ä¡¢¶¯»ÑÓ³Ùʱ¼ä¶¼ÓÃËæ»úÊý¿ØÖÆ
´úÂ룺
html¹Ç¼Ü½á¹¹
(ÒÔÈý¸öΪÀý£¬Èç¹û¾õµÃ½çÃæÌ«³¤²»ÓѺã¬Ò²¿ÉÒÔjs¶¯Ì¬µÄÉú³É)
<div class="cute-barrage"> <div class="barrage-div"> <img src="http://kw1-1253445850.file.myqcloud.com/static/image/stimg_7656dc02eb1cd13adbacbdd2695dc3a8.jpg"/> <span>Ò»ÔÂÒ»¶ÈµÄ»¨ß»¹¿îÆÚµ½À²<i>¹þ¹þ¹þ</i></span> </div> <div class="barrage-div"> <img src="http://kw1-1253445850.file.myqcloud.com/static/image/stimg_632fecdcb52417cb8ab89fa283e07281.jpg"/> <span>×øµÈ·¢¹¤×Ê<i>ºÇºÇºÇ</i></span> </div> <div class="barrage-div"> <img src="../../static/cutePresent/resource/avatar.png"/> <span>±äÓÐÇ®±äÓÐÇ®<i>Ò®Ò®Ò®</i></span> </div> </div>
cssÑùʽ
.cute-barrageÊÇÈ·¶¨Õ¹Ê¾·¶Î§ºÍλÖ㬿í¶ÈΪ100%£¬¸ß¶È×Ô¶¨£¬ºáÏò³¬³ö²¿·ÖÒþ²Ø
.barrage-div ÄÚÈݲ¿·Ö£¬³¤¶ÈÓÉÄÚÈݾö¶¨£¬È·¶¨Ïà¶Ô¸¸¼¶µÄλÖÃ
html,body{ width:100%; } .cute-barrage{ width: 100%; height: 4rem; /*È·¶¨µ¯Ä»³¤¶È*/ position: absolute; top: 1.5rem; /*È·¶¨µ¯Ä»¸ß¶È*/ left: 0; overflow-x: hidden; /*ºáÏò³¬³ö²¿·ÖÒþ²Ø*/ .barrage-div{ position: absolute; top: 0; right: -100%; /*±£Ö¤Ò»¿ªÊ¼ÔÚ½çÃæÍâ²à£¬´ÓÓÒÏò×ó¾ÍÊÇright£¬´Ó×óÏòÓÒ¾ÍÊÇleft*/ height: 0.6rem; background-color: rgba(255, 255, 255, 0.9); border-radius: 2rem; white-space: nowrap; /*È·±£ÄÚÈÝÔÚÒ»ÐÐÏÔʾ£¬²»È»Òƶ¯µ½×îºó»áÕÛÐÐ*/ img{ width: 0.5rem; height: 0.5rem; vertical-align: middle; //ÄÚÁª¿éÔªËØ£¬¾ÓÖжÔÆë padding-left: 0.05rem; border-radius: 50%; } span{ font-size: 14px; padding: 0 0.1rem; line-height: 0.6rem; //ÄÚÁª¿éÔªËØ£¬¾ÓÖжÔÆëËĸöȱһ²»¿É height: 0.6rem; //ÄÚÁª¿éÔªËØ£¬¾ÓÖжÔÆëËĸöȱһ²»¿É display: inline-block; //ÄÚÁª¿éÔªËØ£¬¾ÓÖжÔÆëËĸöȱһ²»¿É vertical-align: middle; //ÄÚÁª¿éÔªËØ£¬¾ÓÖжÔÆëËĸöȱһ²»¿É i{ color: #fe5453; font-weight: 700; } } } }
js¶¯Ì¬¶¯»ÊµÏÖ(zepto.js)
//µ¯Ä» var winWidth = $(window).width(); //»ñÈ¡ÆÁÄ»¿í¶È $(".barrage-div").each(function(index,value){ //±éÀúÿÌõµ¯Ä» var width = $(value).width(); //»ñÈ¡µ±Ç°µ¯Ä»µÄ¿í¶È var topRandom = Math.floor(Math.random() * 3) + 'rem'; //»ñÈ¡0,1,2µÄËæ»úÊý ¿É¸ù¾ÝÇé¿ö¸Ä±ä $(value).css({"right":-width,"top":topRandom}); //½«µ¯Ä»Òƶ¯µ½ÆÁÄ»ÍâÃ棬ÕýºÃ³¬³öµÄλÖà //ƴд¶¯»Ö¡º¯Êý£¬¼ÇµÃÿ¸öaniÒª½øÐÐÇø·Ö£¬¿í¶È´Ó×Ô¼ºµÄ¸º¿í¶ÈÒƶ¯Ò»Õû¸öÆÁÄ»µÄ¾àÀë var keyframes = `\ @keyframes ani${index}{ form{ right:${-width}px; } to{ right:${winWidth}px; } }\ @-webkit-keyframes ani${index}{ form{ right:${-width}px; } to{ right:${winWidth}px; } }`; //Ìí¼Óµ½Ò³ÃæµÄhead±êÇ©ÀïÃæ $("<style>").attr("type","text/css").html(keyframes).appendTo($("head")); //¶¨Ò嶯»ËÙ¶ÈÁбí var aniList = [3,5,7,9,11]; //È¡Êý×éµÄËæ»úÊý£¬0,1,2,3,4 var aniTime =Math.floor(Math.random() * 5); //¸øµ±È«Ç°µ¯Ä»Ìí¼ÓanimationµÄcss //ÑÓ³ÙµÄʱ¼äÓÃÿ¸öµÄ*1.5±¶£¬Õâ¸ö¿É±ä $(value).css({"animation":`ani${index} ${aniList[aniTime]}s linear ${index * 1.5}s`,"-webkit-animation":`ani${index} ${aniList[aniTime]}s linear ${index * 1.5}s`}); })
×ܽá
ÒÔÉÏËùÊöÊÇС±à¸ø´ó¼Ò½éÉܵÄHTML5ʵÏÖÒƶ¯¶Ëµ¯Ä»¶¯»Ð§¹û,Ï£Íû¶Ô´ó¼ÒÓÐËù°ïÖú£¬Èç¹û´ó¼ÒÓÐÈκÎÒÉÎÊÇë¸øÎÒÁôÑÔ£¬Ð¡±à»á¼°Ê±»Ø¸´´ó¼ÒµÄ¡£ÔÚ´ËÒ²·Ç³£¸Ðл´ó¼Ò¶Ô½Å±¾Ö®¼ÒÍøÕ¾µÄÖ§³Ö£¡
Èç¹ûÄã¾õµÃ±¾ÎĶÔÄãÓаïÖú£¬»¶ÓתÔØ£¬·³Çë×¢Ã÷³ö´¦£¬Ð»Ð»£¡
´úÂë div class=testdiv/divdiv/div/div .test{width: 200px;height: 200px;marg...
ÔÚʹÓÃHTML±íµÄʱºòÓÐʱºòÐèÒªÎÒÃǸıäÐо࣬µ«ÊǸıämargin£¬padding£¬collapse...
404Ò³ÃæÔÚÎÒÃÇƽ³£ä¯ÀÀÍøÒ³µÄʱºò²¢²»»á¾³£Åöµ½£¬Ò²Òò´ËºÜÈÝÒ×±»ºöÂÔ£¬µ«ÊÇÓÐÒ»...
Ч¹û£º ´úÂ룺 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"...
Ò»¡¢ÍøÕ¾Éè¼Æ˼· ÿ¸öÍøÒ³¿ªÊ¼Ç°£¬Ò»°ãÒªÔÚFirworks»òÔÚPhotoshopµÈͼÏñÉè¼ÆÈí...
HTML5»ùÓÚflashʵÏÖ²¥·ÅRTMPÐÒéÊÓƵ£¬¾ßÌå´úÂëÈçÏÂËùʾ£º !doctype htmlhtmlhea...
Ò»¡¢ÎĵµÁ÷Ó븡¶¯ 1¡¢Ê²Ã´ÊÇÎĵµÁ÷£¿ ÔÚhtmlÖУ¬ÎĵµÁ÷Ò²¿ÉÒÔ½Ð×ö±ê×¼Á÷»òÆÕͨÁ÷...
ÔÚtransparentBody.htmÎļþµÄbody±êÇ©ÖУ¬ÎÒÒѾ¼ÓÈëÁËstyle="background-color=...
ÔÚdreamweaverÎļþÃæ°åÖпÉÒÔ´ò¿ªÎļþ¡¢¸ü¸ÄÎļþÃû£»Ìí¼Ó¡¢Òƶ¯»òɾ³ýÎļþ£»»òÕß...
Ç°ÑÔ Vue Router ÊÇ Vue.js ¹Ù·½µÄ·ÓɹÜÀíÆ÷¡£ ËüºÍ Vue.js µÄºËÐÄÉî¶È¼¯³É£¬ÈÃ...