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
2年前
Css
突破限制,CSS font-variation 可变字体的魅力
今天,在CodePen上看到一个很有意思的效果--GSAP3ETCVariableFontWave,借助了JS动画库GSAP实现,一起来看看:我寻思着能否使用CSS复刻一版,鼓捣了一会,利用纯CSS成功实现了原效果。上述效果,最核心的就是文字的动画,文字从较细贴着较紧,到较粗隔着较远不断变化。有人会认为这里是transform:scale(),实则不然。scale是等比例放大缩小一个物体,而仔细观察上述效果,明显是有字体的粗细、字体的字宽的变化。这里,其实用到了CSS比较新的特性--可变字体,也就是fon
546081
3250
0
chokcoco
Lv0
iCSS前端趣闻
0
关注
0
关注者
关注
chokcoco
2年前
Css
水平垂直居中深入挖掘
在上篇文章--一行CSS代码的魅力的最后,提到了两种快速实现水平垂直居中的方式。当然,CSS中实现水平垂直居中的方式很多。别看到水平垂直居中就准备右上角x掉,本文的重点不是罗列有多少种方式实现水平垂直居中方式,而是探讨一下常见的几种水平垂直居中的方式的利弊。嗯哼?也就是:那么多种水平垂直居中的方式,如果真的在业务中需要使用了,你脑海里第一时间会想到哪个?不同的水平垂直居中方式,它们肯定存在差异,那么最显著的不同是什么?有没有所谓的最完美的水平垂直居中?本文将讨论4种水平垂直居中的方式,分别是,并且每个起个
546732
3395
0
Javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
Javan
6年前
Css
CSS3中transition、transform傻傻分不清楚
前言css属性很多,无论是字母的拼写还是字面上的意思,很多人都容易混淆,包括我在内,也时不时需要去看看到底是咋回事,是不是也混淆过你~下面列举几个最容易混淆的属性:属性含义animation(动画)用于设置动画属性,他是一个简写的属性,包含6个属性transition(过渡)用于设置元素的样式过度,和animation有着类似的效果,但细节上有很大的不同transform(变形)用于元素进行旋转、缩放、移动或倾斜,和设置样式的动画并没有什么关系,就相当于color一样用来设置元素的“外表”translat
557982
3807
0
chokcoco
Lv0
iCSS前端趣闻
0
关注
0
关注者
关注
chokcoco
2年前
Css
巧用 CSS 实现炫彩三角边框动画
最近有个小伙伴问我,在某个网站看到一个使用SVG实现的炫彩三角边框动画,问能否使用CSS实现:很有意思的一个动画效果,立马让我想起了我在CSS奇思妙想边框动画一文中介绍的边框动画,非常的类似:其核心就是利用了角向渐变(conic-gradient),然后将图案的中心区域通过覆盖遮罩一个小号的图形实现。然而,这个三角形动画里有两个难点:整个图形是个三角形在CSS中,我们可比较轻松的实现矩形与圆形,但是三角形这里无疑会棘手很多。整个边框还附带阴影,并且阴影还是在边框的两侧这里看似不复杂,实则困难重重,如果采用
545929
3291
0
chokcoco
Lv0
iCSS前端趣闻
0
关注
0
关注者
关注
chokcoco
1年前
Css
【动画进阶】有意思的网格下落渐次加载效果
最近,群友贴了一个非常有意思的动画效果,整体动画效果如下:点击某个按钮后,触发一个动画效果,原本的网格内容,将按顺序(又带点随机的效果)从高处下落进行加载填充动画。当然,我个人认为这个动画有点华而不实,主要体现在这个动画一次需要耗费较长时间,有点消磨人的耐心。不过确实一个很好的CSS动画教学案例。而本文,就将具体去剖析这个动画,如果使用纯CSS,应该如何实现。还原布局结构首先,我们需要大致还原布局结构,这个并非整个动画的核心。整个动画的核心在于元素按顺序(又带点随机的效果)从高处下落渐次进行下落加载填充动画。当然,还原这个布局也非常简单,这里我们借助flex布局快速实现,几个...
523329
2231
0
冴羽
Lv0
理想主义者,个人微信:mqyqingfeng ,带你看技术与生活的诗与远方
0
关注
0
关注者
关注
冴羽
2年前
Css
20+ css高频实用片段,提高幸福感的小技能你可以拥有噢
本文已参与 「掘力星计划」 ,赢取创作大礼包,挑战创作激励金。前言修改inputplaceholder样式、多行文本溢出、隐藏滚动条、修改光标颜色、水平垂直居中...多么熟悉的功能呀!前端童鞋几乎每天都会和他们打交道,一起来总结我们的css幸福小片段吧!下次不用百度、不用谷歌,这里就是你的港湾。点击查看源码地址”持续更新中“1.解决图片5px间距你是否经常遇到图片底部莫名其妙多出来5px的间距,不急,这里有4种方式让它消失方案1:给父元素设置font-size:0效果html<d
546309
3353
0
前端小智
Lv
0
关注
0
关注者
关注
前端小智
2年前
Css
27个精美的时间线(含源代码)
有梦想,有干货,微信搜索【大迁世界】关注这个在凌晨还在刷碗的刷碗智。本文GitHubgithub.com/qq449245884…已收录,有一线大厂面试完整考点、资料以及我的系列文章。今天,让我们来学习如何使用HTML、CSS、Javascript为网站开发和设计创建时间线。1.垂直时间线HTMLCSS源码:codepen.io/itbruno/pen…2.垂直时间轴HTML模板源码:codepen.io/P233/pen/nb…3.垂直时间线网站事例地址:codepen.io/z-/pen/bwPB…4
546431
3314
0
chokcoco
Lv0
iCSS前端趣闻
0
关注
0
关注者
关注
chokcoco
1年前
Css
CSS 高阶小技巧 - 角向渐变的妙用!
本文将介绍一个角向渐变的一个非常有意思的小技巧!我们尝试使用CSS绘制如下图形:在之前,类似的图案,其实我们有尝试过,在单标签实现复杂的棋盘布局一文中,我们用单标签实现了这样一个棋盘布局:那么,本文有什么特殊之处呢?让我们一探究竟。快速实现网格布局首先,上述的布局还是希望使用一个标签完成,这个没有问题。利用渐变是可以多层的这个特性,我们快速完成页面的网格形状,假设我们的结构如下:<div></div>div{margin:auto;width:500px;height:500px;background:repeating-linear-...
545148
3175
0
Javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
Javan
6年前
Css
CSS中Flex布局的可伸缩性(Flexibility)
FlexibilityFlex伸缩布局决定性的特性是让伸缩项目可伸缩,也就是让伸缩项目的宽度或高度自动填充剩余的空间。这可以以flex属性完成。一个伸缩容器会等比地按照各伸缩项目的扩展比率分配剩余空间,也会按照收缩比率缩小各项目以避免溢出。Flex属性flex属性可用来指定可伸缩长度的部件:扩展比率,收缩比率,伸缩基准线。当有一个元素是伸项目时,flex属性将代替主轴长度属性决定元素的主轴长度。若元素不是伸缩项目,则flex属性不生效。flex是flex-grow、flex-shrink、flex-bas
557580
3251
0
chokcoco
Lv0
iCSS前端趣闻
0
关注
0
关注者
关注
chokcoco
1年前
Css
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个Loading效果:这个确实有点意思,但是这是CSS能够完成的?没错,这个效果中的核心气泡效果,其实借助CSS中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们之前的:使用纯CSS实现超酷炫的粘性气泡效果巧用CSS实现酷炫的充电动画圆弧的实现首先,我们可能需要实现这样一段圆弧:这里需要用到的技术是:角向渐变conic-gradient()+mask以及两个伪元素。图片示意如下:核心代码如下图:<divclass="g-container"><divclass="g-circle"></d...
546413
3349
0
下拉加载更多
您好
去签到
你已经连续签到
0
天
猜你喜欢
换一换
最新文章
更多