特效 服务字体

本文详细解读了CSS3的变换(包括平移、旋转、缩放和拉扯)、过渡效果(transition)、渐变(线性和径向)、滤镜效果(模糊、颜色调整)以及浏览器兼容性,展示了如何使用这些技术来创建丰富的视觉体验。
摘要由CSDN通过智能技术生成

变形:平移:tranform:translateX Y Z(100px)

            旋转:tranform:rotateX Y Z(360deg)-默认Z轴

            缩放:tranform:scaleX Y Z(3)-变换点在中心点,默认整体缩放

             拉扯(倾斜):tranform:skewX Y(60deg)-默认X轴

             变换圆点:tranform-origin:left top

注意:1.使用变形后标签不会脱离文档流

            2.Z轴在视觉上没有什么变化

             3.旋转后坐标轴随着元素旋转

             4.坐标轴X向右为正方向Y向下为正方向Z向外为正方向

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

            transition在不适应动画的情况下变换状态:transition:all 1s 1s linear

渐变:背景图:渐变(方向,颜色1 百分比,颜色2 百分比,...)

           linear-gradient:线性渐变

           radial-gradient:镜像渐变

           百分比:在渐变的方向上达到百分比比例的时候达到颜色值的正值其他两边全部都是过度值

滤镜:模糊:filter:blur(1px) 、亮度:filter:brigtness(2) 、阴影:filter:drop-shadow(5px 5px 5px            pink) 、

          灰度:filter:grayscale(1) 、色相转变:filter:hue-rotate(90deg) 、透明度:filter:opacity(.25)          、反转:filter:invet(1) 、饱和度:filter:saturate(4.25) 、褐色:filter:sepia(.5)

阴影:水平阴影 垂直阴影 模糊距离 阴影颜色

            box-shawd:针对盒模型

             text-shawd:针对文本

CSS浏览器兼容: -wedkit- 谷歌

                              -o- 欧朋

                              -moz- 火狐

                              -ms- IE浏览器

字体服务:@font-face{font-family:my-font;src:url();}

                     div{font-family:my-font}

           

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值