CSS ¼¼ÇÉÒ»Ôò -- ²»¶¨¿íÒç³ö365ÌåÓýͶעÊÊÅä¹ö¶¯

ÔÚÈÕ³£²¼¾Öµ±ÖУ¬¿Ï¶¨¾­³£»áÓöµ½365ÌåÓýͶעÄÚÈݳ¬¹ýÈÝÆ÷µÄÇé¿ö¡£·Ç³£³£¼ûµÄ365ÌåÓýͶע½â¾ö·½°¸Êdz¬³öÊ¡ÂÔ¡£

µ«ÊÇ£¬ÓеÄʱºò£¬ÓÉÓÚ³¡¾°µÄÏÞÖÆ£¬¿ÉÄÜ»á³öÏÖÔÚһЩÎÞ·¨Ê¹Óó¬³ö´òµãÊ¡ÂԵķ½·¨µÄ³¡¾°£¬Æ©ÈçÔÚµ¼º½À¸ÖУº

ÕâÖÖÇé¿öÏ£¬ÔÚÈÝÆ÷¶¨¿íµ«ÊÇ365ÌåÓýͶעÓÖÒç³öÇÒ²»ÄÜ»»ÐеÄÇé¿öÏ£¬365betÌåÓýÔÚÏßÃǾÍÐèҪѰÇóÁíÍâµÄ½â¾ö·½°¸¡£

hover ʱµ¯³ö¿òÌáʾ

365ÌåÓýͶע¿ÉÐеķ½°¸ÊÇÔÚ hover µÄʱºò£¬µ¯³öÒ»¸ö365ÌåÓýͶע¿òչʾȫÎÄ£¬×î¼òµ¥µÄ¾ÍÊÇÔÚ365ÌåÓýͶע±êÇ©ÏÂÌí¼Ó title ÊôÐÔ£¬Ìî³ä365betÌåÓýÔÚÏßÃÇÐèÒªµÄÄÚÈÝ£º

<ul>
    <li title="Òç³ö365ÌåÓýͶע1 Òç³ö365ÌåÓýͶע2 Òç³ö365ÌåÓýͶע3 Òç³ö365ÌåÓýͶע4">Òç³ö365ÌåÓýͶע1 Òç³ö365ÌåÓýͶע2 Òç³ö365ÌåÓýͶע3 Òç³ö365ÌåÓýͶע4</li>
</ul>

µ±È»£¬ÕâÖÖ·½·¨¼òµ¥µ«ÊÇ¿ÉÄÜȱ·¦µãÓû§ÌåÑé¡£

---

365betÌåÓýÔÚÏß½«¼òµ¥½éÉÜÔÚ365ÌåÓýͶע³¤¶È²»È·¶¨£¬ÈÝÆ÷³¤¶ÈÒ²²»È·¶¨µÄÇé¿öÏ£¬È365betÌåÓýÔÚÏßⳤ¶ÈµÄ365ÌåÓýͶעʵÏÖ hover ״̬Ï£¬´Ó×óÏòÓÒ£¬¹ö¶¯µ½365ÌåÓýͶעĩ¶Ë£¬ÔÙ¹ö¶¯»Ø³õʼλÖã¬Èç´Ë·´¸´£¬ÏñÊÇÕâÑù£º

ÈÝÆ÷¶¨¿í£¬365ÌåÓýͶע²»¶¨¿í

365betÌåÓýÔÚÏßÃÇÏȼÙÉèһϣ¬365betÌåÓýÔÚÏßÃǵÄÈÝÆ÷µÄ¿í¶ÈÈç¹ûÊǹ̶¨µÄ£¬µ«ÊDz»È·¶¨Ã¿Ìõ365ÌåÓýͶעµÄ¿í¶È¡£

ÏñÊÇÕâÑù£º

<div class="wrap">
    <p title="365betÌåÓýÔÚÏߵĿí¶ÈÊÇÕý³£¿í¶È">365betÌåÓýÔÚÏߵĿí¶ÈÊÇÕý³£¿í¶È</p>
    <p class="scroll" title="365betÌåÓýÔÚÏߵĿí¶ÈÊÇÒç³öÁËһС²¿·Ö">365betÌåÓýÔÚÏߵĿí¶ÈÊÇÒç³öÁËһС²¿·Ö</p>
    <p class="scroll" title="365betÌåÓýÔÚÏߵĿí¶ÈÊÇÒç³öÁËÒç³öÁ˺ܴóÒ»²¿·Ö">365betÌåÓýÔÚÏߵĿí¶ÈÊÇÒç³öÁËÒç³öÁ˺ܴóÒ»²¿·Ö</p>
</div>

.wrap {
    position: relative;
    width: 150px;
    overflow: hidden;
}

p {
     white-space: nowrap;
}

ʹÓàinline-block »ñȡʵ¼Ê365ÌåÓýͶעµÄ¿í¶È

