高亮的博客

# css3

# 图片变模糊

CSS3 滤镜 filter: filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

<body>
    <div>
        <img src="static/img/banner2_20190819_210028.png">
    </div>

</body>
<style>
    img {
        filter: blur(15px);
    }

    img:hover {
        filter: blur(0);
    }
</style>

# 计算盒子宽度width:calc函数

比父元素小30像素
可以使用 + - * /

<body>
    <div class="parent">
        <div class="son"></div>
    </div>

</body>
<style>
    .parent {
        width: 200px;
        height: 200px;
        background-color: skyblue;
    }

    .son {
        width: calc(100% - 30px);
        height: 200px;
        background-color: pink;
    }
</style>

# 过度

过渡(transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。 过渡动画：是从一个状态渐渐的过渡到另外一个状态

可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持(i9以下版本)但是不会影响页面布局。

现在经常和：hover一起搭使用。

语法：

transition:要过渡的属性花费时间运动曲线何时开始；
  1. 属性：想要变化的css属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个a‖就可以。
  2. 花费时间：单位是秒（必须写单位）比如0.5s
  3. 运动曲线：默认是 ease(可以省略)
  4. 何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认是0s(可以省略)

多个之间用逗号，所有的属性用all

<body>
    <div class="parent">
    </div>

</body>
<style>
    .parent {
        width: 200px;
        height: 200px;
        background-color: skyblue;
    }

    .parent:hover {
        width: 400px;
        height: 400px;
        transition: width 0.5s ease ;
    }

</style>

多个

<body>
    <div class="parent">
    </div>

</body>
<style>
    .parent {
        width: 200px;
        height: 200px;
        background-color: skyblue;
    }

    .parent:hover {
        width: 400px;
        height: 400px;
        transition: all 0.5s ease, height 0.5s ease;
    }

</style>

# 2D转换之translate

# 二维坐标系

2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系

坐标

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类以定位

  • 定义2D转换中的移动，沿着X和Y轴移动元素
  • translate:最大的优点：不会影响到其他元素的位置
  • translate中的百分比单位是相对于自身元素的translate:(50%,50%):
  • 对行内标签没有效果
  • 如果使用百分号，移动的距离是盒子自身高度或者高度来对比的
  • 对行内标签没有效果
<body>
  <div></div>
</body>

<style>
  div {
    width: 100px;
    height: 100px;
    background-color: red;
    /*
      x就是x轴上移动位置y就是y轴上移动位置中间用逗号分隔
      transform:translate(x,y);
    */
    /*transform: translate(100px, 0);*/
    /*transform: translate(100px, 100px);*/
    transform: translateX(100px);

  }
</style>

# 垂直剧中

<body>
<div>
    <p></p>
</div>

</body>

<style>
    div {
        width: 500px;
        height: 500px;
        background-color: red;
        position: relative;
    }

    p {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        background-color: blue;
        transform: translate(-50%, -50%);

    }

</style>

# 2D转换之旋转rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

transform:rotate(度数)
  • rotate里面跟度数，单位是deg比如rotate(45deg)
  • 角度为正时，顺时针，负时，为逆时针
  • 默认旋转的中心点是元素的中心点
<body>

    <img src="../static/img/account.png">
</body>

<style>
    img {
        transform: rotate(50deg);
    }
</style>

# 2D转换中心点transform-origin

transform-origin:x y;
  • 注意后面的参数X和y用空格隔开
  • × y默认转换的中心点是元素的中心点(50%50%)
  • 还可以给xy设置像素或者方位名词(top bottom left right center)
<body>

<div></div>
</body>

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        margin: 200px auto;
        transition: all 1s;
        /**
            transform-origin: left bottom;
            默认是center center

         */
        transform-origin: 50px 20px;

    }

    div:hover {
        transform: rotate(360deg);
    }
</style>

# 2D转换之缩放scale

缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。

transform:scale(x,y);
  • 注意其中的x和y用逗号分隔
  • transform:scale(1,1):宽和高都放大一倍，相对于没有放大
  • transform:scale(2,2):宽和高都放大了2倍
  • transform:scale(2):只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
  • transform:scale(0.5,0.5):缩小
  • scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
<body>
<div></div>
</body>

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: skyblue;
    }

    div:hover {
        transform: scale(1.1,1);
    }
</style>

# 2D转换综合写法

  • 同时使用多个转换，其格式为：transform:translate() rotate() scale() 等
  • 其顺序会影转换的效果。（先旋转会改变坐标轴方向）
  • 当我们同时有位移和其他属性的时候，记得要将位移放到最前

