6个使用CSS3渐变和遮罩特性实现的图标

Icons with CSS gradients & masking

css3, icon, logo

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 4018
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
    overflow: hidden;
    margin: 0;
    height: 100vh;
    background: linear-gradient(rgba(255, 255, 255, 0.73), rgba(255, 255, 255, 0.73)), url(/uploads/161001/lighten2.jpg) 50%/cover;
}
section {
    box-sizing: border-box;
    position: relative;
    --bw: 2.5em;
    border: solid var(--bw) transparent;
    width: var(--size);
    height: var(--size);
    background: radial-gradient(rgba(128, 128, 128, 0.35), rgba(128, 128, 128, 0) 43%) 50% 100%/100% var(--bw) no-repeat border-box;
}
@media (min-aspect-ratio: 1 / 6) and (max-aspect-ratio: 1 / 3),
(min-aspect-ratio: 3 / 1) and (max-aspect-ratio: 6 / 1) {
    section {
        --size: 16vmax;
    }
}
@media (min-aspect-ratio: 1 / 3) and (max-aspect-ratio: 2 / 3),
(min-aspect-ratio: 3 / 2) and (max-aspect-ratio: 3 / 1) {
    section {
        --size: 50vmin;
    }
}
@media (min-aspect-ratio: 2 / 3) and (max-aspect-ratio: 3 / 2) {
    section {
        --size: 33vmax;
    }
}
div,
div:after,
div:before {
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
}
div:not(.tri),
div:not(.tri):after {
    border-radius: 50%;
}
.ray:after {
    background: linear-gradient(var(--clist, #c7db59, #347738));
    -webkit-mask: repeating-conic-gradient(#000 0 5.625deg, transparent 0 11.25deg);
}
.ray--ext {
    -webkit-mask: radial-gradient(circle at 65.625% 50%, rgba(0, 0, 0, 0) 41.76563%, #000000 0%);
}
.ray--int {
    top: 15.625%;
    right: 0;
    width: 68.75%;
    height: 68.75%;
    --clist: #fca439, #f16832;
    -webkit-mask: radial-gradient(circle at 34.375% 50%, rgba(0, 0, 0, 0) 41.76563%, #000000 0%);
}
.ray--int:after {
    -webkit-mask: repeating-conic-gradient(transparent 0 5.625deg, #000 0 11.25deg) 100% 50%/ 145.45455% 145.45455%;
}
.wrp--1 .sea:before,
.wrp--1 .sea:after {
    --base: 50% 0, 100% 50%, 50% 100%, 0 50%;
    background: linear-gradient(90deg, #20a4dd, #1f51a2);
}
.wrp--1 .sea:before {
    -webkit-clip-path: polygon(var(--base));
    -webkit-mask: repeating-linear-gradient(transparent 0, transparent 0.5vmin, #000 0, #000 2vmin) 50% calc(50% - 0.25vmin);
}
.wrp--1 .sea:after {
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0, var(--base), 50% 0);
    -webkit-mask: repeating-linear-gradient(#000 0, #000 0.5vmin, transparent 0, transparent 2vmin) 50% calc(50% - 0.25vmin);
}
.wrp--2 .ray {
    --clist: #fca439, #f16832;
    -webkit-mask: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 48.61359%, #000000 0%);
}
.wrp--2 .ray--int {
    right: 15.625%;
    --clist: #20a4dd, #1f51a2;
}
.wrp--2 .ray--int:after {
    -webkit-mask: repeating-conic-gradient(transparent 0 5.625deg, #000 0 11.25deg);
}
.wrp--3 {
    isolation: isolate;
}
.wrp--3 .ray {
    overflow: hidden;
    width: 61.5%;
    height: 61.5%;
    mix-blend-mode: screen;
}
.wrp--3 .ray:after {
    width: 162.60163%;
    height: 162.60163%;
    background: radial-gradient(var(--clist));
}
.wrp--3 .ray:nth-child(1) {
    top: 19.25%;
    left: 37.94919%;
    --clist: #c7db59, #347738;
}
.wrp--3 .ray:nth-child(1):after {
    top: -31.30081%;
    left: -61.706%;
}
.wrp--3 .ray:nth-child(2) {
    top: 35.44397%;
    left: 9.90041%;
    --clist: #20a4dd, #1f51a2;
}
.wrp--3 .ray:nth-child(2):after {
    top: -57.63247%;
    left: -16.09822%;
}
.wrp--3 .ray:nth-child(3) {
    top: 3.05603%;
    left: 9.90041%;
    --clist: #ed1b24, #ed1b24;
}
.wrp--3 .ray:nth-child(3):after {
    top: -4.96915%;
    left: -16.09822%;
}
.wrp--4 .tri {
    -webkit-mask: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 35.35534%, #000000 0%);
}
.wrp--4 .tri:after {
    background: linear-gradient(#fca439, #f16832 75%);
    -webkit-clip-path: polygon(50% 0, 93.3% 75%, 6.7% 75%);
    -webkit-mask: repeating-linear-gradient(transparent 0, transparent 0.25em, #000 0, #000 1em) 50% calc(50% - 0.125em);
}
.wrp--4 .crc {
    margin: 25%;
    width: 50%;
    height: 50%;
}
.wrp--4 .crc:before,
.wrp--4 .crc:after {
    border-radius: 50%;
    --c1: #c21e24;
    --c2: transparent;
    background: repeating-linear-gradient(var(--c1) 0, var(--c1) 0.25em, var(--c2) 0, var(--c2) 1em) 50%;
}
.wrp--4 .crc:before {
    -webkit-mask: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 50%, #000000 0%);
}
.wrp--4 .crc:after {
    margin: 14.64466%;
    width: 70.71068%;
    height: 70.71068%;
    --c1: transparent;
    --c2: #c21e24;
}
.wrp--5 .wld {
    -webkit-mask: repeating-radial-gradient(#000 0, #000 0.375em, transparent 0, transparent 0.75em);
}
.wrp--5 .ptl {
    margin: 32.32233%;
    width: 35.35534%;
    height: 35.35534%;
    transform: rotate(var(--a)) translate(57%, -57%) scale(calc(var(--s, 1)*.85));
}
.wrp--5 .ptl:nth-child(2n) {
    --s: -1;
}
.wrp--5 .ptl:nth-child(n + 5) {
    --c1: #c7db59;
    --c2: #347738;
}
.wrp--5 .ptl:after {
    border-radius: 100% 0;
    background: linear-gradient(-45deg, var(--c1, #20a4dd) 25%, var(--c2, #1f51a2) 75%);
}
.wrp--5 .ptl:nth-child(1) {
    --a: 0deg;
}
.wrp--5 .ptl:nth-child(2) {
    --a: 45deg;
}
.wrp--5 .ptl:nth-child(3) {
    --a: 90deg;
}
.wrp--5 .ptl:nth-child(4) {
    --a: 135deg;
}
.wrp--5 .ptl:nth-child(5) {
    --a: 180deg;
}
.wrp--5 .ptl:nth-child(6) {
    --a: 225deg;
}
.wrp--5 .ptl:nth-child(7) {
    --a: 270deg;
}
.wrp--5 .ptl:nth-child(8) {
    --a: 315deg;
}

HTML

Icons with CSS gradients & masking

css3, icon, logo

编辑器支持Emmet

快捷键

Icons with CSS gradients & masking

css3, icon, logo

使用CSS3线性渐变和合成模式（blend-mode）实现的5种图像特效

使用SVG和CSS3 mask特性实现的文本内视频遮罩特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：