2022-7-21日课程总结

最新推荐文章于 2024-06-14 14:51:07 发布

赫尔曼.

最新推荐文章于 2024-06-14 14:51:07 发布

阅读量93

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/m0_72741512/article/details/125915817

版权

css3,圆角，阴影，过渡，动画

一，圆角

圆角是将正方形得四个角看成一个圆去定义这个圆得半径。

语句：border-radius:数值;

            /* 四个值：左上角 右上角 右下角 左下角 */
            border-radius: 10px 20px 10px 40px;
            /* 三个值：左上角 右上角和左下角  右下角 */
            border-radius: 10px 20px  40px;
            /* 两个值：左上角和右下角  右上角和左下角 */
            border-radius: 10px 20px;
            /* 以椭圆为基础画圆：x半径 和y半径 */
            border-radius: 10px/40px;

二，阴影

给容器设置阴影：box-shadow

语法：box-shadow：水平阴影的位置垂直阴影的位置阴影的模糊度阴影的颜色

 box-shadow: 40px 10px 15px rgba(165, 163, 163, 0.6) ;

阴影属性的解析

horizontal（水平）：指定水平偏移阴影。正值（即：5px）阴影向右，而为负值（即：- 10px）将使它偏向左。
vertical（垂直）：指定垂直偏移阴影。正值（即：5px）会使阴影在框的底部，而负值（即：- 10px）将使它偏向上。
blur(模糊)：设置的柔化半径。默认值为0，这意味着没有模糊。正值增加了模糊，而负值，实际上缩小了阴影。此属性默认为0。

spread:阴影的尺寸，该参数为可选参数。0px代表阴影和当前的实体一样大，大于0则表示大于实体的尺寸。
color(颜色)：颜色值,也就是设置阴影颜色。

inset:将外部阴影 (outset) 改为内部阴影。该参数为可选参数。

这里演示外部阴影改为内部阴影的效果：

.z{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color:rgba(11, 95, 220, 0.952);
            box-shadow: 50px 10px 15px rgba(165, 163, 163, 0.6) inset;

        }

三，边界图片

border-image 属性可以通过一些简单的规则，将一副图像划分为 9 个单独的部分，浏览器会自动使用相应的部分来替换边框的默认样式。border-image 属性是五个 border-image-* 属性的简写，其语法格式如下

border-image-source 边框背景图片路径

border-image-slice 图片边框向内偏移（切片）

border-image-width 图片边框的宽度

border-image-outset 边框图像区域超出边框的量

border-image-repeat 图片边框是否应该平铺（repeat）铺满(round)拉伸(stretch)(针对切片图像)

下面展示部分效果代码

   .s{
            /* 平铺 */
            width: 300px;
            height: 300px;
            border: 15px solid transparent;
            border-image: url(./border.png) 30 30 round;
        }
        .d{
            /* 拉伸 */
            width: 300px;
            height: 300px;
            border: 15px solid transparent;
            border-image: url(./border.png) 30 30 stretch;
        }

四，过渡

CSS 中提供了 5 个有关过渡的属性，如下所示：

transition-property：设置元素中参与过渡的属性；
transition-duration：设置元素过渡的持续时间；
transition-timing-function：设置元素过渡的动画类型；
transition-delay：设置过渡效果延迟的时间，默认为 0；
transition：简写属性，用于同时设置上面的四个过渡属性。

要成功实现过渡效果，必须定义以下两项内容：

元素中参数与过渡效果的属性；transition-property

过渡效果持续的时间。transition-duration

  <style>
        .div-1{
            width: 300px;
            height: 300px;
            background-color: red;
            border-radius: 50%;
            transition: all 1s;
            transition-timing-function: steps(80,start);

        }
        .div-1:hover{
            height: 600px;
            width: 600px;
        }
    </style>
</head>
<body>
    <div class="div-1"></div>
</body>

transition-timing-function 属性用来设置过渡动画的类型，属性的可选值如下：

五，创建动画动画@keyframes

css动画是什么

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

开始创建

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

并且创建动画准备好：动画的名称以及动画时长

代码展示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .div-1 {
        width: 300px;
        height: 300px;
        border-color: yellowgreen;
        border-radius: 50%;
        /* 引用动画 */
        animation-name: div-a;
        animation-duration: 1s;
        animation-fill-mode: forwards;
      }
      @keyframes div-a {
        25% {
          background-color: red;
  
        }
        50% {
          background-color: orange;

        }
        75% {
          background-color: yellow;
        }
        100% {
          background-color: green;
        }
      }
    </style>
  </head>
  <body>
    <div class="div-1"></div>
  </body>
</html>

5.1指定动画的填充模式

animation-fill-mode 这个 css 属性用来指定在动画执行之前和之后如何给动画的目标应用样式。

animation-fill-mode可以接受以下值：

none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

代码展示：

div_1 {
  width: 300px;
  height: 300px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

5.2反向或交替运行动画

animation-direction 属性指定是向前播放、向后播放还是交替播放动画。

animation-direction 属性可接受以下值：

normal - 动画正常播放（向前）。默认值

reverse - 动画以反方向播放（向后）

alternate - 动画先向前播放，然后向后

alternate-reverse - 动画先向后播放，然后向前

代码演示：

div {
  width: 300px;
  height: 300px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

5.3：指定动画的速度曲线

animation-timing-function 属性规定动画的速度曲线。

animation-timing-function 属性可接受以下值：

ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）

linear - 规定从开始到结束的速度相同的动画

ease-in - 规定慢速开始的动画

ease-out - 规定慢速结束的动画

ease-in-out - 指定开始和结束较慢的动画

cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

代码演示：

.div_1 {animation-timing-function: linear;}
.div_2 {animation-timing-function: ease;}
.div_3 {animation-timing-function: ease-in;}
.div_4 {animation-timing-function: ease-out;}
.div_5 {animation-timing-function: ease-in-out;}