# 动画

动画(animation)是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

# 动画的基本使用

制作动画分为两步：

  1. 先定义动画
  2. 再使用（调用)动画
<body>
<div></div>
</body>

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        /*调用动画*/
        animation-name: move;
        /*持续时间*/
        animation-duration: 1s;
    }

    /*定义状态*/
    @keyframes move {
        /*开始状态*/
        0% {
            transform: translateX(0px);
        }

        /*结束状态*/
        100% {
            transform: translateX(1000px);
        }
    }

</style>

# 动画序列

  • 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
  • 在@keyframes中规定某项CSS样式，就能创建由当前样式逐新改为新样式的动画效果。
  • 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
  • 请用百分比来规定变化发生的时间，或用关键词"from"和"to”,等同于0%和100%。

# from & to

<body>
<div></div>
</body>

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        /*调用动画*/
        animation-name: move;
        /*持续时间*/
        animation-duration: 1s;
    }

    /*定义状态*/
    @keyframes move {
        /*开始状态*/
        from {
            transform: translateX(0px);
        }

        /*结束状态*/
        to {
            transform: translateX(1000px);
        }
    }

</style>

# 多种状态

<body>
<div></div>
</body>

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        /*调用动画*/
        animation-name: move;
        /*持续时间*/
        animation-duration: 1s;
    }

    /*定义状态*/
    @keyframes move {
        0% {
            transform: translate(0, 0);
        }

        25% {
            transform:  translate(1000px ,0);
        }

        50% {
            transform:  translate(1000px ,500px);
        }

        75% {
            transform:  translate(0px ,500px);
        }

        100% {
            transform:  translate(0 ,0);
        }


    }

</style>

# 常用属性

属性 描述
@keyframes 规定动画。
animation 所有动画属性的简写属性，除了animation-play~state)属性。
animation-name 规定@keyframes2动画的名称。（必须的）
animation-duration 规定动画完成一个周期所花费的秒或毫秒，默认是0。（必须的）
animation-timing-function 规定动画的速度曲线，默认是“ease”
animation-delay 规定动画何时开始，默认是0。
animation-iteration-count 规定动画被播放的次数，默认是1，还有infinite
animation-direction 规定动画是否在下一周期逆向播放，默认是"normal“,alternate逆播放
animation-play-state 规定动画是否正在运行或暂停。默认是"running",还有"pause"。
animation-fill-mode 规定动画结束后状态，保持orwards回到起始backwards

# 动画简写属性

animation:动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态；

animation:myfirst 5s linear 2s infinite alternate;

# 3D转换

# 三维坐标系

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。

  • x轴：水平向右 注意：X右边是正值，左边是负值
  • y轴：垂直向下 注意：y下面是正值，上面是负值
  • Z轴：垂直屏幕 注意：往外面是正值，往里面是负值

