给li标签增加动画效果:流光背景


发布时间:2021-02-16 17:30    作者: 晖哥哥   已过去:2 月,4 周   阅读总量:240 已被赞:0


流光效果实现过程:

1.为需要的li添加一个自建类名:如:active_1

<ul class="list-group mt-5 ">
   <li class="list-group-item mt-2 w-50 text-center active_1 "> <a href="/">网站首页</a> </li>
   <li class="list-group-item  mt-2 w-75 text-center active_1"><a href="{% url 'blog:index' %}">python/django文章</a></li>
   <li class="list-group-item  mt-2 text-center active_1"><a href="http://www.hui2017.top/blog/p/2/">精选教程</a></li>
   <li class="list-group-item  mt-2 w-75 text-center active_1"><a href="{% url 'blog:email_sub' %}">订阅文章</a></li>
   <li class="list-group-item  mt-2 w-50 text-center active_1"><a href="{% url 'comment:lyxx_list' %}">给我留言</a></li>
</ul>

2.在首页css里为这个自制类写样式

     2.1将li 下的a标签字体颜色设置为黑色

/* 将li 下的a标签字体颜色设置为黑色 */
.active_1 a {
   color: #000;
   z-index: 1;
}

 2.2当该类被鼠标移动到时字体变白色

/*当该类被鼠标移动到时字体变白色*/
.active_1:hover a {
   color: #fff;
   z-index: 1;
}

2.3 设置动画 ,取名叫sun

 
/* 设置动画 ,取名叫sun*/
@keyframes sun{
   100%{
      background-position: -400% 0;
   }

}
  

3.当鼠标移动到li上的时候 执行动画

/* 当鼠标移动到li上的时候 执行动画 */
.active_1:hover{
   animation: sun 8s infinite;/* 执行时常8s,循环执行 */
   /* 设置文字背景颜色为4个组合色 */
   background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
   /* 拉伸背景色 */
   background-size: 400%;
}

 4.效果见我首页

点赞

0




登陆后方可评论