私たちが普段、宝くじやイベントコンテンツのページを見ると、ユーザーのクリックを視覚的に誘導するためにボタンが光る演出が施されているのをよく見かけますが、この効果は主にCSS3のアニメーション効果を利用して実現されています。要素の不透明度、および対応するボタンのグラデーションを設定するためのグラデーションのストレッチ。
効果は次のとおりです。
css3 で光るボタン効果を実現
背景画像: 線形グラデーション(右下へ、#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>