CSS
文章平均质量分 70
橘右溪
时光不负有心人,星光不问赶路人
掘金:https://juejin.cn/user/4248168662053245
展开
-
多行内容超出...显示的终极解决方案
「最近遇到一个貌似很简单,但写起来也不简单的问题。对于多行文字,超出...显示。通过css可以实现,但受限于浏览器兼容问题,有时候还需要依赖JS来实现。通过js实现,就需要考虑到文字大小,中英文、数子、标点符号所对应的字节长度不一致,如果考虑的不全面,对于不同的文字内容,总会有点差距。」 首先,我们需要了解,中文汉字,英文字母,数字以及特殊符号所占的字节长度是不一样的,如果需要计算准确,就不能按照字符串的元素个数去截取,把它们换算成字节数来截取,准确度更高。所以,我们需要一个获取字符串字节长度的方..原创 2021-11-09 11:45:45 · 1321 阅读 · 0 评论 -
一个简单的收藏动画
起因是我们App原生和h5都有类似的内容卡片列表,h5版本较老。产品经理提出了需求,h5要做一番更新,与App样式保持一致。本来要求只是基本样式调整,但热情如我,把收藏动画这种细节也复刻了出来(我是一个多么实在又优秀的程序员啊呜呜呜~)喏,效果就是这么个效果,喜欢的需要的可以直接拿走代码啦~拆分动作最难的事情是我只有星星图片,没有动画的设计稿,想要实现只能靠肉眼观察,app上的收藏按钮点了不下百次吧,一边点一边在脑海里拆分动作~ 那么我们观察这个动画,从点击到结束,有几个要素 星星填.转载 2021-11-08 19:31:55 · 477 阅读 · 0 评论 -
【喵咪专场】用CSS画一个小胖橘
介绍本期我们通过vite+scss去完成一个橘猫心情变化的创意动画,这里的逻辑我们将不使用任何js代码,仅依靠css来完成,所以,通过本期的动画,你可以到一些css动画和绘制的一些技巧。废话不多说,先康康效果~还比较可爱吧。当鼠标(鱼)移入出,橘子闷闷不乐,无精打采的。但当鼠标(鱼)移入,橘子一看见最喜欢的鱼立马就开心了,连天气都变好了,对,这只橘子就是这么馋,变成胖橘是有原因的。好了,我们马上就要进入正文了,我们会从基础搭建,太阳,云,猫的绘制和动画去了解制作这个动画的流程。正文..转载 2021-11-03 16:07:11 · 154 阅读 · 0 评论 -
你竟然是这样的CSS之静如处子
你竟然是这样的CSS之静如处子 ????????曾闻巨佬云,CSS者,码农家之装潢也。远观之,如风静而縠纹平;细察之,如瑰石而灵光耀。相传遗留三十余物称之静姝,后人拾其贡之于堂,以图庇佑其子嗣,显名于四方,通达其祖技,居功其庙堂。前言相信大家都听到过“能用CSS实现的就别用图片”这句话,毕竟CSS代码的体积比图片要小得多。那么今天就给大家分享30个CSS静态形状,希望各位掘友喜欢❤️。代码1. 椭圆.oval { width: 200px; height:转载 2021-10-12 20:00:00 · 150 阅读 · 0 评论 -
20+ css高频实用片段,提高幸福感的小技能你可以拥有噢
20+ css高频实用片段,提高幸福感的小技能你可以拥有噢前言修改input placeholder样式、多行文本溢出、隐藏滚动条、修改光标颜色、水平垂直居中...多么熟悉的功能呀!前端童鞋几乎每天都会和他们打交道,一起来总结我们的css幸福小片段吧!下次不用百度、不用谷歌,这里就是你的港湾。点击查看源码地址”持续更新中“1. 解决图片5px间距你是否经常遇到图片底部莫名其妙多出来5px的间距,不急,这里有4种方式让它消失方案1:给父元素设置font-size: ...转载 2021-10-08 15:52:48 · 111 阅读 · 0 评论 -
学会这些,水平垂直居中再也不怕了
学会这些,水平垂直居中再也不怕了前言今天来看看一个之前困扰我很久的问题,在CSS中,水平垂直居中,能有几种写法。方法一:margin:auto子绝父相,当元素绝对定位的时候,会根据最近父元素进行定位,利用这个特性,我们有了这种方法。CSS代码: div{ width: 600px; height: 600px; position: relative; border: 1px solid #000000;}img{ position: ..转载 2021-10-03 15:56:19 · 69 阅读 · 0 评论 -
元素水平垂直居中--三种方式
(1) css3的transform <div class="box"> <div class="ele"></div></div>.box{ background:yellow; width:100%; height:300 px; pisition:relative;}.ele{ background:re...原创 2019-07-03 16:45:44 · 134 阅读 · 0 评论 -
纯CSS实现弹框效果
知识点:a 标签点击改变页面链接中的 hash 部分。 :target 选择器可以选中和页面 hash 相同的标签(标签的 id 和页面 hash 相同)。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <title>纯CSS弹框</tit...原创 2019-10-24 21:54:29 · 1321 阅读 · 0 评论