在平时看到抽奖,或者一些活动内容页面,我们经常会看到一些发光效果的按钮,视觉上引导用户去点击,这种效果主要是利用css3的动画效果去实现,关键帧放大元素尺寸和改变元素的不透明度,还有就是渐变拉伸去设置对应的按钮渐变。
效果如下:
css3实现发光按钮效果
background-image: linear-gradient(to bottom right, #ef1212, #ff9800)
@keyframes spread {
from {
width: 120px;
height: 120px;
opacity: 1
/* transform: scale(1); */
}
to {
width: 140px;
height: 140px;
opacity: 0;
/* transform: scale(1.5); */
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: relative;
}
.border {
width: 120px;
height: 120px;
background-color: #ff9800;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
animation: spread linear 1.5s infinite;
}
.border2 {
width: 120px;
height: 120px;
background-color: #ff9800;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
animation: spread2 linear 3s infinite;
}
.draw {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 18px;
font-weight: bolder;
color: #ffffff;
border-radius: 50px;
cursor: pointer;
/* position: absolute; */
/* left: 0;
top: 0;
right: 0;
bottom: 0; */
/* margin: 10px auto; */
position: fixed;
top: calc(50% - 50px);
left: calc(50% - 50px);
background-image: linear-gradient(to bottom right, #ef1212, #ff9800)
}
@keyframes spread {
from {
width: 120px;
height: 120px;
opacity: 1
/* transform: scale(1); */
}
to {
width: 140px;
height: 140px;
opacity: 0;
/* transform: scale(1.5); */
}
}
@keyframes spread {
from {
width: 120px;
height: 120px;
opacity: 1
/* transform: scale(1); */
}
to {
width: 140px;
height: 140px;
opacity: 0;
/* transform: scale(1.5); */
}
}
</style>
</head>
<body>
<div class="border">
</div>
<div class="border2">
</div>
<div class="draw">
参与抽奖
</div>
</body>
</html>