CSS 效果


2019-01-09 CSS

# box-shadow

box-shadow 的作用

  • 营造层次感(立体感)
  • 充当没有宽度的边框
  • 特殊效果,例如可以一个 div 用来画一个机器猫,但是有性能缺陷
div {
  /*向右移动距离,向下移动距离,模糊程度*/
  box-shadow: yellow 100px 50px 30px;
}

# text-shadow

box-shadow 主要是用来做块级元素的阴影,而文字阴影则是是使用另外一个 css 属性——“text-shadow”

/*指定了水平阴影,垂直阴影,模糊的距离,以及阴影的颜色:*/
body {
  text-shadow: 10px 10px 5px grey;
}

# border-radius

配合 border 属性可以用来画“圆角矩形,半圆,扇形,甚至一些奇怪图形”

div {
  width: 100px;
  height: 100px;
}
.circle {
  border-radius: 50%;
}
.half-round {
  height: 50px;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
}
.fanshaped {
  border-top-left-radius: 50%;
}

# clip-path

clip-path 可以对容器进行裁剪,但是存在兼容性问题

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .container {
        width: 400px;
        height: 300px;
        border: 1px solid red;
        background: url(./panda.jpg) no-repeat center center;
        padding: 10px;
        clip-path: circle(50px at 100px 100px);
        transition: clip-path 0.4s;
      }
      .container:hover {
        clip-path: circle(80px at 100px 100px);
      }
    </style>
  </head>
  <body>
    <div class="container">
      你好,我是熊猫
    </div>
  </body>
</html>

# 2D 转换

  • 2D 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。
  • 主要是使用 CSS3 的 tranform 属性
    • translate()方法,根据左(X 轴)和顶部(Y 轴)位置给定的参数,从当前元素位置移动。
    • rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
    • scale()方法,该元素增加或减少的大小,取决于宽度(X 轴)和高度(Y 轴)的参数:
    • skew()包含两个参数值,分别表示 X 轴和 Y 轴倾斜的角度,如果第二个参数为空,则默认为 0,参数为负表示向相反方向倾斜。
    • matrix()方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      div {
        width: 100px;
        height: 100px;
        border: 1px solid black;
      }
      #div2 {
        transform: translate(50px, 100px);
      }
      #div3 {
        margin-top: 150px;
        transform: rotate(90deg);
      }
      #div4 {
        margin-left: 200px;
        transform: scale(2, 3);
      }
      #div5 {
        margin-left: 400px;
        transform: skew(30deg, 20deg);
      }
      #div6 {
        transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
      }
    </style>
  </head>
  <body>
    <div>
      <p>css-2D转换</p>
    </div>
    <div id="div6">
      <p>css-2D matrix</p>
    </div>
    <div id="div2">
      <p>css-2D-translate</p>
    </div>
    <div id="div3">
      <p>css-2D-rotate</p>
    </div>
    <div id="div4">
      <p>css-2D-scale</p>
    </div>
    <div id="div5">
      <p>css-2D-skew</p>
    </div>
  </body>
</html>

# 3D 变换

  • “3D 变换”是基于矩阵运算的
  • 主要是使用 CSS3 的 tranform 属性
    • 方法依旧和“2D 变换”的方法一致,只是更完善,多了 z 轴方向上的方法,和 3d 旋转的方法

简单的例子如下:

div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  /* transform: rotateX(120deg); 上下对折 */
  /* transform: rotateY(120deg); 左右对折*/
  transform: rotateZ(120deg); /* 空间旋转 */
}

另外还有 3 个属性需要注意

  • perspective:[number]
    • 属性定义 3D 元素距视图的距离,以像素计算。当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。
    • 目前浏览器对 perspective 属性支持性还不够
  • transform-style:preserve-3d
    • transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。必须与 transform 属性一同使用。
  • transform-origin:[percent][percent],
    • 一个是 x 轴的参数,第二个是 y 轴的参数
    • transform-origin 允许转换元素的位置。

简单来说

  • perspective 就是 3D 透明度
  • transform-style:preserve-3d则是为了让子元素也可以使用 3D 转换。
  • transform-origin 用来定义旋转的“圆心”的位置

关于这部分的例子,请直接看动画的部分

酌情使用"3D 变换",如果网页上的大部分都是使用 3D 引擎来渲染,会给 GPU 带来太大的负担,酌情使用反而可以做到性能优化

# CSS 动画

关于 CSS 动画,可以在 chrome 开发者工具的 “Animations” 中进行调试

  • 原理
    • 视觉暂留作用
    • 画面逐渐变化
  • 作用
    • 愉悦感
    • 引起注意
    • 反馈
    • 掩饰
  • 性能
    • 性能不坏,部分情况下优于 js,但 js 可以做到更好
    • IE 兼容性差
    • 部分高危属性,box-shadow 等,无论使用哪种方式,性能都会比较差。

# 补间动画(过渡动画)

  • 可以使用 transition + transfrom 可以用来实现补间动画(过渡动画)
  • 补间动画需要有状态变化,即需要有触发操作

