
å
ãã¿
ããããããããªã¼ã¨æã£ã¦ãã§ããããéãã¦ã»ã»ã»ï½ããããèãããã¿ããªå¤§å¥½ãmarqueeã¿ã°ã¨CSS3ã®linear-gradient使ãã°ã§ããããã¨ãæã£ã¦ãã£ãããã£ã¡ãç°¡åã ã£ããiPhoneã¨ãã§ãè¦ããããIEã¯ããã
â ãµã³ãã«
HTML
HTMLã¯è¶
絶ã·ã³ãã«
CSS
CSSã¯ã»ã¼linear-gradientãèæ¯ã«linear-gradientã§æ ¼åç¶ã«ãªããã縦横æ·ãè©°ããæ¬ä¼¼è¦ç´ ãmarqueeã®ä¸ã«width, heightåºãã¦è¢«ããå½¢ã§
marquee {
position: relative;
color: #ffab00;
background-color: #0a0600;
font-size: 40px;
}
marquee:after {
content: ' ';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(#0a0600 1px, transparent 0px),
linear-gradient(0, #0a0600 1px, transparent 1px);
background-image: -webkit-linear-gradient(#0a0600 1px, transparent 0px),
-webkit-linear-gradient(0, #0a0600 1px, transparent 1px);
background-image: -moz-linear-gradient(#0a0600 1px, transparent 0px),
-moz-linear-gradient(0, #0a0600 1px, transparent 1px);
background-image: -o-linear-gradient(#0a0600 1px, transparent 0px),
-o-linear-gradient(0, #0a0600 1px, transparent 1px);
background-image: -ms-linear-gradient(#0a0600 1px, transparent 0px),
-ms-linear-gradient(0, #0a0600 1px, transparent 1px);
background-size: 2px 2px, 2px 2px;
z-index: 10;
}
IEã§ãè¦ããã£ãã:afterããã¦divããªããã«ãã¦ãlinear-gradientãèæ¯ç»årepeatã§ã§ããããã:afterã¯ãããªãã¦ããããã©
ã¨ããã§CSS3 marqueeããªãã¨ãªããããã©ãOperaã¨Webkitã ãã ããæ¸ãæ¹é¢åããããã ããããã
jsdo.itã«forkãããã¤ç½®ããã®ã§ãããã° Fork me on jsdo.it
forked: HTML5ã®Canvasã¨JSã§é»å
æ²ç¤ºæ¿ â jsdo.it â share JavaScript, HTML5 and CSS
追è¨ï¼ãªãããã£ã±ãä¸é¨ç°å¢ã§éããªãã¨ããããããã