![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 55
一只敲码的猫~
初级选手
展开
-
anime 数字跳动效果
/ 因为不需要获取Dom元素,所以不需要在 onMounted 后执行。// 目前 Anime 没有释放缓存的办法,// 变化值的精度(-log值)// 需要变化的对象。原创 2022-11-22 19:05:11 · 289 阅读 · 0 评论 -
anime 动画引擎
/ 动画方向(normal : 正向,reverse:反向,alternate往返(一次正向,一次反向))// (省略时使用默认单位:例如 rotate,单位 deg,translateX 单位 px)// 自动播放(改为false,可以根据代码进行控制什么时候播放)// 末端延迟(在动画结束时以毫秒为单位添加一些额外时间)// 目前 Anime 没有释放缓存的办法,// 所有不需要的项目都可以删除。// 独立的动画属性(同步)//(大多数单位可以省略)// 需要改变的属性。原创 2022-11-22 19:03:22 · 599 阅读 · 0 评论 -
贝赛尔曲线
贝赛尔曲线原创 2022-11-22 18:37:33 · 383 阅读 · 0 评论 -
SVG/CSS路径动画
路径动画路径动画路径动画路径动画路径动画路径动画原创 2022-11-22 18:34:54 · 898 阅读 · 0 评论 -
SVG属性动画
【代码】SVG属性动画。原创 2022-11-22 18:33:26 · 84 阅读 · 0 评论 -
SVG扩散特效
* 因为内阴影是滤镜实现的,所以背景色不能为透明(背景有颜色才能基于背景实现滤镜,没有颜色则应用不了滤镜) *//* 扩散其实就是从透明,中心点缩放为0,到不透明,缩放为100% 的过程 */// 原理跟动画曲线类似,但是由于关键帧可以单独控制每个属性的过程,// 中间插入两个关键帧,用于更改动画的视觉效果,/* 设置元素缩放的中心点 */// 相对比较简单一些。原创 2022-11-22 18:32:13 · 757 阅读 · 0 评论 -
SVG扩散特效
* 因为内阴影是滤镜实现的,所以背景色不能为透明(背景有颜色才能基于背景实现滤镜,没有颜色则应用不了滤镜) *//* 扩散其实就是从透明,中心点缩放为0,到不透明,缩放为100% 的过程 */// 原理跟动画曲线类似,但是由于关键帧可以单独控制每个属性的过程,// 中间插入两个关键帧,用于更改动画的视觉效果,/* 设置元素缩放的中心点 */// 相对比较简单一些。原创 2022-11-22 18:31:35 · 650 阅读 · 0 评论 -
旋转的指示牌
【代码】旋转的指示牌。原创 2022-11-22 18:24:46 · 171 阅读 · 0 评论 -
强制英文、中文换行与不换行 强制英文换行
【代码】强制英文、中文换行与不换行 强制英文换行。原创 2022-09-14 15:38:10 · 287 阅读 · 0 评论 -
控制div跳转到指定的位置的解决方案总结
页面涉及到保密问题,我这里就不给大家发页面效果图啦。这个是为了解决定位的问题。我的需求是这样的,一个大的页面,左边是数据列,右边是卡片列表,一个卡片一个卡片的,由于卡片很多,咱们给卡片定制了一个大的容器,容器有固定的高和宽。超出容器的卡片被隐藏掉,并且给容器加上上下滚动条。咱们点击左侧列表。右侧卡片和左侧列表相关的,就要把右侧某一个卡片高亮处理并将移动到咱们显眼的位置。方法1:scrollTop 滚动到某位置 document.getElementById("wrap_div").scrollTo原创 2021-07-08 16:22:15 · 419 阅读 · 0 评论 -
通过id class ref 获取元素的高度和宽度
dom 结构<div id="id1" class="class1" ref="ref1" style="width: 100px; height: 100px;"></div>通过 id 获取高度宽度let widthid1 = document.getElementById("id1").offsetWidthlet heightid = document.getElementById("id1").offsetheight通过class 获取高度宽度原创 2021-06-27 11:53:25 · 8131 阅读 · 4 评论 -
echarts 雷达图 点的颜色自定义 名字颜色自定义 vue实现
根据不同的等级 节点显示不同的颜色DOM层<div class="main-left"> <div id="radar_echarts" style="width: 100%;height: 100%;"></div> <div class="main-left-top-right"> <div class="item gf"> <span class="block"></spa.原创 2021-05-17 18:14:41 · 1624 阅读 · 2 评论 -
hex颜色透明度对比表
"#D9001B"这样写就是纯色没有通明度"#D9001BFF"这样写通明度就是1"#D9001B80"这样写通明度就是0.5 '1.00':'FF', '0.99':'FC', '0.98':'FA', '0.97':'F7', '0.96':'F5', '0.95':'F2', '0.94':'F0', '0.93':'ED', '0.92':'EB', '0.91':'E8', '0.90':'E6', '0.89':'E3',原创 2021-05-12 16:46:56 · 3026 阅读 · 0 评论 -
解决element table错位的问题
由于<style>中用了scoped,因此咱们需要在class选择器前添加/deep/ 就可以了,本人亲测 element table 头错位有效解决<style scoped>/deep/.el-table th.gutter { display: table-cell !important;}</style>原创 2020-11-11 14:12:01 · 614 阅读 · 0 评论 -
让网页变灰的实现_网站蒙灰CSS样式总汇
让网页变灰的实现_网站蒙灰CSS样式总汇每次全国哀悼日,各大网站首页都变成了灰色,添加以下全局CSS样式,可以实现此效果:方法一html { -webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);} <!-- 可以是整个网站变成灰色的 --...原创 2020-04-13 11:16:17 · 740 阅读 · 0 评论 -
栅格介绍
栅格介绍后盾人官网:houdunren.com讲师:@ 向军大叔名词解释CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统,这意味着它可以同时处理列和行。栅格系统与FLEX弹性布局有相似之处理,都是由父容器包含多个项目元素的使用。image-20190829232951627兼容性下面是栅格系统兼容性数据,所以在根据项目使用的场景决定是否使用...原创 2020-04-07 13:17:49 · 868 阅读 · 0 评论 -
弹性布局
了解弹性后盾人网站:houdunren.com讲师:@ 向军大叔Flex 是 Flexible Box 的缩写,意为"弹性布局",可以轻松的控制元素排列、对齐和顺序的控制。现在的终端类型非常多,使用弹性盒模型可以让元素在不同尺寸终端控制尺寸。响应体验通过下面小米移动端中间区域水平排列元素,来体验一下响应布局带来的便利性。image-20190826121529633image-20...原创 2020-04-07 10:48:17 · 258 阅读 · 0 评论