CSS3新特性

最新推荐文章于 2024-07-11 20:27:42 发布

爱学习的小欣欣

最新推荐文章于 2024-07-11 20:27:42 发布

阅读量87

点赞数 1

分类专栏： CSS 文章标签： css3

本文链接：https://blog.csdn.net/weixin_47227886/article/details/124041416

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1. 选择器

1.1 基本选择器

id选择器（#id）；
类选择器（.class）；
标签选择器（div，p）；
后代选择器（h1 p）；
相邻后代选择器（子选择器）（ul>li）；
兄弟选择器（li~a）
相邻兄弟选择器（li+a）

1.2 属性选择器

a[rel="external"]

1.3 伪类选择器

a:link 未访问的链接，把没有点击过的链接选出来；
a:visited 选择点击过的链接；
a:hover 选择鼠标经过的链接；
a:active 选择鼠标正在按下还未弹起的链接。

1.4 伪元素选择器

::before
::after

1.5 通配符选择器

2. 圆角与边框

border-radius:圆角
border-top-left-radius:左上角
让正方形变成圆圈：border-radius:50%
border-shadow：盒子阴影
border-image：边界图片

3. 背景与渐变

background-image 添加背景图片
background-size 指定背景图像的大小
background-origin 制定背景图像的位置区域(border-box、padding-box、content-box)
background-clip 背景剪裁属性是从指定位置开始绘制
background:linear-gradient (方向，开始颜色，结束颜色)

4. 动画

定义：使元素从一种样式逐渐变化到另外一种样式的效果 @keyframes

keyframes关键帧，用来决定动画变化的关键位置
keyframes 控制关键位置，并不是所有的位置
animationname：必写项，定义动画的名称
keyframes-selector：必写项，动画持续时间的百分比 0% - 100%之间，或者使用form和to关键字也可以设置，form代表0%，to代表100%
animation-name：keyframename | none 设置对象所应用的动画名称
animation-duration：time 设置对象动画的持续时间

创建动画，并且绑定到一个选择器，规则内指定一个css样式和动画逐步从目前的样式更改为新的样式，至少制定两个css动画属性到一个选择器上，规定动画的名称，规定动画的时长，当动画到25%~50%时改变背景颜色，然后当到100%完成时再次改变的例子。

<head>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: red;
      
      animation: myfirst 5s;
      
    }

    @keyframes myfirst {
      0% {background: red;}
      25% {background: yellow;}
      50% {background: blue;}
      100% {background:green;}
    }
  </style>
</head>
<body>
  <div></div>
</body>

5. 变换

5.1 2D变换

rotate() 旋转
translate()平移
scale( )缩放
skew()扭曲/倾斜

5.2 3D变换

开启3d空间（transform-style: preserve-3d）; 一般给父元素开启
子元素设置3d变换效果
rotate
- rotateX() 指对象在X轴上的旋转角度（变换基点： 50% 50% 0）
- rotateY() 指对象在Y轴上的旋转角度（变换基点： 50% 50% 0）
- rotateZ() 指对象在Z轴上的旋转角度（变换基点： 50% 50% 0）
translate
- translateZ() 指对象在Z轴上面的平移（变换基点： 50% 50% 0）
- scaleZ() 指定对象的Z轴缩放（变换基点： 50% 50% 0）(无太大意义，开启3d空间)

6. 过渡

定义：允许css的属性值在一定时间区间内平滑的过渡。在鼠标点击，鼠标滑过或对元素任何改变中触发，并圆滑地以动画形式改变css的属性值。

transition-property 过渡效果的css属性名
transition-duration 完成过度需要多少秒或毫秒
transition-timing-function 速度效果的速度曲线
transition-delay 过渡效果何时开始

要实现这一点必须规定两项内容：

指定要添加效果的CSS属性
指定效果的持续时间

鼠标经过2s后宽度变更宽的例子：

<head>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: red;
      transition: width 2s;
      -webkit-transition: width 2s;
    }

    div:hover {
      width: 200px;
    }
  </style>
</head>
<body>
  <div></div>
</body>

7.flex弹性布局

当我们父盒子设置为flex布局以后，子元素的float、clear 和 vertical-align 属性将失效；
采用 flex布局的元素，称为”flex容器“，他的所有硒元素自动称为容器成员，称为”flex项目“；

布局原理：通过给父盒子添加flex属性，来控制盒子的位置和排列方式

父项常见属性：

flex-direction ：设置主轴的方向
jusitify-content：设置主轴上的子元素排列方式
felx-wrap：指定弹性盒子的子元素换行方式
align-items ：水平对齐
align-content ：各个行的对齐，而不是子元素对齐
flex-flow：flex-direction 和flex-wrap属性的复合属性

子项常见属性：

flex：子项目占的份数
align-self：控制子项自己在侧轴的排列方式
order：属性定义子项的排列顺序（前后顺序）

flex：1

让所有弹性盒模型对象的子元素平均分剩余空间(自动放大占位)

爱学习的小欣欣

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3新特性

1. 选择器1.1 基本选择器id选择器（#id）；类选择器（.class）；标签选择器（div，p）；后代选择器（h1 p）；相邻后代选择器（子选择器）（ul>li）；兄弟选择器（li~a）相邻兄弟选择器（li+a）1.2 属性选择器a[rel="external"]1.3 伪类选择器a:link 未访问的链接，把没有点击过的链接选出来； a:visited 选择点击过的链接； a:hover 选择鼠标经过的链接； a:active 选择鼠标
复制链接

扫一扫