CSS知识总结

奇异果不想说话
567 阅读2分钟

浏览器渲染原理

  • 浏览器向服务器请求到了HTML文档后便开始解析，产物是DOM，如果有CSS，会根据CSS生成CSS对象模型，然后再由DOM和CSSDOM合并产生渲染树，知道了所有节点的样式，便根据这些节点以及样式计算他们在浏览器中确切的大小和位置，这就是布局，最后再把节点绘制到浏览器上。
  • 解析HTML构建dom树，解析css构建css树----构建render树----布局render树----绘制render树

CSS3知识总结

CSS3 边框

边框属性

  1. border-radius

  2. box-shadow

  3. border-image

    .div1{ border: 2px solid red; height: 60px; width: 60px; border-radius: 25px; box-shadow:10px 10px gray; }

CSS3 2D转换

通过css3 转换，我们能够对元素进行移动、缩放、转动

  • transform:rotate（）方法，把元素旋转一定的角度，允许负值

    .div1{ border: 2px solid gold; width: 60px; height: 60px; transform: rotate(30deg); }
    缤纷田园

rotate(30deg)把元素顺时针旋转了30°

  • translate()方法：元素从当前位置移动，根据给定的x坐标和y坐标移动

    .div1{ border: 2px solid gold;width: 60px;height: 60px; transform: translate(50px,100px);}
    缤纷田园

  • transform:scale()方法，元素的尺寸增加或者减少

div{ transform:scale(2,4) }

scale(2,4)会把元素的宽拉伸为原来的2倍，高度转换为原始的4倍

  • skew()方法：元素翻转给定的角度

div{ transform:skew(30deg,20deg);}

值skew(30deg,20deg)围绕x轴把元素翻转30度，围绕Y轴翻转20度

CSS3 3D转换

  • rotateX()方法和rotateY()方法，元素围绕其X/Y轴以给定的度数转换

div{transform:rotateX(120deg);}

div围绕它的X轴旋转了120°

CSS3 过渡

元素从一种样式变成另外一种样式，必须规定一下两点：1.效果添加在哪个CSS属性上 2.规定效果的时长

<style>    .div1{        width: 60px;        height: 60px;        border: 2px tomato dotted;        transition: all 3s;    }    .div1:hover{        transform: translate(100px,80px);    }</style><body>    <div class="div1"></div></body>

鼠标悬停在div上的时候，div会在3秒钟向右移动100px,向下移动80px

  • trasition:简写，可以设置四个属性
  • transition-propertity:规定应用过渡的CSS属性的名称
  • transition-duration：过渡持续的时间
  • transition-timing-function：过渡效果的时间曲线，默认ease
  • transition-delay：过渡效果什么时候开始

CSS动画

@keyframes 用于创建动画，在@keyframes中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果。

<style>    #div1{        border: 1px solid green;        width: 40px;        height: 40px;        animation:div1 2s infinite alternate;    }    @keyframes div1{        from{background: green;}        to{background: red;}    }</style><body>    <div id="div1"></div></body>

CSS动画属性：

  • @keyframes:规定动画
  • animation：所属动画属性简写
  • animation-name:@keyframes动画名称
  • animation-duration：动画完成一个周期花费的时间
  • animation-timing-function：动画速度曲线
  • animation-delay：动画延迟多久开始
  • animation-iteration-count：动画播放次数，默认1

       取值：n:播放n次

                 infinite：无限次播放

  • animation-direction：动画在下一周期是否逆向播放，默认为normal

       取值：alternate/alternate-reverse/normal/reverse/inherit

例：animation:myfirst 5s linear 2s infinite alternate;

CSS其余再增加

avatar
文章
阅读
粉丝