css - 翘边阴影 + css3遮罩mask动画

学习文献
张鑫旭-CSS遮罩CSS3 mask/masks详细介绍	CSS遮罩mask-博客
	图片转换成svg格式

mask遮罩

.tabbar-box {
    padding: 60px 0;
}
.tabbar-box .tabbar-list {
    margin: 0;
    font-size: 0;
}
.tabbar-box .tabbar-list li {
    display: inline-block;
    width: 25%;
    font-size: 18px;
    text-align: center;
}
/* --- 分割线 --- */
.tabbar-box .tabbar-list li span {
    display: inline-block;
    width: 100px;
    height: 8px;
    background-image: linear-gradient(100grad,#6f94f0,#50c1f3);
    -webkit-mask: url('https://www.sensorsdata.cn/assets/img/arrow_bcc2363.svg');    
    mask: url('https://www.sensorsdata.cn/assets/img/arrow_bcc2363.svg');
    animation: move-arrows .6s linear infinite;
}

/* 背景动
@keyframes move-arrows {
    0%{
        mask-position: 0;
    }
    100%{
        mask-position: 100px 0;
    }
} */

@keyframes move-arrows {
    0%{
        -webkit-mask-position: 0;
                mask-position: 0;
    }
    100%{
        -webkit-mask-position: 20px 0;
                mask-position: 20px 0;
    }
}

<div class="tabbar-box">
    <article>
        <ul class="tabbar-list">
            <li><a class="tabbar-list-info" href="javascript:;">多维数据分析</a></li>
            <li><a class="tabbar-list-info" href="javascript:;">多维数据分析</a></li>
            <li><a class="tabbar-list-info" href="javascript:;">多维数据分析</a></li>
            <li><a class="tabbar-list-info" href="javascript:;">多维数据分析</a><span></span></li>
        </ul>
    </article>
</div>

---

翘边阴影

<ul>
	<li><img src="images/01.jpg"/></li>
	<li><img src="images/01.jpg"/></li>
</ul>

/* css: */
	li {
		position: relative;
		float: left;
		width: 500px;
		margin-right: 30px;
		background: #fff;
		border-radius: 10px;
	}
	li:before {
		content: '';
		position: absolute;
		left: 27px;
		bottom: 21px;
		z-index: -1;
		width: 90%;
		height: 80%;
		background: #fff;
		box-shadow: 0 8px 30px 5px rgba(0,0,0,.6); //5px颜色加深
		transform: skew(-10deg,-5deg);  // 菱形
	}
	li:after {
		content: '';
		position: absolute;
		right: 27px;
		bottom: 21px;
		z-index: -1;
		width: 90%;
		height: 80%;
		background: #fff;
		box-shadow: 0 8px 30px 5px rgba(0,0,0,.6);
		transform: skew(10deg,5deg);
	}
	li:nth-op-type(2) {
		margin-right: 0;
	}
	img {
		width: 460px;
		height: 276px;
		padding: 20px;
		vertical-align: top;  // 消除图片间的小缝隙
	}