当前位置：首页 > CSS

css标志制作

2026-01-28 07:52:36CSS

CSS标志制作方法

使用CSS创建标志主要依赖于::before、::after伪元素、边框、变换和定位技术。以下是几种常见标志的实现方式：

简单对勾标志

.checkmark {
    width: 20px;
    height: 20px;
    border: solid 2px green;
    border-radius: 50%;
    position: relative;
}

.checkmark::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 12px;
    border: solid green;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    left: 6px;
    top: 1px;
}

警告三角形标志

.warning {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 26px solid orange;
    position: relative;
}

.warning::after {
    content: "!";
    color: white;
    position: absolute;
    font-weight: bold;
    left: 50%;
    top: 30%;
    transform: translateX(-50%);
}

信息圆圈标志

.info {
    width: 20px;
    height: 20px;
    border: 2px solid blue;
    border-radius: 50%;
    position: relative;
}

.info::before {
    content: "i";
    color: blue;
    position: absolute;
    font-weight: bold;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

高级标志实现技巧

响应式SVG替代方案

.logo {
    width: 100px;
    height: 100px;
    background-image: url('data:image/svg+xml;utf8,<svg...>');
    background-size: contain;
}

动画标志效果

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.animated-logo {
    animation: pulse 2s infinite;
}