响应式设计中如何使用 CSS3 实现动画效果？-JavaScript中文网-JavaScript教程资源分享门户

当我们在设计响应式网站时，动画效果可以让网站更具交互性和吸引力，提高用户体验。而 CSS3 则是实现动画效果最常使用的一种技术。

在 CSS3 中，我们可以使用 @keyframes 规则来定义关键帧动画。在这个规则中，我们可以定义元素在不同时间点的样式，浏览器会自动计算中间的样式变换过程，从而实现动画效果。

接下来，我们将介绍如何使用 CSS3 实现几个常见的动画效果。

翻转动画

下面这个例子实现了一个点击按钮时，元素在 X 轴上翻转 180 度后再翻转回来的动画效果。

// www.javascriptcn.com code example
<div class="flip-container">
  <div class="flipper">
    <div class="front">
      正面
    </div>
    <div class="back">
      背面
    </div>
  </div>
</div>
<button id="flip-btn">翻转</button>

// www.javascriptcn.com code example
.flip-container {
  perspective: 1000px; /* 设置透视距离 */
}
.flip-container .flipper {
  transition: transform 0.6s; /* 定义变换的过渡效果 */
  transform-style: preserve-3d; /* 保持 3D 效果 */
}
.flip-container .front, .flip-container .back {
  backface-visibility: hidden; /* 隐藏背面，避免翻转后出现黑色 */
  position: absolute;
  top: 0;
  left: 0;
}
.flip-container .front {
  z-index: 2;
}
.flip-container .back {
  transform: rotateX(180deg); /* 设置 x 轴上的旋转 */
}
.flip-container.flipped .flipper {
  transform: rotateX(180deg); /* 点击按钮后执行旋转效果 */
}

接下来，我们需要用 JavaScript 来实现点击按钮后翻转元素的效果。

var flipBtn = document.getElementById('flip-btn');
var flipContainer = document.querySelector('.flip-container');
flipBtn.addEventListener('click', function() {
  flipContainer.classList.toggle('flipped');
});

模态框动画

模态框是经常用到的交互元素之一，下面这个例子可以实现模态框弹出时从下方滑入页面，关闭时回到底部的效果。

// www.javascriptcn.com code example
<div class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <h3>模态框标题</h3>
      <button class="close-btn">×</button>
    </div>
    <div class="modal-body">
      <p>这是一个模态框。</p>
    </div>
  </div>
</div>
<button id="modal-btn">打开模态框</button>

// www.javascriptcn.com code example
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}
.modal-content {
  position: relative;
  margin: auto;
  padding: 0;
  width: 80%;
  max-width: 600px;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 0px 5px #888888;
  animation-name: slide-in;
  animation-duration: 0.5s;
}
.modal-header, .modal-body {
  padding: 10px 20px;
}
.modal-header {
  background-color: #f1f1f1;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.modal-header h3 {
  margin-top: 0;
}
.close-btn {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 30px;
  font-weight: bold;
  color: #aaaaaa;
}
.close-btn:hover, .close-btn:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
}
.modal-body {
  min-height: 200px;
}
@keyframes slide-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0%);
  }
}
@keyframes slide-out {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(100%);
  }
}

而 JavaScript 部分，我们需要通过点击事件来控制模态框的显示和隐藏。

// www.javascriptcn.com code example
var modalBtn = document.getElementById('modal-btn');
var modal = document.querySelector('.modal');
var closeBtn = document.querySelector('.close-btn');
modalBtn.addEventListener('click', function() {
  modal.style.display = 'block';
});
closeBtn.addEventListener('click', function() {
  modal.style.display = 'none';
});
modal.addEventListener('click', function(event) {
  if (event.target === modal) {
    modal.style.display = 'none';
  }
});

展开菜单动画

在响应式设计中，常常需要使用展开菜单，下面这个例子实现了一个点击按钮时菜单从上往下展开，再次点击时菜单收回的动画效果。

// www.javascriptcn.com code example
<nav class="navbar">
  <button class="navbar-toggle">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <ul class="navbar-nav">
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
    <li><a href="#">菜单项4</a></li>
  </ul>
</nav>

// www.javascriptcn.com code example
.navbar {
  position: relative;
  height: 50px;
  background-color: #333333;
  color: #ffffff;
}
.navbar-toggle {
  position: absolute;
  top: 10px;
  right: 15px;
  height: 30px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}
.icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  margin: 5px 0;
  background-color: #ffffff;
  transition: transform 0.2s; /* 定义变换的过渡效果 */
}
.navbar-nav {
  display: none;
  position: absolute;
  top: 50px;
  right: 0;
  background-color: #333333;
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: right;
  animation-name: slide-down;
  animation-duration: 0.2s;
}
.navbar-nav li {
  display: inline-block;
  margin-left: 20px;
}
.navbar-nav a {
  display: block;
  color: #ffffff;
  text-decoration: none;
  padding: 10px;
}
.navbar-nav a:hover {
  background-color: #222222;
}
.navbar.active .navbar-nav {
  display: block;
}
.navbar.active .icon-bar:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 6px);
}
.navbar.active .icon-bar:nth-child(2) {
  opacity: 0;
}
.navbar.active .icon-bar:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}
@keyframes slide-down {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes slide-up {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0);
  }
}

而 JavaScript 部分，我们需要通过点击事件来控制展开菜单的效果。

var navbarToggle = document.querySelector('.navbar-toggle');
var navbar = document.querySelector('.navbar');
navbarToggle.addEventListener('click', function() {
  navbar.classList.toggle('active');
});

综上所述，使用 CSS3 实现动画效果可以大大提高响应式网站的用户体验。无论是翻转动画、模态框动画还是展开菜单动画，只要掌握了基本的 CSS3 动画属性和 JavaScript 控制方法，都可以轻松实现。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d68818a941bf7134c50693

响应式设计中如何使用 CSS3 实现动画效果？

翻转动画

模态框动画

展开菜单动画

接着读