# 3D移动translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。

  • translform:translateX(1OOpx):仅仅是在x轴上移动
  • translform:translateY(1OOpx):仅仅是在Y轴上移动
  • translform:translateZ(100px):仅仅是在Z轴上移动（注意：translateZ一般用px单位）
  • transform:translate3d(xy,z）:其中x、y、z分别指要移动的轴的方向的距离

# 3D移动translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向，就是轴方向。

  • translform:translateX(10Opx):仅仅是在x轴上移动
  • translform:translateY(100px):仅仅是在Y轴上移动
  • translform:translateZ(10Opx):仅仅是在Z轴上移动（注意：translateZ一般用px单位）
  • transform:translate3d(xy,z):其中X、y、Z分别指要移动的轴的方向的距离
<body>

<div></div>

</body>
<style>
  div {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    transform: translateX(100px) translateY(100px) translateZ(100px);
      /*
        trans1ateZ行着Z轴移
        translateZ后面的单位我们一般跟px
        translateZ(1gpx)向外移动1o8px(向我们的眼睛来移动的)
        3D移动有简写的方法
        transform: translate3d(100px,100px,100px);
        xyz是不能省略的，如果没有就写0
        transform: translate3d(0,100px,100px);
      */
  }
</style>

# 3D 转换 透视 perspective

在2D平面产生近大远小视觉立体，但是只是效果二维的,如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）。模拟人类的视觉位置，可认为安排一只眼睛去看

  • 透视我们也称为视距：视距就是人的眼睛到屏幕的距离
  • 距离视觉点越近的在电脑平面成像越大，越远成像越小透视的单位是像素
<body>

<div></div>

</body>
<style>
  body {
    /*透视写在被观察元素的父盒子上面*/
    perspective: 100px;
  }
  div {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    transform: translateX(100px) translateY(100px) translateZ(0);
  }
</style>

# 旋转rotate3d

3D旋转指可以让元素在三维平面内沿着x轴，y轴，Z轴或者自定义轴进行旋转。

transform:rotateX(45deg):沿着x轴正方向旋转45度
  • transform:rotateY(45de):沿着y轴正方向旋转45deg
  • transform:rotateZ(45deg):沿着Z轴正方向旋转45deg
  • transform:rotate3d(xy,z,deg):沿着自定义轴旋转deg为角度（了解即可）
<body>

  <img src="../1695619409948.jpg" >

</body>
<style>

  body {
    perspective: 500px;
  }
  img {
    width: 500px;
    height: 500px;
    margin: auto 200px;
    transition: all 1s;
    animation-name: move;
    animation-iteration-count: infinite;
    animation-duration: 2s;
  }

  @keyframes move {

    50% {
      transform: rotateX(-380deg);
    }
      
      75% {
          /*
            transform: rotate3d(x,y,z,旋转度数);
            transform: rotate3d(0,1,0,45deg); 沿着y轴旋转45
          */
          transform: rotate3d(0,1,0,45deg);
      }

    100% {
      transform: rotateX(380deg);
    }
  }
</style>

# 3D星现 transfrom-style

控制子元素是否开启三维立体环境。。

  • transform-style:flat子元素不开启3d立体空间默认的
  • transform-style:preserve-3d;子元素开启立体空间 代码写给父级，但是影响的是子盒子 这个属性很重要，后面必用

# css3 新盒子模型 box-sizing

  • 传统模式宽度计算：盒子的宽度 = CSS中设置的 width + border + padding
  • CSS3盒子模型：盒子的宽度 = CSS中设置的宽度 width 里面包含了 border 和 padding，也就是说，我们的CSS3中的盒子模型，padding和border不会撑大盒子了
<body>
    <div>
        <div>css3 之前的盒子</div>
        <div>css3 新的盒子模型</div>
    </div>
</body>

<style>
    div :nth-child(1) {
        /*
            传统盒子 240 = width　＋　padding + border
        */
        width: 200px;
        height: 200px;
        background-color: pink;
        padding: 10px;
        border: 10px solid blue;
    }

    div :nth-child(2) {
        /*
            新的盒子模型 总像素是200
        */
        width: 200px;
        height: 200px;
        background-color: skyblue;
        box-sizing: border-box;
        padding: 10px;
        border: 10px solid blue;
    }
</style>

# 传统 or CSS3盒子模型

  • 移动端可以全部CSS3盒子模型
  • PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择CSS3盒子模型

# 布局

# 流式布局

  • 流式布局，就是百分比布局，也称非固定像素布局。
  • 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
  • 流式布局方式是移动wb开发使用的比较常见的布局方式。
<body>
    <section>
        <div></div>
        <div></div>
    </section>
</body>
<style>
    div {
        width: 50%;
        height: 300px;
        float: left;
    }

    section {
        width: 100%;
        max-width: 2000px;
        min-width: 100px;
        max-height: 2000px;
        min-height: 100px;
        margin: 0 auto;
    }

    section :nth-child(1) {
        background-color: skyblue;
    }

    section :nth-child(2) {
        background-color: lightpink;
    }
</style>

# 多行布局

属性 作用 示例值
column-count 根据容器宽度和column-count值，自动分配列宽 column-count:3;分为3列
column-gap 列之间间距
column-rule 列间的分隔线样式（颜色、宽度、样式） column-rule:1px solid #ccc;

注意

会出现底部被切断，也就是当前高度不够，然后被分裂到零一行
解决办法是强制元素不跨列分割
break: avoid-column;

# 渐变

# 背景线性渐变

线性渐变

语法：

background: linearGradient(起始方向,颜色1,颜色2,...)
background: -webkit-linear-gradient(left,red,blue)

背景渐变必须添加浏览器私有前缀
起始方向可以是：方位名词或者度数，如果省略默认就是top

<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
<style>
    .div2,.div1 {
        width: 100px;
        height: 100px;
        margin-bottom: 100px;
    }
    .div1 {
        background: -webkit-linear-gradient(left, red, blue);
    }
    .div2 {
        background: -webkit-linear-gradient(bottom left, red, blue);
    }
</style>

← 移动页面 →