我们先来看看效果的实现
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%;
background-image: linear-gradient(60deg,transparent,transparent,#FFF,transparent,transparent);
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如何改变 |