在当今互联网时代,网站已经成为企业展示自己的重要窗口。为了更好的吸引用户,提升用户体验,网站的设计越来越注重动效,有效的动效能够大大提高用户留存率。下面我们将从多个方面详细阐述如何用动效提升网页体验。
一、 网站头部动效的应用
网站头部是网站整体设计的重点,具有很多的设计技巧。头部的设计常用的动效有光影动效、背景色渐变动效、菜单栏下拉动效等等。通过这些动效,能够增加网站的时尚感与视觉魅力,让用户更愿意停留在网站首页上。
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属性使动效具有缓动效果。
结语
以上是我们简单分享的几个用动效提升网页体验的实例。动效是网页设计的重要组成部分,通过动效的运用可以大大提升网站的视觉和交互效果,从而提高用户留存率。建议在实现动效时适当考虑性能问题,以保证在不影响用户体验的前提下实现优雅的动效。