css
业火之理
这个作者很懒,什么都没留下…
展开
-
【css】多行文本省略号表示css
背景遇到个css问题,多行文本下需要出现省略号,总结下。css本来准备通过line-clamp,后发现不管用。于是使用line-height+固定div宽高方式实现,发现只能在white-space:no-wrap时实现。但是nowrap就不换行了,需要多行文本溢出有省略号。搜索后发现overflow-wrap:break-word能获得该效果。...原创 2021-12-09 10:05:37 · 329 阅读 · 0 评论 -
【css】dooringx-lib动画升级梳理
前言之前使用animate.css直接套到类名上进行制作动画,现在发现和别的竞品比动画这块有些差距。于是对动画重构。实际上也是玩配置,但是首先要一个元素可以支持多个动画。而支持多个动画也很简单,只要animate里按逗号分割即可。但是还是需要梳理下动画的几个属性,再将属性变成常人易于理解的文字与操作。动画属性animation-name这个是动画的动画名,逗号分割多的没啥说,对应名称类型in - out这个很多会有进入动画或者退出动画,实际就是给动画分类,都是forwards。anim原创 2021-08-05 21:24:46 · 467 阅读 · 0 评论 -
【css】animate.css使用指南
前言最近我需要将animate.css整合进dooring中做成动画,毕竟这玩意自己写太累,而且写的效果可能也不是很自然。安装官网:https://animate.style/npm 或者yarn 安装即可。https://www.npmjs.com/package/animate.css使用引入animate.css 使用link或者直接引入都可以。然后加类名即可。import 'animate.css'; <div style={{原创 2021-05-05 16:19:17 · 1274 阅读 · 0 评论 -
【css】antd组件库通用样式文件学习笔记
前言一个组件库制作必然要写通用的东西,antd定义的通用样式可以拿来学习下,后面写组件库照这思路来。官方地址公共样式@theme: default;// The prefix to use on all css classes from ant.@ant-prefix: ant;// An override for the html selector for theme prefixes@html-selector: html;// -------- Colors -------原创 2020-05-09 14:57:32 · 3050 阅读 · 0 评论 -
【javascript】js动态生成keyframe的坑
前言有些稍微复杂的动画效果不能单单通过transition解决,需要使用animation。一般情况keyframe都是自己早在css写好的,那么如果需要动态写keyframe呢?解决方法大家都百度到了,在document.stylesSheets里,里面有很多CSSStyleSheet。其中的rules存放着用户定义的keyframes。但是坑在这,写项目很多用的别人的组件,你不知...原创 2020-03-07 17:55:03 · 3543 阅读 · 0 评论 -
【css】转盘游戏实现
前言转盘游戏是经常要制作的小游戏,看别人用渐变实现很有意思,一个转盘也是很复杂的。本文实现参考了徐小夕大佬的公众号。样式部分单个扇形实现:利用border-radius和linear-gradient来渐变。做扇形还有一种思路,就是先做正方形,然后用skew进行形变,变成菱形,再定位到相应位置,拿容器overflow hidden一下就行。这里采用linear-gradient,...原创 2019-12-19 14:19:00 · 840 阅读 · 0 评论 -
【css】linear-gradient的几种用法
背景linear-gradient很多人用过,我发现这东西用起来变化还是挺多的。语法<side-or-corner>描述渐变线的起始点位置。它包含to和两个关键词:第一个指出水平位置left or right,第二个指出垂直位置top or bottom。关键词的先后顺序无影响,且都是可选的。to top, to bottom, to left 和 to right这些值...原创 2019-12-05 12:08:24 · 3761 阅读 · 2 评论 -
【css】圣杯布局双飞翼布局的各种解法与思考分析
背景现在布局一般都用flex了,最近发现考布局还有很多在考圣杯布局和双飞翼布局的,所以来研究下。圣杯布局html骨架<div class="content"> <div class="center"> </div> <div class="left"> </div> <div cl...原创 2019-12-04 09:44:21 · 252 阅读 · 0 评论 -
【css】实现个蓝天白云效果
背景第一次看见这个效果感觉真的很惊艳,要来代码研究发现就是3图片移动而已。其中他们把3朵云translate3d,我感觉其实没必要。我自己写的跟他们效果一样的。主要收获切图真的是太重要了,图切的好,看起来效果就牛b,特别是png这种透明图。还有收获就是复习了下animation几个属性:标识符,动画持续时间,时间方程效果,延迟时间,次数,方向,位置。代码<!DOCTYP...原创 2019-11-07 18:31:43 · 990 阅读 · 2 评论 -
【css】记录下雪碧图配合逐帧动画做法
背景雪碧图就是那种所有图片改变效果放在一个图上,然后通过位移的动画效果做成看起来会动一样代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...原创 2019-08-24 20:41:40 · 1494 阅读 · 0 评论