11.29Web前端第七次课笔记

CSS样式的继承

会继承的CSS属性：字体属性，文本属性，文字颜色.....

不会继承的CSS属性：边框，内外边距，宽高....

a链接的属性最好添加在自身，否则可能不生效

例：

过渡属性

transition-delay:2s (延迟)

transition-timing-function:linear (改运动形式)

transition-timing-function:steps(10)   (逐帧)

简写

transition:all 2s    (all:所有样式都要)

例：

2d转换

transform:translateX()

transform:translateY()

向X和Y移动

transform:translateX() transform:translateY()

transform:translate(100px,200px)

旋转

transform:rotateX(30deg)

transform:rotateY(30deg)

沿着X旋转45读再向右平移

先平移后旋转

transform:translateX(100px) rotateX(45deg)

transform:scaleX(0.5)  以X轴缩放

transform:scaleY()

transform:scale()  完整缩放

transform:skewX(45deg) /*了解*/ 

3d转换

景深（3d）

perspective:

transform-style:preserve-3d

例：

3d旋转

transform:rotate ()

例：

backface-visibility:       /*设置元素背面是否可见*/

转换基点

transform-origin:top/bottom/10px  (改变基点)

例：

动画

@keyframes name{
    from{
        width:300px;
        height:40px;
        background-color:aqua;
    }
    to{
        width:500px;
        height:60px;
        background-color:pink;
    }
}
div{
    width:300px;
    height:40px;
    background-color:aqua;
    animation-name:name;
}

animation-duration:3s;

animation-delay:0s

animation-timing-function:linear

animation-literation-count:infinite (无限播放)

animation-direction:reverse (是否反向播放)

animation-direction:alternate (往复)

animation-play-state:paused 开始暂停

animation-fill-mode:forwards 最后暂停

简写

animation: alternate name 3s

用百分号表示进程的变化

媒体查询

@media only screen and(max-width:600px)and(min-width:800px){
    body{
        background-color:pink;
    }
}

渐变

background-image:linear-gradient(red,pink)

例：

字体图标（iconfont）