• css3 浏览器前缀 线型渐变 过渡属性


    css3:没有形成正式版

    每个浏览器商,为了能对css3属性形成一个更好的支持,浏览器形成自己一套语法规范,一些css属性,如果想在浏览器上形成支持,有时候需要添加浏览器前缀

    谷歌前缀:webkit

    Eg:—webkit—属性:属性值

    火锅前缀:moz

    Eg:—moz—属性:属性值

    IE前缀:—ms

    Eg:—ms—属性:属性值

    欧朋前缀:O

    Eg:—O—属性:属性值

    Css3渐变:

    从一个颜色到另一个颜色平稳过度(颜色逐渐的变化)

    线性渐变:

    backgroundlinear-gradientdirection.color-stop1.color-stop2...

    (渐变的方向,颜色值,颜色值。。。)

    渐变的方向:

    to left

    to right

    to bottom

    to top

    to right top

    to left bottom

    to right bottom

    to left top

    不添加浏览器前缀-》标准模式

    添加浏览器前缀-》兼容模式

    前缀加在功能函数前面

    注:如果linear-gradintt()添加浏览器前缀,方向是不加to的,指的是从哪个方向开始

    方向可以使用角度的变化:deg(度数)

    例如:

    标准模式backgroundlinear-gradient30deg red blue

    兼容模式 background:—webkitlinear-gradient60deg red blue

    渐变色,颜色的分布可以用百分比控制

    Egbackgroundlinear-gradientto left red10% blue 30%);

    说明:到10%的位置都是红色 出来10%的位置开始向蓝色渐变,直到渐变到30%的位置是蓝色

    径向渐变:

    从一个点向四周渐变

    语法:必须添加浏览器前缀

    backgroundradial-gradientcentershapesizestare-colorlast-color

    说明:radial-gradient(渐变原点的位置,形状(椭圆或正圆),大小,颜色值1,颜色值2

    渐变原点位置:

    50% 50% = center

    10px 30px = 距离左侧10px 顶端30px

    形状:

    默认是椭圆

    circle 正圆

    大小:

    渐变的大小:径向渐变的大小,从圆心点到规定渐变位置(最近边 最近角 最远角 最远边 )进行颜色渐变

    默认值是最远角 中心点向最远角渐变

    closest-side 最近边

    farthest-side 最远角

    closest-comer 最近角

    farthest-coner 最远角

    重复性线性渐变:

    background:—webkitrepeating-linear-gradientrightredyellow

    重复性径向渐变:

    repeating改成radial就行了

    过渡:transition-property

    duration

    deley

    toming-funtion

    Transition:属性值1,属性值2,属性值3

    属性值1:过渡的属性(widthheight,。。)默认是all

    属性值2:过渡的事件单位为S(秒)ms(毫秒)1S = 1000ms

    属性值3:过渡属性的延迟时间

    属性值4:过渡动画的类型 匀速(linear

    transition放在初始状态上面,保证鼠标滑过和离开有过渡效果

    transitionall  3S  2S

    延迟

    注:transition必须通过事件(鼠标滑过)触发

    2,如果一个元素,单独设置每个属性的过渡transitionwidth 1Sheight 2S background 5S

    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    Hive问题
    VirtualBox安装增强功能
    Shell脚本 数据清洗
    团队项目第一阶段冲刺站立会议06
    梦断代码阅读笔记1
    团队项目第一阶段冲刺站立会议05
    团队项目第一阶段冲刺站立会议04
    团队项目第一阶段冲刺站立会议03
    团队项目第一阶段冲刺站立会议02
    团队项目第一阶段冲刺站立会议01
  • 原文地址:https://www.cnblogs.com/ht955/p/13782068.html
Copyright © 2020-2023  润新知