学习文献 | |
---|---|
张鑫旭-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; // 消除图片间的小缝隙
}