CSS3新增特性和CSS3动画

CSS3新特性

一、选择器的拓展

css3引入了一些新的选择器,使选择元素更加便捷和灵活。

1.属性选择器

属性选择器是允许按照元素的某个属性来选择元素的.例如，可以根据元素的属性值选择特定的元素。

html

 <a href="" class="target">哈哈哈</a>
 <a href="">行行行</a>

css

a[class] {
	 color: yellowgreen;
 }

浏览器效果

2.伪类选择器

css3引入了更多的伪类选择器，可以选择元素的特殊状态或位置。例如，你可以选择第一个子元素鼠标悬停元素等.

html

 <a href="" class="target">哈哈哈</a>
 <a href="">行行行</a>

css

a:first-child{
            font-weight: bold;
        }

浏览器效果
在这里插入图片描述

3.伪元素选择器

可以用于选择元素的特定部分，例如元素的第一个字、第一个字母等。

a::first-line {
            /* 第一个字母的样式规则 */ 
      }

二、盒子模型的增强

CSS3对盒子模型进行了一些改进，使得我们能够更加灵活地控制元素的布局和尺寸.

1.box-sizing属性

可以用于更改元素的盒子模型算法，使得元素的宽度和高度包括边框和内边距。

默认值是content-box，这意味着元素的宽度和高度只包括内容的宽度和高度，而不包括边框（border）、内边距（padding）和外边距（margin）。

如果将box-sizing属性的值设置为border-box，则元素的宽度和高度将包括内容的宽度和高度、边框和内边距，但不包括外边距。

div{
box-sizing:border-box
}

2.边框圆角(border-redius)

通过设置边框圆角属性，可以使元素的边框呈现圆角效果。

给div设置圆角边框
div{
        width: 200px;
        height: 200px;
        border: solid 1px #000;
        border-radius: 10px;
  }

浏览器效果
在这里插入图片描述

3.盒阴影(box-shadow)

用于给元素添加阴影效果。阴影可以设置水平和垂直偏移量、阴影的模糊程度、阴影的颜色等。

div{
        width: 200px;
        height: 200px;
        border: solid 1px #000;
        box-shadow: 5px 5px 5px pink;
       }

浏览器效果
在这里插入图片描述

三、过渡和动画效果

CSS3 引入了过渡（transition）和动画（animation）功能，使得元素的状态改变更加平滑和生动。

1.过渡效果

通过设置过渡属性，可以在元素状态改变时实现平滑的过渡效果。

<a href="">哈哈哈哈哈哈哈哈</a>

a{
        transition: 0.9s;
       }
       a:hover{
        background-color: pink;
       }

浏览器效果:因为是动画所以不展示了自己可以动动手尝试一下.

2.动画效果

通过使用关键帧动画，可以创建自定义动画效果。

<img src="./img/头像.png" alt="">

 @keyframes spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }

        }

        img {
            animation: spin 2s linear infinite;
        }

浏览器效果：浏览器效果:因为是动画所以不展示了自己可以动动手尝试一下.

四、响应式布局

CSS3 引入了响应式布局的功能，使得网页能够根据不同设备的屏幕大小和分辨率进行自适应布局。

1.媒体查询(media query)

用于针对不同的媒体类型定义不同的样式。媒体查询可以针对不同的屏幕尺寸、设备类型、分辨率等条件来应用不同的样式规则。

 @media (max-width:600px){
            body{
                width: 100vw;
                height: 100vh;
                background-color: pink;
            }
        }

2.弹性布局(Flexbox)

它是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。

Flexbox模型中的元素可以是行或者列，并且可以灵活地改变大小和形状。使用Flexbox布局，可以轻松地实现元素的水平和垂直居中、元素的重新排序、元素的扩展等操作。

.box{
            width: 200px;
            height: 200px;
            background-color: beige;
            display: flex;
            justify-content: space-around;
        }

在这里插入图片描述

CSS3动画

一、是什么

是为层叠样式表建议的允许可扩展标记语言（XML）元素使用CSS的动画的模块
即指元素从一种样式逐渐过渡为另一种样式的过程

常见的动画效果有很多，如平移、旋转、缩放等等，复杂动画则是多个简单动画的组合

css实现动画的方式，有如下几种：

transition 实现渐变动画

transform 转变动画

animation 实现自定义动画

二、实现方式

transition 实现渐变动画
transition的属性如下：

property:填写需要变化的css属性

duration:完成过渡效果需要的时间单位(s或者ms)

timing-function:完成效果的速度曲线

delay: 动画效果的延迟触发时间

transform 转变动画
包含四个常用的功能：

translate：位移

scale：缩放

rotate：旋转

skew：倾斜

一般配合transition过度使用

注意的是，transform不支持inline元素，使用前把它变成block

三、总结

属性	含义
ransition（过度）	用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同
transform（变形）	用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表”
translate（移动）	只是transform的一个属性值，即移动
animation（动画）	用于设置动画属性，他是一个简写的属性，包含6个属性