CSS系列（27）- 图形与滤镜详解

BitCat

已于 2024-12-21 14:44:59 修改

阅读量906

点赞数 13

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css 前端

于 2024-12-21 14:44:13 首次发布

本文链接：https://blog.youkuaiyun.com/Chen7Chan/article/details/144631158

CSS 专栏收录该内容

60 篇文章

订阅专栏

前端技术探索系列：CSS 图形与滤镜详解 🎨

致读者：探索CSS的艺术表现力 👋

前端开发者们，

今天我们将深入探讨 CSS 图形和滤镜效果，学习如何创建引人注目的视觉效果。

基础图形 🚀

几何形状

/* 圆形 */
.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #007bff;
}

/* 三角形 */
.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 86.6px solid #28a745;
}

/* 六边形 */
.hexagon {
    width: 100px;
    height: 57.735px;
    background: #dc3545;
    position: relative;
}

.hexagon::before,
.hexagon::after {
    content: '';
    position: absolute;
    width: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

.hexagon::before {
    bottom: 100%;
    border-bottom: 28.867px solid #dc3545;
}

.hexagon::after {
    top: 100%;
    border-top: 28.867px solid #dc3545;
}

复杂图形

/* 心形 */
.heart {
    width: 100px;
    height: 90px;
    position: relative;
}

.heart::before,
.heart::after {
    content: '';
    position: absolute;
    top: 0;
    width: 50px;
    height: 80px;
    border-radius: 50px 50px 0 0;
    background: #ff4444;
}

.heart::before {
    left: 50px;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}

.heart::after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}

/* 星形 */
.star {
    width: 0;
    height: 0;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #ffd700;
    border-left: 100px solid transparent;
    transform: rotate(35deg);
    position: relative;
}

.star::before {
    content: '';
    position: absolute;
    border-bottom: 80px solid #ffd700;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    transform: rotate(-35deg);
    top: -45px;
    left: -65px;
}

.star::after {
    content: '';
    position: absolute;
    top: 3px;
    left: -105px;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #ffd700;
    border-left: 100px solid transparent;
    transform: rotate(-70deg);
}

滤镜效果 🎯

基础滤镜

/* 模糊效果 */
.blur {
    filter: blur(5px);
}

/* 亮度调整 */
.brightness {
    filter: brightness(150%);
}

/* 对比度 */
.contrast {
    filter: contrast(180%);
}

/* 组合滤镜 */
.combined-filters {
    filter: 
        contrast(150%) 
        brightness(110%) 
        saturate(180%) 
        hue-rotate(30deg);
}

高级滤镜

/* 毛玻璃效果 */
.frosted-glass {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 动态滤镜 */
.hover-filter {
    transition: filter 0.3s;
}

.hover-filter:hover {
    filter: 
        brightness(110%) 
        contrast(110%) 
        saturate(120%);
}

/* 图片处理 */
.image-effects {
    filter: 
        sepia(50%)
        brightness(110%)
        contrast(120%)
        saturate(150%);
}

混合模式 💫

基础混合

/* 正片叠底 */
.multiply {
    background: #ff0000;
    mix-blend-mode: multiply;
}

/* 叠加 */
.overlay {
    background: #00ff00;
    mix-blend-mode: overlay;
}

/* 滤色 */
.screen {
    background: #0000ff;
    mix-blend-mode: screen;
}

高级混合

/* 渐变混合 */
.gradient-blend {
    background: linear-gradient(45deg, #ff0000, #00ff00);
    mix-blend-mode: overlay;
}

/* 图片混合 */
.image-blend {
    background-image: url('image.jpg');
    mix-blend-mode: luminosity;
}

/* 动态混合 */
.hover-blend {
    transition: mix-blend-mode 0.3s;
}

.hover-blend:hover {
    mix-blend-mode: difference;
}

渐变技巧 ⚡

线性渐变

/* 基础渐变 */
.gradient {
    background: linear-gradient(45deg, #ff0000, #00ff00);
}

/* 多色渐变 */
.multi-gradient {
    background: linear-gradient(
        to right,
        #ff0000,
        #ff7f00,
        #ffff00,
        #00ff00,
        #0000ff,
        #4b0082,
        #8f00ff
    );
}

/* 重复渐变 */
.repeating-gradient {
    background: repeating-linear-gradient(
        45deg,
        #ff0000,
        #ff0000 10px,
        #ffffff 10px,
        #ffffff 20px
    );
}

径向渐变

/* 圆形渐变 */
.radial {
    background: radial-gradient(circle, #ff0000, #00ff00);
}

/* 椭圆渐变 */
.elliptical {
    background: radial-gradient(
        ellipse at center,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,0) 70%
    );
}

/* 多重渐变 */
.complex-gradient {
    background: 
        radial-gradient(circle at 50% 0,
            rgba(255,0,0,.5),
            rgba(255,0,0,0) 70.71%),
        radial-gradient(circle at 6.7% 75%,
            rgba(0,0,255,.5),
            rgba(0,0,255,0) 70.71%),
        radial-gradient(circle at 93.3% 75%,
            rgba(0,255,0,.5),
            rgba(0,255,0,0) 70.71%);
}