手写五种CSS 鼠标hover动画效果

「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」

前言

CSS3 支持强大的动画系统，在开发业务的时候，绘制一些动画，能让页面变得更加生动有趣，今天我们来写几种鼠标滑入的动画效果。

渐变绘制线条

首先看看效果图

分析与实现

我们的思路就是使用两个div分别绘制上下边框和左右边框，同时给予标题向右滑入、内容向上渐变显示的效果。具体代码：

<div class="effect1">
    <h2>绘制线条效果</h2>
    <p>通过缩放属性绘制边框线条</p>
    <div id="borderW"></div>
    <div id="borderH"></div>
</div>
<style>
h2,p,li,div{
    position: absolute;
    transition: all 0.5s;
  }
  .effect1{
    margin: 0 auto;
    width: 33.3%;
    height: 365px;
    overflow: hidden;
    position: relative;
  }
  /* 动画8 */
  .effect1 h2{
    left: 20%;
    top:20%;
    transform: translateX(-50px);
  }
  .effect1:hover h2{
    transform: translateX(0);
  }
  .effect1 p{
    left:25%;
    top:30%;
    transform: translateY(30px);
    opacity: 0;
  }
  .effect1:hover p{
    transform: translateY(0);
    opacity: 1;
  }
  .effect1 #borderW{
    width: 0;
    left:50%;
    height:70%;
    top:15%;
    border: 1px solid #000;
    border-left:0;
    border-right: 0;
  }
  .effect1:hover #borderW{
    left:10%;
    width: 80%;
    
  }
  .effect1 #borderH{
    width: 70%;
    height:80%;
    left:15%;
    top:10%;
    border:1px solid #000;
    border-top:0;
    border-bottom:0;
    transform: scale(1,0);
  }
  .effect1:hover #borderH{
    transform: scale(1,1);
  }
</style>

旋转飞入

定义一个边框，以旋转的方式进入到视角，效果图。

<div class="effect5">
  <h2>旋转飞入</h2>
  <p>通过旋转和位移</p>
  <div></div>
</div>
<style>
h2,p,li,div{
    position: absolute;
    transition: all 0.5s;
}
.effect5{
    margin: 0 auto;
    width: 33.3%;
    height: 365px;
    overflow: hidden;
    position: relative;
}
  /* 动画5 */
.effect5 h2{
    left:20%;
    top:20%;
    transform: translateX(-50px);
}
.effect5:hover h2{
    transform: translateX(0);
}
.effect5 p{
    left:25%;
    top:30%;
    transform: translateY(50px);
}
.effect5:hover p{
    transform: translateY(0);
}
.effect5 div{
    width: 70%;
    height:70%;
    left:15%;
    top:15%;
    border:2px solid #f66;
    transform:  translateY(-350px) rotate(0);
}
.effect5:hover div{
    transform:translateY(0) rotate(360deg) ;
}

</style>

扭曲飞入飞出

通过扭曲和位移，制作出飞入的效果。扭曲属性到达90度，元素就看不见了，就可以造成一种从无到有、有有到无的效果。

<div class="effect">
  <h2>扭曲飞入飞出</h2>
  <p>去通过扭曲和位移，制作出飞入的效果。扭曲属到达90度。元素就看不见了</p>
</div>
<style>
  h2,p,li,div{
    position: absolute;
    transition: all 0.5s;
  }
  .effect{
    margin: 0 auto;
    width: 33.3%;
    height: 365px;
    overflow: hidden;
    position: relative;
  }
  .effect h2{
    top:20%;
    left:10%;
    transform: skew(90deg);
  }
  .effect p{
    left:10%;top:30%;
    transform: skew(90deg);
  }
  .effect:hover h2,.effect:hover p{
    transform: skew(0);
  }
</style>

多行文字逐一飞入

多行文字通过从上到下的顺序逐一进入可视区。

<div class="effect">
  <ul >
    <li>多条图片简介文字</li>
    <li>逐一飞入动画</li>
    <li> 利用动画延时达到效果</li>
  </ul>
</div>
<style>
  h2,p,li,div{
    position: absolute;
    transition: all 0.5s;
  }
  .effect{
    margin: 0 auto;
    width: 33.3%;
    height: 365px;
    overflow: hidden;
    position: relative;
  }
.effect h2{
  top:20%;
  left:15%;
}
.effect ul li{
  background-color: #fff;
  color: #000;
}
.effect ul li:nth-child(1){
  top:45%;
  left:15%;
  transform: translateX(-200px);;
}
.effect ul li:nth-child(2){
  top:55%;
  left:15%;
  transition-delay: 0.2s;
  transform: translateX(-200px);;
}
.effect ul li:nth-child(3){
  top:65%;
  left:15%;
  transition-delay: 0.4s;
  transform: translateX(-300px);;
}
.effect:hover ul li{
  transform: translateX(0);
}
</style>

平移动画

这个比较简单

<div class="effect">
  <h2>平移动画</h2>
  <p>简单的平移动画</p>
</div>
<style>
h2,p,li,div{
position: absolute;
transition: all 0.5s;
}
.effect{
margin: 0 auto;
width: 33.3%;
height: 365px;
overflow: hidden;
position: relative;
}
.effect h2{
  left:10%;
  bottom:30%;
}
.effect p{
  left:10%;
  top:100%;
  color: #000;
}
.effect:hover h2{
  transform: translateY(-15px);
}
.effect:hover p{
  top:80%;
}
</style>