CSS新特性尝鲜

作者：凸头

CSS 作为前端开发中不可或缺的一部分，它的发展一直备受关注。在过去的几年里，CSS 增加了许多新特性，这些新特性使得 CSS 更加灵活、强大和易用。本文将介绍三个 CSS 新特性：:has 选择器、 @property 和 animation-timeline。

一、:has 选择器

千呼万唤使出来，"传说中的父类选择器" 它终于来了，它允许我们根据某个元素是否包含特定子元素来选择父元素。这在以前是无法实现的，因为 CSS 选择器只能基于元素本身或其属性来选择元素。

有了:has选择器，我们就可以用简单的css实现一些以前需要书写复杂CSS和用JS来实现的效果了。

比如现有如下页面结构，编辑按钮默认是隐藏的，要求实现效果：只有鼠标悬浮在标题元素时编辑按钮显示。

html 复制代码

<div class="conatiner">

  <div class="title">标题</div>

  <div class="btn-group">

    <i class="bald-edit" style="opacity:0"></i>

    <i class="bald-more"></i>

  </div>

</div>

图源：@凸头

由于 title 元素和 bald-edit 元素相当于在同层级，所以 title 的鼠标悬浮是控制不了不是它子元素的其他元素的。在以前，我们只能通过JS去监听titile元素的鼠标移入移出事件来控制编辑按钮显示的隐藏。

而使用:has选择器，只需要一行CSS就可以轻松实现：

css 复制代码

.conatiner:has(.title:hover) .bald-edit {

  opacity: 1;

}

图源：@凸头

在线体验地址

二、@property

@property 是一个新的CSS自定义属性语法，它允许开发者显式地定义css自定义属性，并允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。是CSS变量(CSS variables)声明变量的升级版本 ，比CSS变量更加规范和严谨。

1.语法标准

css 复制代码

@property --name {

  syntax: <type>;

  inherits: [true | false];

  initial-value: <value>;

}

--name：自定义属性名称，以--开头
syntax：自定义属性类型，常用类型有<length>、<number>、<percentage>、<color>等
inherits：是否继承父元素的属性值
initial-value：自定义属性初始值

2.使用场景

看了语法定义似乎一脸懵逼 ，现在我们来用它实现一个渐变背景的过渡动画，在之前渐变背景的过渡动画只能一些奇淫巧计来实现。

首先创建一个MapMost Alpha文字的标签。

html 复制代码

<h1>MapMost Alpha</h1>

接下来实现渐变背景，定义两个自定义属性 --c1 --c2 并初始化颜色

css 复制代码

@property --c1 {

  syntax: '<color>';

  inherits: false;

  initial-value: #4634ee;

}

@property --c2 {

  syntax: '<color>';

  inherits: false;

  initial-value: #d77f69;

}

h1 {

  background: linear-gradient(45deg, var(--c1), var(--c2));

}

这时候背景还不会动起来，还需要添加动画

css 复制代码

@keyframes move {

  50% {

    --c1: #d77f69;

    --c2: #4634ee;

  }

  100% {

    --c1: #4634ee;

    --c2: #d77f69;

  }

}



h1 {

  animation: move 5s linear infinite;

}

接下来，就是见证奇迹的时刻。

图源：@凸头

在线体验地址

三、animation-timeline

animation-timeline 是一个新的 CSS 动画属性，它允许我们通过滚动条的滚动位置来控制动画的执行。

1.滚动驱动动画有什么用

要知道在 animation-timeline 出现之前，我们只能通过JS 来监听滚动条事件 onscroll 来获取滚动条的状态，再对相应需要动画的元素操作，非常繁琐且有性能问题 。BUT！！！

CSS的滚动驱动动画考虑到用户的操作流畅性 ，会优先保证用户界面的响应。所以滚动驱动动画的出现也有一定的划时代 意义，以前用JS 才能完成的效果，大部分都可以被替代。

2.简单示例

首先来看一个使用animation-timline实现的简单案例

图源：@凸头

我们可以看到在这个案例中，当鼠标拖动滚动条时，太阳月亮的位置按照轨迹移动，天空的颜色也在白天和黑夜中变换。

实现这个效果的关键是 animation-timeline 属性，container 是一个可以滚动的容器，为它的 scroll-timeline-name 指定名称为 --sky-rotate，scroll-timeline-axis 指定为y轴触发，再为 sky 元素指定 animation-timeline 为刚刚定义的 --sky-rotate，这样就把 sky 元素上的动画与 container 的滚动条绑定在了一起。

css 复制代码

.container {

  scroll-timeline-name: --sky-rotate;

  scroll-timeline-axis: y;

}



.sky {

  animation: auto rotate 10s linear forwards;

  animation-timeline: --sky-rotate;

}

在线体验地址

3.语法标准

css 复制代码

animation-timeline: scroll();

<scroll()> =  scroll( [ <scroller> || <axis> ]? )  



<scroller> = [nearest|root|self]

<axis> = [block|inline|x|y]

更多语法请阅读MDN文档

总的来说，这些 CSS 新特性使得 CSS 更加灵活、强大和易用。它们为我们提供了更多的选择和控制方式，帮助我们更好地实现设计目标。如果你还没有尝试过这些新特性，那么现在就可以开始使用它们，让你的 CSS 代码更加高效和出色！但考虑到浏览器兼容性 问题，在生产项目中请谨慎使用！

关注Mapmost，持续更新GIS、三维美术、计算机技术干货

Mapmost是一套以三维地图和时空计算为特色的数字孪生底座平台,包含了空间数据管理工具(Studio)、应用开发工具(SDK)、应用创作工具（Alpha）。平台能力已覆盖城市时空数据的集成、多源数据资源的发布管理，以及数字孪生应用开发工具链，满足企业开发者用户快速搭建数字孪生场景的切实需求，助力实现行业领先。

欢迎进入官网体验使用：Mapmost------让人与机器联合创作成为新常态