蚂蚁线-css(3)

主要知识点:

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;
            }
        } 

demo 请在chrome下预览（未写兼容性）