[100天挑战100个前端效果]第一天---闪光按钮

最新推荐文章于 2023-05-18 19:50:22 发布

钧桐

最新推荐文章于 2023-05-18 19:50:22 发布

阅读量270

点赞数

分类专栏： 100天挑战100个前端效果文章标签： html css3

本文链接：https://blog.csdn.net/qq_42136832/article/details/115030275

版权

100天挑战100个前端效果专栏收录该内容

25 篇文章 8 订阅

订阅专栏

闪光按钮

我们先来看看效果的实现

我们先来看看效果的实现

在这里插入图片描述

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一天</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <a href="#">闪亮按钮</a>
    <a href="#">闪亮按钮</a>
</body>
</html>

css代码

*{
    margin:0;
    padding: 0;
}
body{
    height: 100vh;
    width:100vw;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}
a{
    position: relative;
    padding: 12px 30px;
    margin: 30px;
    background-color: #4d385b;
    color: #FFF;
    text-decoration:none ;
    letter-spacing: 6px;
    border: 1px solid #130f36;
    border-radius: 12px;
    overflow:hidden;
}
a:nth-child(1):hover{
    background-color: #ff6659;
}
a:nth-child(2):hover{
    background-color: #762376;
}
a::before{
    position:absolute;
    content: '';
    top: 0;
    /* 默认溢出按钮可视区域 */
    left: -50%;
    width: 50%;
    height: 100%;
    /* 背景图使用linear-gradient方法生成60度的过度渐变 */
    background-image: linear-gradient(60deg,transparent,transparent,#FFF,transparent,transparent);
    /* 过度动画 left属性 0.5s */
    transition: left 0.5s;
}
a:hover::before{
    left:100%;

}

新学到的知识总结

标签	作用
margin	设置元素的外边距
padding	设置元素的内边距
vh	CSS中相对长度单位，表示相对视口高度（Viewport Height），1vh = 1% * 视口高度
vw	同上，为相对视口宽度
display:flex	Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
justify-content:center	项目位于容器的中心
alien-items	定义flex子项在flex容器的对齐方式
text-decoration	设置文本修饰
letter-spacing	设置字母间距
border	设置边框样式
border-radius	添加圆角边框
overflow	如果溢出元素，就裁剪掉
:nth-child(n)	属于父元素的第n个子元素
hover	选择鼠标指针浮动在其上的元素，并设置其样式
::before	创建一个伪元素，其将成为匹配选中的元素的第一个子元素。
linear-gradient()	线性渐变
transition	把鼠标指针放到 div 元素上,left从-50%到100%，即闪光动画
:hover::before	hover状态下的before如何改变

钧桐

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[100天挑战100个前端效果]第一天---闪光按钮

闪光按钮我们先来看看效果的实现html代码css代码新学到的知识总结我们先来看看效果的实现html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de
复制链接

扫一扫