您的位置：首页 > Web前端 > CSS

HTML+CSS实现流光按钮

2020-06-04 06:11 169 查看

流光按钮

HTML
CSS
知识点
1、transform: translate(-50%,-50%);
2、text-transform: uppercase;
3、filter

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="javascript:;">Hunter</a>
</body>
</html>

CSS

*{
margin: 0px;
padding: 0px;
}
body{
background: #000;
}
a{
/* 取消a标签的下划线 */
text-decoration: none;
position: absolute;
left: 50%;
top: 50%;
/* 不用关心宽高多少 */
transform: translate(-50%,-50%);
font-size: 24px;
/* 设置渐变的颜色 */
background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
/* 设置背景大小400% */
background-size: 400%;
width: 25rem;
height: 6.25rem;
color: #fff;
text-align: center;
line-height: 6.25rem;
/* 设置英文为大写显示 */
text-transform: uppercase;
border-radius: 3.125rem;
}
/*运用伪元素 设置图层，出现荧光 */
a::before{
content: "";
/*设置伪元素的位置*/
position: absolute;
left: -0.3125rem;
right: -0.3125rem;
top: -0.3125rem;
bottom: -0.3125rem;
background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
background-size: 400%;
border-radius: 3.125rem;
/*设置滤镜*/
filter: blur(1.25rem);
z-index: -1;
}
/* 鼠标移动上去后伪元素开始动画效果 */
a:hover::before{
animation: sun 8s infinite;
}
a:hover{
animation: sun 8s infinite;
}
@keyframes sun{
to{background-position: -400% 0;}
}

知识点

1、transform: translate(-50%,-50%);

translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。
当使用：top: 50%;left: 50%;，是以左上角为原点，故不处于中心位置
translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。

2、text-transform: uppercase;

text-transform 属性控制文本的大小写

3、filter

filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。
用法其一：
blur(px) 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；

教程来源于bilibiliup主码小渣，感觉很酷炫收藏一下。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航