Web秀
首页
专栏
文章
问答
热点
导航
实例
文章
登录
首页
前端
JavaScript
Vue.js
CSS
Uni-App
专栏
问答
工具
全网热点
导航
前端
设计
实例
登录
综合
Uni-App
Webpack
React
Html
Electron-Vue
Electron
Vue-Nuxt
TypeScript
NodeJs
web前端
Vue
Css
JavaScript
比特币
ThreeJs
工具类
面试
服务器
小程序
其他
展开
推荐
最新
热榜
chokcoco
Lv0
iCSS前端趣闻
0
关注
0
关注者
关注
chokcoco
11月前
Css
【动画进阶】有意思的 Emoji 3D 表情切换效果
最近,群里面的同学发了这么一个非常有意思是动画效果:原效果地址--CodePenDemo--LetterHop当然,原效果,主要使用了GSAP动画库以及一个3D文字JavaScript库:import{Those3DTexts}from"https://cdn.skypack.dev/that-3d-text-library";import{gsap}from"https://cdn.skypack.dev/gsap";import{MotionPathPlugin}from"https://cdn.skypack.dev/gsap/MotionPathPlugin";gsa...
452409
1959
0
chokcoco
Lv0
iCSS前端趣闻
0
关注
0
关注者
关注
chokcoco
1年前
Css
现代 CSS 高阶技巧,完美的波浪进度条效果!
本文是CSSHoudini之CSSPaintingAPI系列第三篇。现代CSS之高阶图片渐隐消失术现代CSS高阶技巧,像Canvas一样自由绘图构建样式!在上两篇中,我们详细介绍了CSSPaintingAPI是如何一步一步,实现自定义图案甚至实现动画效果的!在这一篇中,我们将继续探索,尝试使用CSSPaintingAPI,去实现一些过往纯CSS无法实现的效果。CSSPaintingAPI再简单快速的过一下,什么是CSSPaintingAPI。CSSPaintingAPI是CSSHoudini的一部分。而H
519892
2202
0
chokcoco
Lv0
iCSS前端趣闻
0
关注
0
关注者
关注
chokcoco
1年前
Css
现代 CSS 之高阶图片渐隐消失术
在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样:<divclass="img"></div>div{width:300px;height:300px;background:url(image.jpg);transition:.4s;}.img:hover{opacity:0;}但是,CSS的功能如此强大的今天。我们可以利用CSS实现的渐隐效果已经不再是如此的简单。想想看,下面这样一个效果,是CSS能够实现的么?答案是肯定的!本文就将一步一步,从零开
518492
2196
0
chokcoco
Lv0
iCSS前端趣闻
0
关注
0
关注者
关注
chokcoco
1年前
Css
现代 CSS 高阶技巧,像 Canvas 一样自由绘图构建样式!
在上一篇文章中--现代CSS之高阶图片渐隐消失术,我们借助了CSS@Property及CSSMask属性,成功的实现了这样一种图片渐变消失的效果:CodePenDemo--基于@property和mask的文本渐隐消失术但是,这个效果的缺陷也非常明显,虽然借助了SCSS简化了非常多的代码,但是,如果我们查看编译后的CSS文件,会发现,在利用SCSS只有80的代码的情况下,编译后的CSS文件行数高达2400+行,实在是太夸张了。究其原因在于,我们利用原生的CSS去控制400个小块的过渡动画,控制了400个C
520117
2148
0
chokcoco
Lv0
iCSS前端趣闻
0
关注
0
关注者
关注
chokcoco
1年前
Css
开局一张图,构建神奇的 CSS 效果
假设,我们有这样一张Gif图:利用CSS,我们尝试来搞一些事情。图片的GlitchArt风在这篇文章中--CSS故障艺术,我们介绍了利用混合模式制作一种晕眩感觉的视觉效果。有点类似于抖音的LOGO。像是这样:假设,我们有这样一张图:只需要一个标签即可<divclass="mix"></div>给两张同样的图片,叠加上青色#0ff和红色#f00,并且错开一定的距离,两张图都要加上background-blend-mode:lighten,其中一张再加上mix-blend-mode:d
522424
2188
0
chokcoco
Lv0
iCSS前端趣闻
0
关注
0
关注者
关注
chokcoco
1年前
Css
【动画进阶】有意思的网格下落渐次加载效果
最近,群友贴了一个非常有意思的动画效果,整体动画效果如下:点击某个按钮后,触发一个动画效果,原本的网格内容,将按顺序(又带点随机的效果)从高处下落进行加载填充动画。当然,我个人认为这个动画有点华而不实,主要体现在这个动画一次需要耗费较长时间,有点消磨人的耐心。不过确实一个很好的CSS动画教学案例。而本文,就将具体去剖析这个动画,如果使用纯CSS,应该如何实现。还原布局结构首先,我们需要大致还原布局结构,这个并非整个动画的核心。整个动画的核心在于元素按顺序(又带点随机的效果)从高处下落渐次进行下落加载填充动画。当然,还原这个布局也非常简单,这里我们借助flex布局快速实现,几个...
523300
2231
0
前端小智
Lv
0
关注
0
关注者
关注
前端小智
1年前
Css
CSS层叠技术:优化CSS重置,打造独特样式
这篇文章介绍了一种名为CSS层叠的技术,用于优化CSS重置过程。它解释了CSS重置的概念,即通过删除浏览器默认样式来确保在不同浏览器上呈现一致的外观。然后,它引入了CSS层叠技术,以更好地控制样式的层...
534322
2870
0
前端小智
Lv
0
关注
0
关注者
关注
前端小智
1年前
Css
完美掌握多行文本修剪技巧:CSS中的实用指南
这篇文章深入讨论了在CSS中裁剪多行文本的方法,以提高网页的外观和用户体验。作者首先介绍了常见的CSS文本裁剪技术,例如使用text-overflow和overflow属性。然后,他引入了新的CSS属...
534473
2847
0
chokcoco
Lv0
iCSS前端趣闻
0
关注
0
关注者
关注
chokcoco
1年前
Css
现代 CSS 高阶技巧,不规则边框解决方案
在这一篇中,我们将继续探索,尝试使用CSSPaintingAPI,去实现过往CSS中非常难以实现的一个点,那就是如何绘制不规则图形的边框。CSSPaintingAPI再简单快速的过一下,什么是CSSPainti
538095
3004
0
chokcoco
Lv0
iCSS前端趣闻
0
关注
0
关注者
关注
chokcoco
1年前
Css
超长溢出头部省略打点,坑这么大,技巧这么多?
在业务中,有这么一种场景,表格下的某一列ID值,文本超长了,正常而言会是这样:通常,这种情况都需要超长省略溢出打点,那么,就会变成这样:但是,这种展示有个缺点,3个ID看上去就完全一致了,因此,PM希望能够实现头部省略打点,尾部完全展示,那么,最终希望的效果就会是这样的:OK,很有意思的一个需求,最开始我以为只是实现一个头部超长溢出打点功能,但是随着实践,发现事情并没有那么简单,下面我们就一探究竟。利用direction实现头部超长溢出打点正常而言,我们的单行超长溢出打点,都是实现在尾部的,代码也非常简单,像是这样:<p>MakeCSSEllipsisBegin...
539940
3003
0
下拉加载更多
您好
去签到
你已经连续签到
0
天
猜你喜欢
换一换
最新文章
更多