transition

transition 属性是一个简写属性,用于设置四个过渡属性:

  • transition-property 规定设置过渡效果的 CSS 属性的名称。
  • transition-duration 规定完成过渡效果需要多少秒或毫秒。
  • transition-timing-function 规定速度效果的速度曲线。
  • transition-delay 定义过渡效果何时开始。

看一下简单的示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .container {
        width: 100px;
        height: 100px;
        background: red;
        transition: all 1s linear 0.5s;
        /* https://matthewlein.com/tools/ceaser  这个网站可以做到想要的变换效果*/
        /* transition-timing-function: cubic-bezier(0.465, -0.460, 0.525, 1.435); */
      }
      .container:hover {
        width: 800px;
        background: blue;
      }
    </style>
  </head>
  <body>
    <div class="container"></div>
  </body>
</html>

以下是一个正方体 3D 旋转的例子

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .container {
        margin: 50px;
        padding: 10px;
        border: 1px solid red;
        width: 200px;
        height: 200px;
        position: relative;
        perspective: 500px;
      }
      #cube {
        width: 200px;
        height: 200px;
        transform-style: preserve-3d;
        transform-origin: 100% 50%;
        transform: translateZ(-100px);
        transition: transform 0.4s;
      }
      #cube div {
        width: 200px;
        height: 200px;
        position: absolute;
        line-height: 200px;
        font-size: 50px;
        text-align: center;
      }
      #cube:hover {
        transform: translateZ(-100px) rotateX(90deg) rotateY(90deg);
      }
      .front {
        transform: translateZ(100px);
        background: rgba(255, 0, 0, 0.3);
      }
      .back {
        transform: translateZ(-100px) rotateY(180deg);
        background: rgba(0, 255, 0, 0.3);
      }
      .left {
        transform: translateX(-100px) rotateY(-90deg);
        background: rgba(0, 0, 255, 0.3);
      }
      .right {
        transform: translateX(100px) rotateY(90deg);
        background: rgba(255, 255, 0, 0.3);
      }
      .top {
        transform: translateY(-100px) rotateX(-90deg);
        background: rgba(255, 0, 255, 0.3);
      }
      .bottom {
        transform: translateY(100px) rotateX(90deg);
        background: rgba(0, 255, 255, 0.3);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div id="cube">
        <div class="front">1</div>
        <div class="back">2</div>
        <div class="right">3</div>
        <div class="left">4</div>
        <div class="top">5</div>
        <div class="bottom">6</div>
      </div>
    </div>
  </body>
</html>

# 关键帧动画

  • 使用 @keyframe + animation 可以实现 关键帧动画
  • 关键帧动画与元素状态的变化无关,相当于多个补间动画
  • 定义更加灵活,能控制更精细,可以使用 js 来进行控制

animation

animation 属性是一个简写属性,用于设置六个动画属性:

  • animation-name 规定需要绑定到选择器的 keyframe 名称。。
  • animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
  • animation-timing-function 规定动画的速度曲线。
  • animation-delay 规定在动画开始之前的延迟。
  • animation-iteration-count 规定动画应该播放的次数。
  • animation-direction 规定是否应该轮流反向播放动画。
  • animation 需要与 @keyframe 配合使用
  • animation-play-state: paused|running; 属性不能简写在 animation 中,这个属性用来规定动画正在运行还是暂停。可以在 JavaScript 中使用该属性,这样就能在播放过程中暂停动画。

以下是“关键帧动画”的例子

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .container {
        width: 100px;
        height: 100px;
        background: red;
        animation: run 2s linear reverse forwards;
        animation-iteration-count: infinite;
        /* animation-play-state: paused; */
      }
      @keyframes run {
        0% {
          width: 100px;
        }
        50% {
          width: 800px;
        }
        100% {
          width: 100px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container"></div>
  </body>
</html>

# 逐帧动画

  • 可以使用@keyframe + animation 来做 逐帧动画
  • 逐帧动画主要是使用于无法进行补间计算的关键帧动画
  • 资源较大,需要控制好大小和时长

以下是“逐帧动画”的例子,是用“逐帧动画”来完成“雪碧图动画”

  • 雪碧图是有多张图片混合成的
  • 可以使用 background-transiton@keyframe + animation 来让雪碧图中的图片模拟成一个 gif 图。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .container {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        background: url(./animal.png) no-repeat;
        animation: run 1s infinite;
        /* 使用以下属性来控制时长 */
        animation-timing-function: steps(1);
      }
      @keyframes run {
        0% {
          background-position: 0 0;
        }
        12.5% {
          background-position: -100px 0;
        }
        25% {
          background-position: -200px 0;
        }
        37.5% {
          background-position: -300px 0;
        }
        50% {
          background-position: 0 -100px;
        }
        62.5% {
          background-position: -100px -100px;
        }
        75% {
          background-position: -200px -100px;
        }
        87.5% {
          background-position: -300px -100px;
        }
        100% {
          background-position: 0 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="container"></div>
  </body>
</html>
最近更新: 12/22/2021, 3:23:15 PM