ÓÉÓÚ <p> ±êÇ©µÄ¿í¶ÈΪ¸¸ÔªËØµÄ 100%£¬Èç¹ûÊÇÕâÑù£¬365betÌåÓýÔÚÏßÃǺÜÄѽøÐÐÏÂÃæµÄ²Ù×÷¡£365betÌåÓýÔÚÏßÃÇÊ×ÏÈÐèÒªÄõ½Êµ¼Ê365ÌåÓýͶעµÄ¿í¶È£¬ÕâÀï¿ÉÒÔ½èÖú inline-block µÄÌØÐÔ£¬×öµ½ÕâÒ»µã£¬365betÌåÓýÔÚÏßÃǸĽøÏÂ365betÌåÓýÔÚÏßÃÇµÄ CSS£º

p {
 +  display: inline-block;
    white-space: nowrap;
}

ÕâÑù£¬µ±Ç° <p> ±êÇ©µÄʵ¼Ê¿í¶È£¬Æäʵ¾ÍÊÇÕû¸ö365ÌåÓýͶעԪËصĿí¶È¡£

Tips£ºÕâÀïûÓÐʹÓàdisplay: inline ÊÇÒòΪÏÂÎÄ365betÌåÓýÔÚÏßÃÇÐèÒªÈà p ÔªËعö¶¯ÆðÀ´ÐèÒªÓõ½ transform£¬µ«ÊÇ transform ÊÇÎÞ·¨×÷ÓÃÔÚÄÚÁªÔªËØÖ®Éϵġ£¾ßÌå¿ÉÒԲο¼¹æ·¶£ºtransformable element

Ëã³ö¹ö¶¯¾àÀ룬½øÐйö¶¯

ÕâÑù£¬365betÌåÓýÔÚÏßÃÇÓÐÁ˸¸ÔªËصĿí¶È 150px£¬365ÌåÓýͶעµÄ¿í¶È¡£ÄÇôºÜÈÝÒ׵õ½ÐèÒª¹ö¶¯µÄ¾àÀ룺

ÐèÒª¹ö¶¯µÄ¾àÀë S = Òç³öµÄ365ÌåÓýͶעԪËصĿí¶È - ¸¸ÔªËصĿí¶È

ÕâÑù£¬365betÌåÓýÔÚÏßÃÇÖ»ÐèÒªÕÒµ½Ò»¸ö¿ÉÒÔ365ÌåÓýͶע²¢ÇÒµ±Ç°365ÌåÓýͶע¿í¶ÈÊDZäÁ¿Öµ¼´¿É¡£¼´ÊÇ -- transoform¡£

ÓÉÓÚÔÚʹÓà transform: translate() ½øÐÐλÒƵÄʱºò£¬Èç¹ûʹÓðٷֱÈ365ÌåÓýͶע£¬ÄÇô°Ù·Ö±ÈµÄ»ù×¼ÔªËØÊÇÔªËر¾Éí£¬Ò²¾ÍÊÇÈç¹û365betÌåÓýÔÚÏßÃÇ transform: translate(100%, 0)£¬Æäʵ365ÌåÓýͶעµÄ¾ÍÊÇÏòÓÒÒƶ¯Ò»¸öÔªËر¾Éí¿í¶ÈµÄ¾àÀë¡£

ÄÇô365betÌåÓýÔÚÏßÃÇ¿ÉÒÔ½èÖú calc ·Ç³£ÈÝÒ×µÄÄõ½365betÌåÓýÔÚÏßÃÇÉÏÊöµÄÐèÒª¹ö¶¯µÄ¾àÀë S -- transform: translate(calc(-100% + 150px), 0)£¬Ç¶È붯»­ÖУº

p:hover {
    animation: move 1.5s infinite alternate linear;
}

@keyframes move {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(calc(-100% + 150px), 0);
    }
}

ÖÁ´Ë£¬¶ÔÓÚÈ365betÌåÓýÔÚÏßⳬ³öÈÝÆ÷¿í¶ÈµÄ365ÌåÓýͶע£¬365betÌåÓýÔÚÏßÃǶ¼¿ÉÒÔÇáËɵÄÍê³ÉÉÏÊöµÄЧ¹û¡£

• ²»¶¨¿íÎÄ×ÖÅÜÂíµÆÀ´»Ø¹ö¶¯Õ¹Ê¾ -- ¸¸ÈÝÆ÷¶¨¿í£¬×ÓÔªËز»¶¨¿í

¸¸ÈÝÆ÷²»¶¨¿í¶È

µ±È»£¬»¹Ã»Íê¡£

Èç¹û¸¸ÈÝÆ÷µÄ¿í¶ÈÒ²ÊDz»¹Ì¶¨µÄ£¬»òÒòΪÕß calc ¼æÈÝÐÔÎÊÌâÎÞ·¨Ê¹ÓÃÉÏÊö·½·¨¡£ÄÇô£¬365betÌåÓýÔÚÏßÃÇÒª×öµÄ¾ÍÊÇ£¬ÔÚÒ»¶Î¹Ì¶¨µÄ CSS ´úÂëÖУ¬¼ÈÄÜÔ˶¯µ±Ç°ÔªËصĿí¶È£¬Ò²ÄÜλÒƸ¸ÈÝÆ÷µÄ¿í¶È¡£

