效果实现
其他
2020-01-25 16:35:17
阅读次数: 0
- box-shadow
-
box-shadow: 5px 5px 10px 0 rgba(0,0,0,.2);
box-shadow: inset 5px 5px 10px 0 rgba(0,0,0,.2);
- 左右偏移 上下偏移 模糊大小 阴影大小 颜色
- text-shadow
- border-radius
- background
- 实现图标切换
.i{
width: 20px;
height: 20px;
background: url(./background.png) no-repeat;
background-size: 20px 40px;
transition: background-position .4s;
}
.i:hover{
background-position: 0 -20px;
}
- 需将两个图标放在一起
- transition:实现切换的动画效果
- .4s:时间
-
background-size: contain;
- contain:保持图片原有比例不变,会有空白
- cover:图片覆盖整个区域
- clip-path
- 裁剪
clip-path: inset(100px 50px);
clip-path: circle(50px at 100px 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 10% 10%, 40px 10px);
- inset 向内裁剪 上下裁剪像素 左右裁剪像素
- circle 圆形裁剪 半径 at 左右偏移 上下偏移
- polygon 多边形裁剪
- 裁剪都可以用 百分比和像素
- 变化裁剪
clip-path: circle(50px at 100px 100px);
.container:hover{
clip-path: circle(80px at 100px 100px);
}
- svg
clip-path: url(#clipPath);
<svg>
<defs>
<clipPath id="clipPath">
<!-- <circle cx="60" cy="60" r="50" fill="#34538b" /> -->
<polygon stroke="#979797" points="0.4921875 81.2070313 92.640625 81.2070313 121.601562 0.21875 153.648437 81.2070313 247.390625 80.7734375 173.394531 140.496094 200.308594 227.09375 121.601562 172.71875 53.4960937 227.09375 80.859375 140.496094"></polygon>
</clipPath>
</defs>
</svg>
发布了20 篇原创文章 ·
获赞 0 ·
访问量 271
转载自blog.csdn.net/ChristWTF/article/details/103929972