css3 新特性 + css3 动画

最新推荐文章于 2024-05-21 23:21:19 发布

米朵家的博客

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量1k

点赞数 22

文章标签： css3 前端 javascript

本文链接：https://blog.csdn.net/WZH15075051915/article/details/136291851

版权

1. css3 新特性

css3的新特性有选择器、盒模型、颜色、背景、边框和阴影、文字效果、布局和流式布局、多列布局、动画和过渡、响应式设计等

选择器：
- 属性选择器：选择具有特定属性的元素，例如 [attr=value]。
- 伪类选择器：为特定状态的元素添加样式，例如 :hover、:active、:visited。
- 伪元素选择器：选择特定部分的元素，例如 ::before、::after。
- 多重选择器：使用逗号分隔来同时选择多个元素，例如 element1, element2。
盒模型：Box-sizing 属性改变了默认的 CSS 盒模型，使其更容易进行布局。
颜色：
- CSS3 增加了对透明度的支持，使用 rgba()、hsla() 或 opacity 来设置。
- CSS3 提供了新的颜色空间，如 RGBA、HSL 和 HSLA。
背景：
- background-size：允许您更改背景图像的大小。
- background-repeat：使您能够更改背景图像的重复行为。
- background-position：允许您在水平和垂直方向上移动背景图像。
- background-image：允许多背景图像同时使用。
边框和阴影：
- border-radius：为边框添加圆角。
- box-shadow：为元素添加阴影效果。
文字效果：
- text-shadow：为文本添加阴影效果。
- text-overflow：处理溢出文本的显示方式。
布局和流式布局：
- Flexbox：用于一维布局的 CSS3 新布局模型。
- Grid：用于二维布局的 CSS3 新布局模型。
多列布局（Multi-column Layout）：CSS3 提供了一种创建多列文本或布局的方法，类似于报纸的排版。
动画和过渡（Animations and Transitions）：CSS3 支持关键帧动画和过渡效果，用于在 CSS 中创建动态效果。动画可以通过 transition 和 animation 属性进行控制。
响应式设计（Responsive Design）：CSS3 提供了一些特性，如媒体查询（Media Queries），允许开发人员创建在不同设备和屏幕尺寸上都能良好显示的响应式网页设计。
其他特性：
- CSS3 增加了对 SVG 图像的支持。
- CSS3 提供了一种新的方式来定义字体（@font-face）。
- CSS3 支持自定义的伪元素（例如，::before 和 ::after）。
- CSS3 支持更复杂的 CSS 选择器，如子选择器（child selectors）、相邻同胞选择器（adjacent sibling selectors）等。
- CSS3 支持轮廓（outline）和内轮廓（outline-offset）属性，它们在突出显示元素时非常有用。
- CSS3 支持线性渐变（linear gradients）和径向渐变（radial gradients）。
- CSS3 支持在页面上直接绘制图形，如矩形、圆形、椭圆等，这是通过使用 canvas 元素和 JavaScript 来实现的。
- CSS3 支持生成字体的复杂样式，包括字体装饰（font decorations）如上标（superscript）、下标（subscript）等。
在HTML5中新出现的属性在CSS3中也被支持，如 video, audio, placeholder, input-type-radio, input-type-checkbox, input-type-number, input-type-range, input-type-date, input-type-time, input-type-datetime, input-type-month, input-type-week, input-type-email, input-type-search, input-type-tel, input-type-color, progress, meter, fieldset, output, keygen, datalist, command, map, area, track, wbr 等。这些新属性使HTML5能够更好地支持新的Web应用和新的用户需求。

2. css3 动画

CSS3动画属性可以分为以下几个部分：

Transform

Transform：这个属性虽然看起来可以实现动画的效果，但实际上它更多的是用于图形的变形，而不是真正的动画。

transform  混合属性:
    值:
        translate(x,y)      偏移/位移  右、下是正值   左、上是负值
        rotate()            旋转  单位是deg度   正值是顺时针  负值是逆时针
        skew()              倾斜  单位是deg度   
        scale()             缩放  以1为基点  1.2 ==> 宽高 * 1.2 
  transform-origin:  修改中心点
    默认： center  middle
    left  center right  top middle  bottom

Transition
Transition：这是一个简单的动画属性，它可以用来设置元素在不同状态之间的转换，如透明度的变化、位置的变化等。：这是个名副其实的动画属性，它是Transition属性的扩展，功能非常强大。可以通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现复杂的动画效果。

// 那个属性发生变化了  
transition-property: width, height;
  // 过渡动画执行时长
  transition-duration: 2s;
  // 过渡动画执行速度     linear匀速的
  transition-timing-function: linear;
  // // 过渡动画是否延时执行
  transition-delay: 2s;

  // transtion 混合属性
  transition: width 2s linear ,height 4s linear;

3.帧动画

最核心的是利用CSS3中Animation动画，确切的说是使用animation-timing-function（参考：animation-timing-function）的阶梯函数 steps(number_of_steps, direction)（参考：animation-timing-function）来实现逐帧动画的连续播放。

@keyframes dou {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(-30deg);
  }
  // from {
  //   transform: rotate(0deg);
  // }
  // to {
  //   transform: rotate(15deg);
  // }
}
// 帧动画名称
  animation-name: dou;

  // 帧动画时长
  animation-duration: 3s;

  // 帧动画执行速度
  animation-timing-function: linear;

  // 帧动画延迟时长
  // animation-delay: 1s;

  // 帧动画执行次数   infinite无穷、无限
  animation-iteration-count: infinite;

  // 帧动画是否保留最后一帧  backwards不保留  forwards保留
  animation-fill-mode: backwards;

  // 帧动画是否反转执行
  // animation-direction: reverse;
  
  // 帧动画的执行状态  running播放   paused暂停
  animation-play-state: paused;

  animation: dou 3s linear 2 forwards;