transition 动画
<td class="ln"><pre class="de1">1 |
? ? ? ?
<td class="ln"><pre class="de1">1 |
? ? ? ?
? ? 向右 *{margin: 0;padding: 0} ul{ ? ? ? ? height: 60px; ? ? ? ? width: 800px; ? ? ? ? font-size: 0; ? ? ? ? position: relative; } ul .move{ ? ? position: absolute; ? ? border-top: 4px solid #E53C3C; ? ? left: 0; ? ? top: 57px; ? ? ? ? -webkit-transition: left 0.4s ease-in-out; ? ? -moz-transition: left 0.4s ease-in-out; ? ? transition: left 0.4s ease-in-out; } ul li:nth-child(1):hover~.move{ ? ? left: 0; } ul li:nth-child(2):hover~.move{ ? ? left: 20%; } ul li:nth-child(3):hover~.move{ ? ? left: 40%; } ul li:nth-child(4):hover~.move{ ? ? left: 60%; } ul li:nth-child(5):hover~.move{ ? ? left: 80%; } /*nth-of-type*/
? 颜色渐变 ul li{ ? ? display: inline-block; ? ? width: 20%; ? ? text-align: center; ? ? ? ? font-size: 50px ; ? ? -webkit-transition:color 0.4s ease-in-out; ? ? -moz-transition:color 0.4s ease-in-out; ? ? transition:color 0.4s ease-in-out; } ul li:hover{ ? ? color: #F04C57; }
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!