css-collection

CSS-tricks
4.5k 词

异形描边

使用SVG，设置viewBox、preserveAspectRatio='none'以及子的stroke、vector-effect='non-scaling-stroke'，转为base64设置为background，实现居中描边。
然后使用同样参数但无stroke有fill的SVG作为mask，消除外描边以及其被裁掉显示不理想的部分。

1
2
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='100%25' height='100%25' viewBox='0 0 580 143' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' fill='none' stroke='%23ffdda8' stroke-width='16' vector-effect='non-scaling-stroke' d='M78.326,139.366 C90.716,141.505 110.433,142.093 128.617,141.603 C161.287,143.123 191.119,142.023 191.119,142.023 C199.272,141.661 207.342,140.962 215.218,139.794 C233.509,137.078 246.589,130.641 266.593,130.523 C286.547,130.404 307.471,133.340 326.052,136.268 C347.272,139.610 366.526,144.987 389.952,141.867 C402.565,140.184 411.399,135.390 424.221,133.877 C455.068,130.238 487.094,139.306 516.083,131.468 C539.635,125.099 575.920,123.253 579.668,96.961 C581.080,87.060 553.300,85.336 560.647,74.918 C570.860,60.409 573.683,51.126 565.480,36.318 C557.944,22.740 519.649,13.001 486.294,12.150 C464.255,11.593 422.791,18.529 400.278,17.590 C349.616,15.477 299.576,-10.015 247.899,4.539 C229.344,9.765 189.216,9.079 164.348,11.064 C113.602,15.111 83.247,-7.420 26.718,37.158 C17.866,44.147 29.597,66.499 23.706,73.743 C17.431,81.455 0.413,87.064 1.912,95.984 C3.846,107.557 -4.270,109.893 7.241,115.259 C18.753,120.625 21.389,129.544 78.326,139.366 Z'/%3E%3Cpath fill-rule='evenodd' fill='none' stroke='%23ba383f' stroke-width='10' vector-effect='non-scaling-stroke' d='M78.326,139.366 C90.716,141.505 110.433,142.093 128.617,141.603 C161.287,143.123 191.119,142.023 191.119,142.023 C199.272,141.661 207.342,140.962 215.218,139.794 C233.509,137.078 246.589,130.641 266.593,130.523 C286.547,130.404 307.471,133.340 326.052,136.268 C347.272,139.610 366.526,144.987 389.952,141.867 C402.565,140.184 411.399,135.390 424.221,133.877 C455.068,130.238 487.094,139.306 516.083,131.468 C539.635,125.099 575.920,123.253 579.668,96.961 C581.080,87.060 553.300,85.336 560.647,74.918 C570.860,60.409 573.683,51.126 565.480,36.318 C557.944,22.740 519.649,13.001 486.294,12.150 C464.255,11.593 422.791,18.529 400.278,17.590 C349.616,15.477 299.576,-10.015 247.899,4.539 C229.344,9.765 189.216,9.079 164.348,11.064 C113.602,15.111 83.247,-7.420 26.718,37.158 C17.866,44.147 29.597,66.499 23.706,73.743 C17.431,81.455 0.413,87.064 1.912,95.984 C3.846,107.557 -4.270,109.893 7.241,115.259 C18.753,120.625 21.389,129.544 78.326,139.366 Z'/%3E%3C/svg%3E");
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='100%25' height='100%25' viewBox='0 0 580 143' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' fill='%23f00' stroke='none' vector-effect='non-scaling-stroke' d='M78.326,139.366 C90.716,141.505 110.433,142.093 128.617,141.603 C161.287,143.123 191.119,142.023 191.119,142.023 C199.272,141.661 207.342,140.962 215.218,139.794 C233.509,137.078 246.589,130.641 266.593,130.523 C286.547,130.404 307.471,133.340 326.052,136.268 C347.272,139.610 366.526,144.987 389.952,141.867 C402.565,140.184 411.399,135.390 424.221,133.877 C455.068,130.238 487.094,139.306 516.083,131.468 C539.635,125.099 575.920,123.253 579.668,96.961 C581.080,87.060 553.300,85.336 560.647,74.918 C570.860,60.409 573.683,51.126 565.480,36.318 C557.944,22.740 519.649,13.001 486.294,12.150 C464.255,11.593 422.791,18.529 400.278,17.590 C349.616,15.477 299.576,-10.015 247.899,4.539 C229.344,9.765 189.216,9.079 164.348,11.064 C113.602,15.111 83.247,-7.420 26.718,37.158 C17.866,44.147 29.597,66.499 23.706,73.743 C17.431,81.455 0.413,87.064 1.912,95.984 C3.846,107.557 -4.270,109.893 7.241,115.259 C18.753,120.625 21.389,129.544 78.326,139.366 Z'/%3E%3C/svg%3E");

左轮布局(x)

效果是子元素沿弧线分布，圆盘会随新元素出现旋转一格。

将flex布局调到适当方向，使用nth-child()或者nth-last-child()选择器，设定好每个子元素的偏移量，完成右侧的弧形分布，固定大小效果更理想。

左侧弹巢使用父元素上的静态伪元素作为背景，使用第一/最后一个子元素上的动态伪元素来播放旋转动画

（老板怎么都接不到客单啊，这些效果全都能做的啊）

祖宗元素contain: layout配合子元素position: fixed，使子元素越过父元素非static定位

（用来造奇怪的东西的办法x

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.father_n {
    contain: layout;
}

.father_1 {
    position: relative;
}

.child {
    position: fixed;
    left: 5px;
    top: 5px;
    width: 100%;
    height: 100%;
}

这样子，即使父元素.father_1为相对定位或绝对定位，子元素.child仍会越过父元素，作为祖宗元素.father_n的绝对定位。相当于父元素在使用相对定位或绝对定位时，对于子元素来说其可视为static定位。 应用场景：父元素需要非static定位设置位置，但子元素需要相对父元素的父元素进行定位、确定相对大小，而非父元素。（奇技淫巧用）