正文

学会UI动效，从这10个实用实例开始

/0 浏览量
0923

在数字时代，用户界面（UI）动效已经成为提升用户体验的关键因素。动效不仅能够使界面更加生动有趣，还能帮助用户更好地理解界面元素的功能和状态。以下是从基础到进阶的10个实用UI动效实例，帮助你掌握动效设计技巧。

实例1：按钮点击效果

主题句

按钮点击效果是UI动效中最基础也是最重要的部分，它直接影响用户的操作体验。

详细说明

  • 代码示例： 
    
<button onclick="buttonClick()">Click Me!</button>
<script>
function buttonClick() {
  alert('Button clicked!');
  document.getElementById('button').style.backgroundColor = 'blue';
}
</script>
  • 实现效果：当用户点击按钮时，按钮背景颜色变为蓝色，并弹出提示信息。

实例2：加载动画

主题句

加载动画能够缓解用户等待时的焦虑，提升应用的整体质感。

详细说明

  • 代码示例： 
    
<div id="loading"></div>
<script>
function showLoading() {
  var loading = document.getElementById('loading');
  loading.innerHTML = '<img src="loading.gif" alt="Loading...">';
}
</script>
  • 实现效果：在页面加载时，显示一个加载动画。

实例3：滚动条动画

主题句

滚动条动画可以提升用户的视觉体验，使其更加关注页面内容。

详细说明

  • 代码示例： 
    
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
  • 实现效果：自定义滚动条的样式和颜色。

实例4：卡片翻转效果

主题句

卡片翻转效果可以增加界面的趣味性，同时展示更多内容。

详细说明

  • 代码示例： 
    
<div class="card">
<div class="card-inner">
  <div class="card-front">Front</div>
  <div class="card-back">Back</div>
</div>
</div>
<style>
.card {
  width: 200px;
  height: 200px;
  perspective: 1000px;
}
.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}
.card-front, .card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
}
.card-front {
  background-color: #f00;
}
.card-back {
  background-color: #0f0;
  transform: rotateY(180deg);
}
</style>
  • 实现效果：点击卡片时，卡片翻转显示背面内容。

实例5：下拉菜单动画

主题句

下拉菜单动画可以使界面更加流畅，提升用户体验。

详细说明

  • 代码示例： 
    
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content" id="myDropdown">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</div>
</div>
<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
</style>
<script>
document.querySelector('.dropbtn').addEventListener('click', function() {
  document.getElementById('myDropdown').classList.toggle('show');
});
</script>
  • 实现效果：点击下拉按钮时，显示或隐藏下拉菜单。

实例6：轮播图动画

主题句

轮播图动画可以展示更多内容，提升页面视觉效果。

详细说明

  • 代码示例： 
    
<div class="slider">
<div class="slide">
  <img src="image1.jpg" alt="Image 1">
</div>
<div class="slide">
  <img src="image2.jpg" alt="Image 2">
</div>
<div class="slide">
  <img src="image3.jpg" alt="Image 3">
</div>
</div>
<style>
.slider {
  position: relative;
  width: 100%;
  margin: auto;
}
.slide {
  display: none;
  width: 100%;
}
.slide img {
  width: 100%;
  height: auto;
}
</style>
<script>
var slides = document.querySelectorAll('.slide');
var currentSlide = 0;
function showSlide(index) {
  slides[currentSlide].style.display = 'none';
  currentSlide = (index + slides.length) % slides.length;
  slides[currentSlide].style.display = 'block';
}
setInterval(function() {
  showSlide(currentSlide += 1);
}, 3000);
</script>
  • 实现效果：自动轮播图片，每3秒切换一张。

实例7：搜索框动画

主题句

搜索框动画可以提升用户体验，使其更加关注搜索功能。

详细说明

  • 代码示例： 
    
<div class="search-box">
<input type="text" placeholder="Search...">
<button type="submit">Search</button>
</div>
<style>
.search-box {
  position: relative;
  width: 300px;
  margin: auto;
}
.search-box input[type="text"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.search-box button {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border: none;
  background-color: #f00;
  color: white;
  padding: 10px;
  border-radius: 5px;
}
</style>
  • 实现效果：点击搜索按钮时，按钮背景颜色变为红色。

实例8：进度条动画

主题句

进度条动画可以直观地展示任务进度，提升用户对应用的信任度。

详细说明

  • 代码示例： 
    
<div class="progress-bar">
<div class="progress" style="width: 0%;"></div>
</div>
<style>
.progress-bar {
  width: 100%;
  background-color: #ccc;
}
.progress {
  width: 0%;
  height: 20px;
  background-color: #f00;
  text-align: center;
  line-height: 20px;
  color: white;
}
</style>
<script>
var progress = document.querySelector('.progress');
var width = 0;
var id = setInterval(frame, 10);
function frame() {
  if (width >= 100) {
    clearInterval(id);
  } else {
    width++;
    progress.style.width = width + '%';
    progress.textContent = width * 1  + '%';
  }
}
</script>
  • 实现效果：进度条逐渐填充，显示进度百分比。

实例9：弹出框动画

主题句

弹出框动画可以提升用户体验，使其更加关注弹出内容。

详细说明

  • 代码示例： 
    
<div class="popup">
<div class="popup-content">
  <span class="close">&times;</span>
  <p>Popup content goes here.</p>
</div>
</div>
<style>
.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: none;
}
.popup-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 20px;
  width: 80%;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.close {
  position: absolute;
  right: 15px;
  top: 15px;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}
</style>
<script>
var popup = document.querySelector('.popup');
var closeBtn = document.querySelector('.close');
closeBtn.addEventListener('click', function() {
  popup.style.display = 'none';
});
</script>
  • 实现效果：点击弹出框关闭按钮时，弹出框消失。

实例10：地图缩放动画

主题句

地图缩放动画可以提升地图应用的交互体验。

详细说明

  • 代码示例： 
    
<div id="map"></div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '© OpenStreetMap'
}).addTo(map);
var marker = L.marker([51.5, -0.09]).addTo(map);
marker.bindPopup('A pretty CSS3 popup.<br>Check out this <a href="http://www.mapbox.com">Mapbox</a> map.');
map.on('zoomend', function() {
  if (map.getZoom() > 15) {
    map.setZoom(15);
  }
});
</script>
  • 实现效果：当用户放大地图时，限制最大缩放级别为15。

通过以上10个实用UI动效实例，相信你已经对动效设计有了更深入的了解。在实际项目中，根据需求选择合适的动效，可以提升用户体验，让你的应用更具竞争力。

-- 展开阅读全文 --