一、特效

模糊、投影

滤镜

二、鼠标

三、文字

常用属性

彩色文字

color: #fff;
background: linear-gradient(135deg, #FF5C53 0%, #EF5C6E 25%, #A34DF3 49%, #905EFF 57%, #26CAFA 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;

a 标签

a { 
    color: #0070c9; 
    }

a:hover, a:active, a:focus {
    text-decoration: underline;
    }

a:visited {
    color: #003763;

文字

多平台对比

Web浏览器根据根元素大小计算REM（根em大小）。现代Web浏览器的默认值为16px，因此转换为SP_SIZE / 16 = rem。

四、图片

常用属性

五、Google Material效果

Google Material 鼠标移入卡牌

background-color: #fff;
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
transition-property: box-shadow;
transition-duration: .25s;
transition-timing-function: linear;
border-radius: 2px;

鼠标移入卡牌整行的链接文字时，背景色变化

a.cfc-info-card-item[_ngcontent-c56]:hover{ 
    background-color: rgba(0,0,0,.04); 
    }

    

a.cfc-info-card-item[_ngcontent-c56] {
    color: #000;
    border: 0;
    text-decoration: none;
    transition: background-color .3s cubic-bezier(0.215, 0.61, 0.355, 1);
    }

抗锯齿

一般要给"加粗的文字"添加抗锯齿属性

b {
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
}

六、块块

整体缩放 / 360旋转

将配置区域的块块大小整体变为之前的0.72倍
transform: scale(0.72);

将块块进行360度旋转
transform: scale(-1);

旋转

-ms-transform: rotate(36000deg);
-moz-transform: rotate(36000deg);
-webkit-transform: rotate(36000deg);
-o-transform: rotate(36000deg);
transition: all 240000ms linear;

不错的顶部抬高块块

.divbg1{
    background-image: linear-gradient(180deg,hsla(0,0%,100%,0) 50%,#fff),linear-gradient(70deg,#eaf5ff 32%,#f6fff8);
    box-shadow: 0 3px 6px rgba(0,0,0,.05);
}

毛玻璃导航

    -webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
background-color: rgba(255,255,255,0.72);