![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
花样CSS
文章平均质量分 87
整理了一些不太常见的CSS样式,整点花活。
努力的小朱同学
未来很长,梦想很远。
展开
-
CSS 之 渐变色边框
我下面列举三种方案来帮你排忧解难:1、 border-image2、 伪元素+透明边框3、 background-image+background-clip+background-origin原创 2022-12-06 21:40:43 · 20538 阅读 · 15 评论 -
CSS 之 圆形波浪进度条效果
本篇博客讲述了如何实现一个圆形波浪进度条的样式效果,该样式的加载进度条可以用在页面跳转或数据处理等情况下的加载动画,比起普通的横条进度条来说,样式效果更生动美观。主要用到:overflow、border-radius、position、帧动画以及自定义属性等相关CSS属性。原创 2024-05-13 14:39:47 · 574 阅读 · 2 评论 -
CSS 之 图片九宫格变幻效果
本篇博客用于讲解如何实现图片九宫格变幻的样式效果,将图片分为九块填充在3×3的的九宫格子元素中,并结合`grid`、`hover`、`transition`等CSS属性,实现元素`hover`时,九宫格子元素合并为一张完整图片的动画效果。为了简化代码,demo中通过JS设置CSS变量的方法,优化了元素背景的设置过程,减少了代码的繁杂度。最后还结合js的点击事件实现了一个简易的点击拼图demo。原创 2024-01-27 21:11:36 · 1485 阅读 · 0 评论 -
CSS 之 跑马灯边框
尝试实现一下跑马灯样式的边框,虽然这种样式并不常见(基本没卵用),其使用场景我至今没想到,但是它足够花里胡哨,玩的就是花活。经过一番实践,我实现了两种形态的跑马灯样式边框,其效果如下图所示。其主要使用的CSS属性有:`overflow`、`position`、`transform`、` animation`、`@keyframes`以及`::after`和`::before`等等。原创 2024-01-15 17:15:01 · 1794 阅读 · 0 评论 -
CSS 之 posiiton:fixed 固定定位在父元素含有 tranform 属性时会失效,变成 absolute 的效果
推测原因: 我一开始认为是因为父元素设置 `tranform` 属性后,就创建了一个新的BFC(块格式上下文),该元素内部的样式相对独立,所以子元素的`fixed`定位,才会以父元素为参照对象。但是经过实验,其他可以创建BFC的样式却不会导致这种特性,说明还跟`tranform`某些特性有关。浏览器限制: 经过我的测试,这个特性表现,目前在大部分主流浏览器中存在(Chrome、FireFox、Safari、Edge、猎豹、搜狗、360浏览器)原创 2022-09-08 10:45:31 · 1068 阅读 · 2 评论 -
CSS实现文字描边效果
文字描边分为两种:内外双描边和单外描边,也就是指在给文字加上描边效果后,描边的方向是向内外同时占用文字空间还是只向外扩充文字空间的区别。原创 2022-08-14 22:22:07 · 20134 阅读 · 0 评论