主要知識點(diǎn):

linear-gradient
animation
background-clip:text

純css實(shí)現(xiàn)類似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;
            }
        } 

demo 請?jiān)赾hrome下預(yù)覽（未寫兼容性）