【web】特效、动画、服务器字体

一、特效

阴影

…-shadow：横向偏移量 纵向偏移量 模糊距离 阴影颜色；

• eg：box-shadow：5px 5px 5px green;
• ​ text-shadow: 1px 1px 1px black;
• 注：字体描边效果：text-stroke：1px black；

渐变：gradient

背景图：渐变（方向 颜色1 百分比 颜色2 百分比… ）

linear-gradient：线性渐变

• 方向：默认方向从上向下，如果从左到右background-image:linear-gradient(to right,颜色1，颜色2…)

radial-gradient：梯度渐变

浏览器兼容：

• -webkit-：谷歌
• -moz-：火狐
• -o-：欧朋
• -ms-：IE浏览器

现在一般不做兼容，IE做的更少，如果做正常的和兼容的都要写。

过渡：transition

transition：属性名 时间 过渡延迟时间 速度曲线

变形：transform

平移：translate：（X, Y ,Z/单位px）不会脱离文档流

​ eg;translate:translateX(100px);

旋转：rotate（X Y Z /单位：deg turn grad）(turn=360deg=400grad)

​ eg:transform:rotate(.5 turn);
​ transform:rotate(90deg);

伸缩：scale（X Y Z/无单位）

​ eg:transform:scaleX(2);

拉扯：skew（X Y/单位deg）

​ eg:transform:skewX(90deg);

3D效果：transform-style：preserve-3d

动画起点：transform-origin

过滤：filter

• 模糊：filter：blurc（大于0）
• 亮度：brightness（正自然数）
• 对比度：contrast（正自然数）
• 阴影：drop-shadow（同box-shadow）
• 灰度：grayscale（0·1）
• 色相旋转：hue-rotate（deg）
• 反转：invert（1）
• 透明度：opacity（0·1）
• 饱和度：saturate（正自然数）
• 褐色：sepia（0·1）

  背景剪裁：-webkit-background-clip：text；

二、动画

关键帧：@keyframes

动画

• animation-name：动画属性名
• animation-duration：动画持续时间
• animation-delay：动画延迟时间
• animation-timing-function：动画速度曲线 linear（匀速运动） 贝塞尔曲线：cubic-bezier（…数值）
• animation-iteration-count：定义循环次数 infinite：无限循环
• animation-direction：alternate：动画轮流反转播放
• animation-play-state：动画状态 paused（暂停） running（运动）
• animation-fill-mode：forwards：保留最后一帧动画

第三方动画库

eg：animate.css

服务器字体

• 阿里巴巴矢量库

<style>
        @font-face {
            font-family: '字体名称';
            src: url(字体库路径);
        }
        p{
            font-family: '字体名称';
        }
    </style>