提升网页动效体验，让你的网站更加生动

在当今互联网时代，网站已经成为企业展示自己的重要窗口。为了更好的吸引用户，提升用户体验，网站的设计越来越注重动效，有效的动效能够大大提高用户留存率。下面我们将从多个方面详细阐述如何用动效提升网页体验。

一、 网站头部动效的应用

网站头部是网站整体设计的重点，具有很多的设计技巧。头部的设计常用的动效有光影动效、背景色渐变动效、菜单栏下拉动效等等。通过这些动效，能够增加网站的时尚感与视觉魅力，让用户更愿意停留在网站首页上。

1. 光影动效

<style>
  .shinning {
    position: relative;
  }
  .shinning:before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%, rgba(0,0,0,0.75) 70%);
    top: -50%;
    left: -50%;
    opacity: 0;
    z-index: 0;
    animation: shine 5s infinite;
  }
  @keyframes shine {
    0% {
      transform: rotate(0deg);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: rotate(360deg);
      opacity: 0;
    }
  }
</style>

<div class="shinning">
  <img src="logo.png"/>
</div>

这是一个光影动效的代码示例，使用radial-gradient背景渐变实现光影效果，通过transform和opacity属性配合@keyframes动画实现了光影的循环闪烁效果。该效果常用于网站logo周围，能够增加品牌的时尚感与艺术感。

2. 菜单栏下拉动效

<style>
  .nav {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    background: #333;
    color: #fff;
    font-size: 16px;
  }
  .nav:hover .submenu {
    opacity: 1;
    transform: translateY(0);
  }
  .submenu {
    position: absolute;
    top: 100%;
    left: 0%;
    width: 180px;
    background: #333;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.5s, transform 0.5s;
  }
  .submenu a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #fff;
  }
  .submenu a:hover {
    background: #666;
  }
</style>

<div class="nav">
  Hover Me
  <div class="submenu">
    <a href="#">Submenu 1</a>
    <a href="#">Submenu 2</a>
    <a href="#">Submenu 3</a>
  </div>
</div>

上面这个下拉菜单的代码示例，使用flex布局实现菜单栏的水平居中，在:hover状态下，通过opacity和transform属性渐变显示下拉菜单。通过transition属性实现动效的缓动效果，使动效更加自然，舒适。

二、 按钮动效的应用

按钮是网页交互的主要元素，而动效对于按钮的交互与反馈至关重要。如何给按钮加入有趣的动效？下面我们将分享几个实用的按钮动效。

1. 径向呼吸动效按钮

<style>
  .btn {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background: #333;
    outline: none;
    border: none;
    cursor: pointer;
    transition: transform 0.3s;
    overflow: hidden;
  }
  .btn:hover {
    transform: scale(1.1);
  }
  .btn:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(#fff 15%, transparent 16%);
    background-size: 1500% 1500%;
    top: 0;
    left: 0;
    opacity: 0;
    animation: btn-animate 3s linear infinite;
  }
  @keyframes btn-animate {
    0% {
      background-position: 0 0;
      opacity: 0;
    }
    100% {
      background-position: 300% 0;
      opacity: 1;
    }
  }
</style>

<button class="btn">Click Me</button>

这个代码示例实现了一个径向呼吸动效按钮，通过radial-gradient背景渐变实现呼吸效果，同样使用transform属性在:hover状态下增大按钮的缩放比例。通过:before伪类给按钮添加呼吸效果的背景渐变，使用animation属性循环播放呼吸动画。

2. 旋转缩放动效按钮

<style>
  .btn {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background: #333;
    outline: none;
    border: none;
    cursor: pointer;
    overflow: hidden;
  }
  .btn:hover span {
    animation: btn-rotate 1s forwards;
  }
  .btn span {
    display: inline-block;
    transform: scale(1);
    position: relative;
    z-index: 2;
  }
  .btn span:before,
  .btn span:after {
    content: "";
    display: block;
    position: absolute;
    width: 60%;
    height: 2px;
    background-color: #fff;
    transform-origin: center;
    transition: transform 0.3s;
  }
  .btn span:before {
    top: 0;
    left: 50%;
    margin-left: -30%;
    transform: rotate(0deg);
  }
  .btn span:after {
    bottom: 0;
    left: 50%;
    margin-left: -30%;
    transform: rotate(0deg);
  }
  @keyframes btn-rotate {
    0% {
      transform: scale(1) rotate(0deg);
    }
    50% {
      transform: scale(0.8) rotate(720deg);
    }
    100% {
      transform: scale(1) rotate(1080deg);
    }
  }
</style>

<button class="btn"><span>Click Me</span></button>

这个按钮动效通过transform和animation属性配合实现。在按钮:hover状态下，触发rotate动画，使按钮span元素绕中心轴旋转。通过:before和:after伪类给按钮添加两条垂直的下划线，通过transform-origin属性设置旋转中心。通过@skeyframes和transform属性实现按钮的旋转动画。

三、 页面元素的出现动效

页面元素的出现动效能够增加网页的动态效果，使得元素的出现不再单调无味，下面我们将分享几个简单实用的页面元素出现动效。

1. 渐进渐出动效

<style>
  .fade-in {
    opacity: 0;
    transform: translateY(25%);
    transition: opacity 0.5s, transform 0.5s;
  }
  .fade-in.show {
    opacity: 1;
    transform: translateY(0);
  }
</style>

<div class="fade-in">Content</div>

<script>
  // 通过js添加show类名，实现元素的出现
  document.querySelector('.fade-in').classList.add('show');
</script>

使用opacity和transform属性实现元素的渐进渐出动效，使用transition属性使动效具有渐变效果。在js中通过classList.add方法添加show类名，实现元素出现动效。

2. 下滑动效

<style>
  .slide-down {
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.5s, transform 0.5s;
  }
  .slide-down.show {
    opacity: 1;
    transform: translateY(0);
  }
</style>

<div class="slide-down">Content</div>

<script>
  // 通过js添加show类名，实现元素的出现
  document.querySelector('.slide-down').classList.add('show');
</script>

这个下滑动效与上面的渐进渐出动效类似，同样使用opacity和transform属性实现元素的滑入滑出动效，通过transition属性使动效具有缓动效果。

结语

以上是我们简单分享的几个用动效提升网页体验的实例。动效是网页设计的重要组成部分，通过动效的运用可以大大提升网站的视觉和交互效果，从而提高用户留存率。建议在实现动效时适当考虑性能问题，以保证在不影响用户体验的前提下实现优雅的动效。