伪元素 --- css基础的使用

SortWorld
100 阅读4分钟

一、stylus使用

npm i g -stylus

需要编译成css文件

stylus -w common.styl -o xxx.css,这样就会监听我们的编译程序，不会退出。

image.png

二、css基础代码元素

display inline-block行内块级元素

既然有inline-block，要弹性布局有什么用？

  • 可以适配不同的设备
  • 页面布局不仅完成行列布局，创建自己独有的格式化上下文

text-decoration none ，将超链接a 标签文字的下划线去除

该行代码 transition all .3s ease 是CSS过渡动画属性，作用是为元素的所有可动画属性变化添加平滑过渡效果。具体来说：

  • transition 是CSS过渡属性的简写形式
  • all 表示对元素的所有CSS属性变化都应用过渡效果
  • .3s 指定过渡持续时间为0.3秒
  • ease 定义过渡速度曲线为先慢后快再慢的缓动效果

当该元素的CSS属性（如颜色、尺寸、位置等）发生变化时，不会立即生效，而是在0.3秒内平滑过渡，提升用户界面的交互体验。在Stylus文件中使用时无需加分号，体现了其简洁的语法特性。

如何让盒子水平居中， margin 0 auto

image.png

三、伪元素

&::before伪元素选择器，&::after来看下写两个伪元素选择器的页面效果，html里面是没有这两个元素的，但是我们可以在css选择器当中添加伪元素。

image.png

让我们来看下css的冷门考点-伪元素，不需要在html声明，它在css 中使用类似伪类的::before，::after, 表示选中元素内容开始之前，内容结束之后，可以像元素一样出现在文档流中，但是又不是标签，我们将这种元素称为伪元素。例如有：下划线，向右点进去的箭头。出现在dom树之中

为什么说是伪元素呢？因为是在css当中声明出现的；好处：不用写标签，就可以完成界面效果；before伪节点依赖于content "start" 这个属性。content 必须有伪元素里面的内容，一般为空。

四、伪元素的应用

我们可以看看WeUI的伪元素，用它很方便，不用改DOM

image.png

如何在界面的最右边添加跳转按钮呢？

 **<div class="box">&gt;</div>**

不用伪元素像这样的话就会很麻烦。伪元素不用在DOM元素中添加标签

image.png

直接操作DOM符的话，可以看到代码

image.png

当我们使用伪元素的话就会轻松很多，微信的源码使用的就是这个样式。

      .box::before {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        right: 10px;
        top: 45px;
        border: 1px solid black;
        border-left-color: transparent;
        border-bottom-color: transparent;
        transform: rotate(45deg);
      }

可以看到同样实现了一样的效果条件。

image.png

五、CSS动画效果属性解析

  1. transform: scaleX(0)
  • 功能 ：将元素在水平方向上缩放到0倍宽度
  • 视觉效果 ：元素水平方向完全“拍扁”，呈现消失状态（垂直方向不受影响）
  • 应用场景 ：常用于初始化隐藏下划线、边框等水平方向的装饰元素
  1. :hover 伪类
  • 触发条件 ：当鼠标指针悬停在元素上时激活
  • 作用机制 ：可以动态修改元素及其子元素/伪元素的样式
  • 常见用法 ：配合 transform 实现悬停时的显示/放大效果，如： .link:hover::after { transform: scaleX (1); } ``` 3. transform-origin: bottom left
  • 定义 ：设置变换的原点位置为元素的左下角
  • 动画影响 ：
    • 缩放时会从左下角开始向右侧扩展
    • 旋转时会以左下角为轴心转动
  • 下划线动画原理 ： 当 scaleX(0) 变为 scaleX(1) 时，由于原点在左下角，会产生“从左向右绘制”的视觉效果

组合效果示例

.link {
  position: relative;
}
.link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #000;
  transform: scaleX(0); /* 初始隐藏 */
  transform-origin: bottom left; /* 从左
  下角开始变换 */
  transition: transform 0.3s ease; /* 平
  滑过渡 */
}
.link:hover::after {
  transform: scaleX(1); /* 悬停时显示下划
  线 */
}

这种组合常用于实现导航链接、按钮的下划线动画，通过控制变换原点和过渡时间，可以创造出自然的交互反馈效果。

六、总结

  1. 作为前端开发效率工具，Stylus以简洁语法和强大功能深受开发者喜爱。只需两步即可快速上手：npm install -g stylus，stylus -w common.styl -o xxx.css
  2. transition all .3s ease 是CSS过渡动画属性，ease 定义过渡速度曲线为先慢后快再慢的缓动效果
  3. 不需要在html声明，它在css 中使用类似伪类的::before，::after,before伪节点依赖于**content "start"** 这个属性。content 必须有伪元素里面的内容，一般为空。
  4. 有了伪元素不用在DOM元素中添加标签，当我们使用伪元素的话就会轻松很多。
  5. transform: scaleX(0)，将元素在水平方向上缩放到0倍宽度。:hover 伪类，触发条件 ：当鼠标指针悬停在元素上时激活。
avatar
文章
阅读
粉丝