前端笔记

• 1. 隐藏-悬浮显示，淡入淡出效果
• 2. 隐藏-悬浮显示，淡入淡出效果

1. 隐藏-悬浮显示，淡入淡出效果

<div class="box1">
  <div class="box2">
    asdasd
  </div>
</div>
<style>
  .box1 {
    overflow: hidden;
    width: 100px;
    height: 100px;
  }
  .box2 {
    position: absolute;
    width: 100%;
    height: 50%;

    background: black;
    animation-name: opt-out; //动画名
    animation-duration: 0.5s; /* 5s表示执行动画的时间，0或不写则无动画效果 */
    animation-fill-mode: forwards; //动画结束后不复原
  }
  .box2:hover .hover-opt {
    animation-name: opt-in;
    animation-duration: 0.5s; /* 5s表示执行动画的时间，0或不写则无动画效果 */
    animation-fill-mode: forwards;
  }
  @keyframes opt-in /* 对应animation-name，里面为执行的动画*/ {
    from {
      bottom: -50%;
      opacity: 0;
    } /*执行动画的初始位置*/
    to {
      bottom: 0;
      opacity: 0.5;
    } /*动画结束位置*/
  }
  @keyframes opt-out /* 对应animation-name，里面为执行的动画*/ {
    from {
      bottom: 0;
      opacity: 0.5;
    } /*执行动画的初始位置*/
    to {
      bottom: -50%;
      opacity: 0;
    } /*动画结束位置*/
  }
</style>

2. 隐藏-悬浮显示，淡入淡出效果

<div class="scrool-content">
  <span class="scrool-text">
    南京地区发生180级大地震，请快点跑路
  </span>
</div>
<style>
  .scrool-content {
    width: 250px;
    overflow: hidden;
    .scrool-text {
      position: relative;
      white-space: nowrap;
      animation: scroll 10s linear infinite;
    }
    @keyframes scroll {
      0% {
        left: 100%;
      }
      100% {
        left: -100%;
      }
    }
  }
</style>