css3 线性渐变文字光影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #000;
}
div {
user-select: none;
width: 610px;
border: 1px solid red;
box-sizing: border-box;
margin: 100px auto;
text-align: center;
font-size: 100px;
line-height: 150px;
font-weight: bolder;
background: linear-gradient(-45deg, transparent 100px, white 150px, white 180px, transparent 220px);
/*background-color: #000000;*/
/*因为继承了body的颜色所以不需要写自己的背景色*/
background-position: -450px 0;
/*线性渐变相当于是背景图片可以定位*/
background-repeat: no-repeat;
/*不平铺*/
color: rgba(255,255,255,0.3);
/*改变问题透明度*/
-webkit-background-clip: text;
/*私有属性,将背景色剪切到文字大小的区域*/
transition: all 4s;
}
div:hover{
background-position: 610px 0;
}
</style>
</head>
<body>
<div>我是一段文字</div>
</body>
</html>
