温故而知新的 CSS3 新特性学习

最新推荐文章于 2024-01-18 11:25:18 发布

淘淘是只狗

最新推荐文章于 2024-01-18 11:25:18 发布

阅读量210

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_43477721/article/details/110008163

版权

CSS 专栏收录该内容

26 篇文章 6 订阅

订阅专栏

在这里插入图片描述

text-shadow

text-shadow：阴影1，阴影2…
text-shadow: x y z color（x: 表示 x 轴的偏移，y：表示 y轴的偏移，z：表示模糊度，color：阴影的颜色）

<style>
    #box1 {
      font-size: 100px;
      text-align: center;
      margin-top: 200px;
      color: aliceblue;
      text-shadow: 4px 4px 5px #52057b,
        -4px -4px 5px #bc6ff1,
        -8px -8px 5px #bce6eb;;
    }
  </style>
<body>
  <div id="box1">hello world</div>
</body>

在这里插入图片描述

box-shadow

box-shadow：阴影1，阴影2…
box-shadow: x y z m color（x: 表示 x 轴的偏移，y：表示 y 轴的偏移，z：表示模糊度，m: 表示模糊的距离大小，color：阴影的颜色）insert：表示内阴影

<style>
  #box1 {
    width: 100px;
    height: 100px;
    background-color: #000;
    margin: 100px auto;
    /* box-shadow: 5px 5px 5px red; */
    /* box-shadow: 0px 0px 5px 10px #f1d4d4; */
    box-shadow: 10px 10px 5px inset #f1d4d4;
  }
</style>
<body>
  <div id="box1"></div>
</body>

在这里插入图片描述

背景渐变

background-image: linear-gradient(#84fab0, #8fd3f4); 如果没有设置方向，默认从上到下

<style>
  #box1 {
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    margin: 100px auto;
    background-image: linear-gradient(#84fab0, #8fd3f4);
  }
</style>
<body>
  <div id="box1"></div>
</body>

设置相对应的方向

background-image: linear-gradient(to top, #84fab0, #8fd3f4);
background-image: linear-gradient(to left, #84fab0, #8fd3f4);
background-image: linear-gradient(to right, #84fab0, #8fd3f4);

除了使用方向，我们还可以使用角度来进行方向的设置，实现不同角度的渐变 background-image:
linear-gradient(45deg, #84fab0, #8fd3f4);

在这里插入图片描述

重复渐变 background-image: repeating-linear-gradient( #84fab0 20%, #8fd3f4
40%);

在这里插入图片描述

径向渐变中心点默认是中间，形状默认是椭圆形
background-image: radial-gradient(#fee140,#330867);

形状改为圆形
background-image: radial-gradient(circle, #fee140, #330867);

设置中心点
background: radial-gradient(at 20px 20px,#fee140, #330867);

最近边 closest-side
最远边 farthest-side
最近角 closest-corner
最远角 farthest-corner

这些可以组合使用 background: radial-gradient(closest-side circle at 20px
20px,#fee140, #330867);

在这里插入图片描述

transform

1.translate：水平和垂直方向移动，接收两个参数，水平移动距离，垂直移动距离，translateX 和 translateY

<style>
  #box1 {
    width: 200px;
    height: 300px;
    border: 1px solid #000;
    margin: 100px auto;
  }
  #box1:hover {
    /* transform: translate(30px, 40px); */
    transform: translateX(100px);
  }
</style>
<body>
  <div id="box1"></div>
</body>

在这里插入图片描述

2.旋转：rotate(150deg) 接收一个参数，旋转的角度

#box1:hover {
  transform: rotate(250deg);
}

在这里插入图片描述

3.缩放：scale(1.2, 0.5); 接收两个或一个参数，x轴与y轴的缩放比例

#box1:hover {
  transform: scale(1.2, 0.5);
}

在这里插入图片描述

4.skew(40deg, 30deg) 一个参数时：表示水平方向的倾斜角度；两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。

在这里插入图片描述

translate3d(-10px, -20px, -100px)：接收三个值，x 轴偏移量，y 轴偏移量，z
轴偏移量，（translateZ，translateX，translateY）

<style>
  #box1 {
    width: 300px;
    height: 300px;
    background-color: #fbc2eb;
    margin: 100px auto;
    // 添加透视效果，因为页面是二维的，如果不加透视，是无法在页面上表示出来的
    perspective: 400px;
  }
  #son {
    width: 100%;
    height: 100%;
    background-color: #ff9a9e;
    /* transform: translateZ(-100px); */
    transform: translate3d(-10px, -20px, -100px);
  }
</style>
<body>
  <div id="box1">
    <div id="son"></div>
  </div>
</body>

在这里插入图片描述

3d 的使用方式与 2d 大体一致，不过使用的时候需要加上 perspective。

transition

<style>
  #box1 {
    width: 300px;
    height: 300px;
    background-color: #d819a2;
    margin: 100px auto;
    /* 需要变化的值 */
    transition-property: background-color;
    /* 过渡的时间 */
    transition-duration: 4s;
    /* 延迟执行的时间 */
    transition-delay: 1s;
    /* 变化时的变换效果 */
    transition-timing-function: linear;
  }
  #box1:hover {
    background-color: #4facfe;
  }
</style>
<body>
  <div id="box1">
  </div>
</body>

当鼠标放上去的时候，延迟 1 秒后执行，执行的变化是背景颜色的改变，整个变化持续 4 s，使用 linear 效果进行变化。

在这里插入图片描述

可以把多个效果组合在一起

#box1 {
  width: 300px;
  height: 300px;
  background-color: #d819a2;
  margin: 100px auto;
  /* 需要变化的值 */
  transition-property: all;
  /* 过渡的时间 */
  transition-duration: 4s;
  /* 延迟执行的时间 */
  transition-delay: 1s;
  /* 变化时的变换效果 */
  transition-timing-function: linear;
}
#box1:hover {
  background-color: #4facfe;
  box-shadow: 0px 0px 10px 10px #ccc;
  transform: translate(3px, 3px);
}

在这里插入图片描述

animation

animation：动画，animation: myname 10s 2 1s alternate;动画的名称（自己取一个），执行的时间，执行的次数，延迟执行的时间，是否反向执行

// 动画是如何执行的，在这里定义
@keyframes myname {
  35% {
    margin-left: -300px;
  }
  70% {
    margin-left: -600px;
  }
  100% {
    margin-left: -900px;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box1 {
      width: 300px;
      height: 300px;
      margin: 100px auto;
      overflow: hidden;
    }
    #son {
      border: 5px solid #000;
      width: 1200px;
      height: 300px;
      animation: myname 10s 2 1s alternate;
    }
    img {
      float: left;
    }
    #son:hover {
      animation-play-state: paused;
    }
    @keyframes myname {
      35% {
        margin-left: -300px;
      }
      70% {
        margin-left: -600px;
      }
      100% {
        margin-left: -900px;
      }
    }
  </style>
</head>
<body>
  <div id="box1">
    <div id="son">
      <img src="https://cdn.pixabay.com/photo/2020/11/17/17/10/sea-5753128__340.jpg" width="300" height="300">
      <img src="https://cdn.pixabay.com/photo/2020/11/16/22/05/mountains-5750674__340.jpg" alt="" width="300" height="300">
      <img src="https://cdn.pixabay.com/photo/2020/11/16/17/16/snow-5749632__340.jpg" alt="" width="300" height="300">
      <img src="https://cdn.pixabay.com/photo/2020/11/13/17/04/church-5739223__340.jpg" alt="" width="300" height="300">
    </div>
  </div>
</body>
</html>