![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
功能demo
柑橘乌云_
希望我的博客,能帮你解决学习或工作中所遇到的问题
展开
-
CSS 轻松实现常见各类奇形怪状按钮
基于上述的实现,我们不难发现,一些稍微特殊的按钮,无非都通过拼接、障眼法、遮罩等方式实现。渐变(线性渐变、径向渐变、多重渐变)遮罩mask裁剪clip-path变形transform发挥了重要的作用,熟练使用它们,我们对于这些图形就可以信手拈来,基于它们的变形也能从容面对。上述的图形,再配合,基本都能实现不规则阴影。再者,更为复杂的图形,如下所示:还是切图吧,CSS 虽好,实际使用中也需要考虑投入产出比。原创 2024-06-24 10:48:58 · 750 阅读 · 0 评论 -
原生轮播图(下一页切换,附带指示器)
原生走马灯原创 2024-05-06 13:47:16 · 299 阅读 · 0 评论 -
div模拟textarea文本域轻松实现高度自适应
看效果可以看到div在获取焦点的时候,会有个黑色边框,如果想要去掉需要设置outline属性为none。需要注意这个div可以识别富文本需要注意安全问题,最好可以做html标签的过滤。这里提供一个平替方法 就是div+contenteditable属性。记录了四种实现textarea自适应的方法,希望可以帮助到敏娜。众所周知文本域不能做到随着内容自适应高度的。原创 2024-04-22 16:27:12 · 301 阅读 · 0 评论 -
css实现宽度自适应的波浪线(动态、静态波浪线)
属性控制两个空格占据的宽度足够宽,这样空格字符的装饰线的尺寸一定可以充满整个容器,此时只要设置装饰线的类型是波浪线,宽度100%自适应的波浪线效果就实现了。也很明显,就是波浪线的颜色无法实时跟着文字的颜色发生变化,适用于文字颜色不会多变的场景。:这种实现方法的优点在于非常容易理解,非常容易上手,然后的话颜色很好控制,使用。就是设置两个空格字符,然后两端对齐,这个时候的波浪线自然就正好横跨整个元素了。是线条边缘平滑,效果细腻,易理解,易上手,易维护。属性,代码更轻便,更容易理解,更优雅。原创 2024-04-19 14:20:16 · 642 阅读 · 0 评论 -
文字内波浪css效果
【代码】文字内波浪css效果。原创 2024-04-19 14:20:04 · 247 阅读 · 0 评论 -
百分比padding---------实现图片固定比例并自适应布局 以及aspect-ratio属性、cqw单位
这种方式固然可以但是存在一个不好的体验问题:那就是随着页面加载的进行,图片占据的高度会有一个从。在文档流中css的margin和padding这两个属性垂直方向的百分百值都是基于宽度计算的,这个也是本次布局方式的核心。记住,如果遇到这种需求场景,没有比百分比。2.使用vw单位,加入我们的图片不是通栏,左右有间距的话,那么就需要用calc去计算高度的值。但,有时候,图片宽度并不是100%容器的,例如,图片宽度50%容器宽度,图片高宽比。到计算高度的图片变化,视觉上会有明显的元素跳动,代码层面会有布局重计算。原创 2024-04-16 14:44:31 · 608 阅读 · 0 评论 -
优惠券布局的最终方案------css属性mask
【代码】优惠券布局的最终方案------css属性mask。原创 2024-04-15 14:33:39 · 495 阅读 · 0 评论 -
纯css实现文本隐藏(全兼容版本和非全兼容版本)cv就能用!!!
【代码】纯css实现文本隐藏(全兼容版本和非全兼容版本)原创 2024-04-15 10:13:13 · 184 阅读 · 0 评论 -
歌词滚动效果(原生)
【代码】歌词滚动效果(原生)原创 2024-01-04 14:20:42 · 500 阅读 · 0 评论