盒子模型背景渐变线性渐变径向渐变重复渐变过渡渐变动画定义动画绑定动画暂停动画

347 阅读3分钟
1.css兼容性
2.常见属性
    1.文字阴影  text-shadow: x y 模糊程度 颜色;    
    2.盒子阴影  box-shadow:x  y  模糊程度 颜色 inset;
    3.圆角     border-radius: *px | *%;
3.字体图标 iconfont  会用
4.选择器
    1.选中第一个子元素e    e:first-child{   }
      选中最后一个子元素e  e:last-child{}
      选中第n个子元素e     e:nth-child(n) {}
      选中倒数第n个子元素e     e:nth-last-child(n) {}
      选中唯一的子元素e     e:only-child{}

      注意:child系列,强调的是元素e在所有的兄弟元素中的排列顺序。  【不限标签种类】
           type系列,强调的是元素e在同类型兄弟元素中的排列顺序。  【限标签种类】
    
    2.选中被禁用的元素e    e:disabled{   }    
        可用e             e:enabled{ }
        选中的元素e        e:checked{  }
    
    3.否定伪类选择器 【反选】
        e:not(f)    选中e中排除f的剩下的元素
    4. 动态伪类选择器
        :link
        :visited
        :active
        :hover

1.盒子模型中的两种模式: 标准模式和怪异模式 概念:其实只是盒子模型中的不同模式而已。 元素实际占据的宽高的计算方式不一样。 标准模式计算: 元素实际占据的宽度 = width + margin + padding + border 怪异模式计算: 元素实际占据的宽度 = width + margin 语法: box-sizing: border-box | content-box; border-box就是怪异模式,content-box就是标准模式。

2.背景渐变 1.线性渐变 1.普通 background:linear-gradient(颜色1,颜色2); 2.改变方向 background:linear-gradient(to 方向的英文,颜色1,颜色2); [方向:left right top bottom] 3.对角 background:linear-gradient(to 垂直 水平,颜色1,颜色2); [水平方向有left|right,垂直 top | bottom ,方向不分先后 ] 4.角度 background:linear-gradient(*deg,颜色1,颜色2); [顺时针旋转] 5.控制比例 background:linear-gradient(*deg,颜色1 *%,颜色2 *%); [可以是前面1-4的任意写法,在颜色后面写上比例即可]

2.径向渐变  
    1.普通
        background:radial-gradient(颜色1,颜色2);

    2.控制比例-不均匀分布
        background:radial-gradient(颜色1 *%,颜色2 *%);

    1.控制图案-圆圈circle 椭圆ellipse
        background:radial-gradient(图案,颜色1,颜色2);

3.重复渐变
    repeating-radial-gradient()  重复径向渐变
    repeating-linear-gradient()  重复线性渐变

3.过渡:让一个变化的属性,慢慢变。 语法:
单个: transition: 渐变的属性 渐变的时间 渐变的延迟时间 变化的曲线; 多个: transition: 渐变的属性1 渐变的时间 渐变的延迟时间 变化的曲线,渐变的属性2 渐变的时间 渐变的延迟时间 变化的曲线; 说明:如果要有先后顺序,给后面的属性加对应的延迟时间即可。

4.动画 1.定义动画 @keyframes 动画名{ from{ 动画开始时候的样式 } to{ 动画结束时的状态 } } 方式2: @keyframes 动画名{ 0%{ 动画开始时候的样式 } *%{ 中间状态,可以自己定义百分之几 } 100%{ 动画结束时的状态 } }

2.绑定-执行动画
    animation:动画名 动画执行时间  动画执行次数  动画延迟时间  动画变化曲线  动画下一次执行的方向;
        动画执行次数:可以是数字,可以是无限infinite
        动画变化曲线:linear 匀速改变
        动画下一次执行的方向:alternate代表会反向
    
    暂停动画:  animation-play-state:paused;