ÕýÇÉ£¬CSS »¹ÕæÄÜÍê³ÉÉÏÊöÒªÇó£¬365betÌåÓýÔÚÏßÃǸÄÔìһϠanimation µÄ´úÂ룺

@keyframes move {
    0% {
        left: 0;
        transform: translate(0, 0);
    }
    100% {
        left: 100%;
        transform: translate(-100%, 0);
    }
}

• transform: translate(-100%, 0) Äܹ»Ïò×óλÒÆ×ÔÉí¿í¶ÈµÄ 100%
• left: 100% Äܹ»ÊµÏÖÏòÓÒλÒƸ¸ÈÝÆ÷¿í¶ÈµÄ 100%

ʹÓàmargin-left Ìæ»» left Ò²ÊÇÒ»Ñù¿ÉÒÔʵÏֵģ¬Ê¹ÓðٷֱÈ365ÌåÓýͶעµÄ margin-left Î»ÒƵĻù×¼Ò²ÊǸ¸ÔªËصĿí¶È¡£

ÕâÑù£¬²»ÂÛ¸¸ÈÝÆ÷¿í¶ÈÈçºÎ£¬365ÌåÓýͶעԪËØ¿í¶ÈÈçºÎ£¬¶¼¿ÉÒÔʵÏÖ¶ÔÒç³ö365ÌåÓýͶעÊÊÅä¹ö¶¯Õ¹Ê¾¡£

• ²»¶¨¿íÎÄ×ÖÅÜÂíµÆÀ´»Ø¹ö¶¯Õ¹Ê¾ -- ¸¸ÈÝÆ÷²»¶¨¿í£¬×ÓÔªËز»¶¨¿í

  

²¿·Ö²»×ãÖ®´¦

1. ÎÞ·¨ÅжÏ365ÌåÓýͶע³¤¶ÈÊÇ·ñ³¬³ö¸¸ÔªËØ¿í¶È

µ±È»£¬ÉÏÊö·½°¸²¢·ÇÍêÃÀµÄ·½°¸£¬Èç¹û365betÌåÓýÔÚÏßÃÇÏ£ÍûÖ»Õë¶Ô365betÌåÓýÔÚÏß³¤¶ÈÒç³öµÄÇé¿ö£¬hover µÄʱºò²Å½øÐйö¶¯£¬ÕâÒ»µãÔÚʹÓô¿ CSS µÄÇé¿öÏÂÊÇÎÞ·¨ÊµÏֵġ£

365betÌåÓýÔÚÏßÃÇÎÞ·¨Í¨¹ý CSS È¥Åжϵ±Ç°ÔªËس¤¶ÈÊÇ·ñ´óÓÚ¸¸ÔªËس¤¶ÈÔÙÑ¡ÔñÐԵĽøÐж¯»­¡£±Ï¾¹ CSS Ö»ÊǸºÔðÑùʽ£¬²»¿ØÖÆÐÐΪ¡£365betÌåÓýÔÚÏßʵ¼ÊʹÓÃÖУ¬¿ÉÄÜ»¹ÊÇÐèÒª½èÖú JavaScript ¼òµ¥Åжϣ¬È»ºóͨ¹ýÒ»¸ö class ½øÐпØÖÆ¡£

2. ¶¯»­ÉÁ˸

ÔÚ¸¸ÈÝÆ÷²»¶¨¿í¶ÈµÄÇé¿öÏ£¬ÓÉÓÚÐèҪͬʱ¶ÔÁ½¸öÊôÐÔ½øÐж¯»­£¬²¢ÇÒλÒƵķ½ÏòÊÇÏà·´µÄ£¬365betÌåÓýÔÚÏ߶¯»­¿´ÉÏÈ¥»áÓÐÒ»µãÉÁ˸¡£Õâ¸öÔÝʱûÓÐÕÒµ½ÌرðºÃµÄ½â¾ö·½°¸¡£

 

×îºó

ºÃÁË£¬365betÌåÓýÔÚÏßµ½´Ë½áÊø£¬Ï£Íû¶ÔÄãÓаïÖú :)

¸ü¶à¾«²Ê CSS ¼¼ÊõÎÄÕ»ã×ÜÔÚ365betÌåÓýÔÚÏߵĠGithub -- iCSS £¬³ÖÐø¸üУ¬»¶Ó­µã¸ö star ¶©ÔÄÊղء£

Èç¹û»¹ÓÐʲôÒÉÎÊ»òÕß½¨Ò飬¿ÉÒÔ¶à¶à½»Á÷£¬Ô­´´ÎÄÕ£¬ÎıÊÓÐÏÞ£¬²ÅÊèѧdz£¬ÎÄÖÐÈôÓв»ÕýÖ®´¦£¬ÍòÍû¸æÖª¡£