问题描述
通常我们在HTML表单中使用button元素,是通过<button>标签定义一个按钮,再在button元素内部来放置内容,动态发光按钮原理类似。动态发光按钮是通过CSS工具使按钮呈现颜色渐变效果,最后引入JavaScript使得按钮发光的一种效果。
解决方案
制作动态发光按钮时,要注意以下细节:
使用background: linear-gradient标签来设置按钮颜色的渐变效果。
制作过程:
(1)设置页面背景,使用背景图片填充网页。使图片的高度height:100vh;让网页高度撑满,background标签后面加上no-repeat让背景不重复,使用background-size: cover;把背景图像扩展至足够大,让背景图像完全覆盖背景区域。
* {
padding: 0;
margin: 0;
}
body {
height: 100vh; /*让高度页面撑满*/
background: url(fg1.jpg) no-repeat;
background-size: cover;
}
ul {
list-style: none;
}
button {
outline: none;
border: none;
}
(2)创建一个容器class="firefly"的按钮,并为它添加CSS效果。
.firefly {
width: 180px; /*宽度*/
height: 60px; /*高度*/
position: absolute; /*绝对定位*/
top: 50%;/*网页顶部距离*/
left: 50%;/*网页左边距离*/
transform: translate(-50%, -50%);/*实现水平垂直居中*/
background: linear-gradient(to right, #55c3a0 10%, #f7d66e);/*background-images:linear-gradient(位置,颜色1,颜色2…颜色n);*/
border-radius: 40px;/*设置圆角*/
opacity: .88;/*透明程度*/
cursor: pointer;/*光标呈现为指示链接的指针(一只手)*/
transition: 1s;/*平滑过渡的时间*/
}
.firefly:hover { /*鼠标移上按钮时*/
box-shadow: 0 0 10px #B4FFB4; /*阴影大小,颜色*/
}
.firefly p {
line-height: 60px; /*行高:与高度相同时,文字呈现在按钮中心*/
font-size: 22px;
color: #e4e4d5;
font-family: firefly;
opacity: .88;
}
(3)为按钮设置发光内边框和发光气泡点。
<div><!--气泡-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
.lightning {
width: 95%;
height: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 40px;
transition: .8s;
overflow: hidden;/*隐藏溢出,清除浮动*/
}
.firefly:hover .lightning {
box-shadow: 0 0 4px #B4FFB4 inset;/*鼠标上移时,按钮内边框的大小颜色*/
}
.lightning ul {
opacity: 0;
transition: .8s;
}
.firefly:hover ul {
opacity: .8;
}
.lightning ul li { /*气泡*/
width: 5px;
height: 5px;
background-color: #91FA91;/*气泡颜色*/
position: absolute;
bottom: 10%;/*距按钮底部距离*/
border-radius: 50%;
opacity: .6;
animation: fireflymove infinite linear;/*动画:动画名称 间隔时间 动画的速度曲线*/
}
@keyframes fireflymove {/*设置动画效果*/
100% {
bottom: 100%; /*要实现的css样式*/
}
}
(4)引入JavaScript,为按钮内气泡设置不同的高低位置和运行速度。
<script>
var lgh = $('.lightning li').length;
$('.lightning li').each(function(i) {
$(this).css({
left: i * (100/lgh) + '%',
bottom: randomNum(-20, 10) + '%', //为气泡设置不同高度
animationDuration: randomNum(1, 5) + 's'//动画
});
});
// 随机数方法:
function randomNum(max, min) {
var num = Math.floor(Math.random() * (max-min+1) + min);
return num;
}
</script>
效果图:
图1
图2
结语
本篇文章中用到的前端效果是通过网上视频教学来完成的。其中的重点是用@keyframes和animation结合的动画效果以及其中的JavaScript代码,如有错误还请指正。
END