主要知识点:
linear-gradient
animation
background-clip:text
纯css实现类似ps中的蚂蚁线
效果图片
myx.png
html文件
<div class="item-box"><div class="text">蚂蚁线</div></div>
css文件
.item-box {
width: 400px; height: 200px;line-height: 200px;text-align: center;margin:auto;
border: 1px solid #ccc;
background: linear-gradient(#efefef,#ccc) padding-box,
linear-gradient(135deg, rgba(0, 0, 0, 1) 25%, transparent 25%, transparent 50%, rgba(1, 1, 1, 1) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-size:100% 100%, 8px 8px;
animation: bg 1s linear infinite;
}
.item-box:hover{
cursor: pointer;
border: 1px dashed transparent;
}
.text{
height: 100%;
font-weight: bold;
-webkit-text-stroke: 2px #999;
color: #999;
font-size: 90px;
background-image: linear-gradient(135deg, rgba(0, 0, 0, 1) 25%, transparent 25%, transparent 50%, rgba(1, 1, 1, 1) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-size: 8px 8px;
animation: bg 1s linear infinite;
-webkit-background-clip: text;
}
.text:hover{
-webkit-text-stroke: 2px transparent;
}
@keyframes bg {
0% {
background-position: 0 0;
}
100% {
background-position: 8px 0;
}
}
