随笔分类 - css
摘要：话不多说先看效果： 设计思路： 罐是做了三个位置（中=>左，左=>右，右=>中）的动画效果，每个罐轮流使用一次，来实现旋转的效果。 中间的光亮做了个变形延迟。 罐的透明效果是使用了三层，即最底层是粒子不透明图片，中层是液体组件，最上层是罐体png图片。都是用了绝对定位，请务必设置好位置。 液体组件中
阅读全文
摘要：效果如图 代码如下： background: linear-gradient( to bottom, #ffffff 0%, #ffffff 45%, #389df5 100% ); background-clip: text; -webkit-background-clip: text; -web
阅读全文
摘要：想改啥样式就改成对应的编码 .el-cascader { .el-input__icon:before { content: '\e790'; } } .el-select { .el-select__caret:before { content: '\e790'; } } /e78f 向上的箭头
阅读全文
摘要：效果：左右窗口移动到隐藏后，旁边的小窗口会随着移动贴边。 知识点：兄弟组件通信 1.新建Bus.js文件 Bus.js内容： import Vue from 'vue'; export default new Vue(); 2.引入文件 import Bus from "@/common/js/Bu
阅读全文
摘要：<div class="love"></div> .love { position: relative; top: 30px; left: 50%; width: 30px; height: 30px; background-color: pink; } .love:before { content
阅读全文
摘要：动画：先放大 再消失 <template> <div class="app"> <div> <button @click="show = !show">切换</button> </div> <!-- 插入DOM元素和移除dom元素动画同时进行 --> <transition name="h1"> <
阅读全文
摘要：使文字始终保持相对垂直居中。使用table可以满足需求。伸缩浏览器也可保持布局。 <table> <tr> <td class="label">杆位名称</td> <td class="value">TH000-品质管理</td> <td class="label">杆位编号</td> <td cl
阅读全文
摘要：阿里图库管理项目用到的小图标非常方便，只需要在阿里图库创建账户，点击项目管理-我的项目-新建项目，就可以管理图标啦。 第二步：上传svg图标 第三步：在vue中使用： 在public/index.html文件中 加入点击生成的代码 放在这个位置，注意再加个style设置一下。 然后就可以在项目中使用
阅读全文
摘要：效果如图： .card-wrap { width: 33%; height: 100%; box-shadow: 0px 0px 12px 1px #003ba26b inset; background: linear-gradient(to left, #196aa8, #196aa8) left
阅读全文
摘要：.cut-border { width: 400px; height: 300px; border: solid 1px #334995; box-shadow: 0px 0px 14px 1px #173C90 inset; clip-path: polygon(20px 0, calc(100%
阅读全文
摘要：background: linear-gradient(left, rgba(45, 73, 165, .1), rgba(45, 73, 165, .4), rgba(45, 73, 165, 0.1));
阅读全文
摘要：28. border-top: 1px solid; border-image: -webkit-linear-gradient(90deg, transparent, rgba(48, 160, 255, .5) 50%, transparent) 1; border-image: linear-
阅读全文
摘要：@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .ball { width: 170px; height: 2px; background-image: linear-gradien
阅读全文
摘要：/* 文字超出范围的三个点 */ width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* 超过两行显示三个点：*/ word-break: break-all; text-overflow: e
阅读全文
摘要：div { display: inline-block; width: 20%; background: green; position: relative; } div:before { content: ""; display: inline-block; padding-bottom: 100
阅读全文
摘要：series: [{ type: 'line', color: ['#1FE3B3'], symbolSize: 5, // 设置折线上圆点大小 symbol: 'circle', // 设置拐点为实心圆},
阅读全文
摘要：background-image: -webkit-linear-gradient(bottom, #003268, #0f91f6, #fff); -webkit-text-fill-color: transparent; -webkit-background-clip: text;
阅读全文
