数据可视化大屏开发中，只是纯色的图标看起来会单调一些，所以设置一个从上到下的颜色渐变效果。
html
<i class="icon iconfont" :class="item.icon"></i>
css
.i...
yekong
3周前 (09-13) 41℃
0喜欢
数据可视化大屏项目中，会给图标增加一些旋转动画效果作为装饰，今天通过css来实现一个旋转动画效果。
动画效果
<div class="icons">
<div class="iconBg"></di...
yekong
3周前 (09-13) 44℃
0喜欢
要从左到右创建多段背景色渐变，您可以在linear-gradient中定义多个颜色停靠点。每个颜色停靠点都可以有一个与其相关的位置，这决定了该颜色在渐变中的位置。
以下是一个示例，展示了如何从左到右创建一个多段的渐变，从红色到黄色（在25%的位置），然后到绿色（在50%的位置），...
yekong
3周前 (09-12) 37℃
0喜欢
数据可视化大屏 项目开发中，需要一个内部发光的效果，使用图片的话，在适配宽高的时候可能会变形，所以这里用css的内发光效果来实现效果。
效果截图
关键代码
.itemInfo {
position: relative;
width: 100%;
height: 10...
yekong
2个月前 (08-11) 96℃
0喜欢
倾斜的斑马线效果可以通过CSS中的linear-gradient和repeating-linear-gradient来实现。这里有一个例子：
body {
min-height: 100vh;
display: flex;
align-items: center;
...
yekong
2个月前 (08-01) 100℃
0喜欢
在项目开发过程中，一般背景图片使用一个背景图就可以了，但是在实际项目开发中，会遇到各种情况，比如同一个组件需要在不同的宽高下使用，这时候如果复用同一个背景图那么图片就会变形。
多背景图拼接
在之前的项目开发中，遇到这种情况会使用vue 实现安卓.9图片类似的效果九宫格图片，这种类...
yekong
2个月前 (07-29) 102℃
0喜欢
动态效果
你可以创建一个额外的 ::after 伪元素来放置背景图像，这样就可以在不影响 div 本身的情况下实现背景图的渲染。以下是一个示例：
.echartsBody {
position: relative;
width: 100%;
height: cal...
yekong
2个月前 (07-26) 116℃
0喜欢
在CSS中，calc()函数用于执行数学运算，它可以在CSS属性中计算值。calc()函数允许你使用加减乘除等数学操作符来组合不同类型的长度、百分比、视口单位和数值，生成最终的计算结果作为CSS属性的值。
以下是calc()函数的一些常见用途和作用：
动态计算长度值：calc(...
yekong
3个月前 (07-19) 70℃
0喜欢
vue3 数据可视化大屏项目开发过程中，需要设置多个背景图，但是设置完成后发现背景图重复了。
多个背景图
background-image: url('./assets/searchbgleft.png'),
url('./assets/searchbg.png'),
url(...
yekong
3个月前 (07-19) 94℃
0喜欢
效果截图
效果动画
要在CSS中实现PNG图片的动态切换效果，你可以使用CSS动画和背景图像切换的技术。下面是一种常见的实现方法：
HTML结构：
<div class="image-container"></div>
CSS样式...
yekong
3个月前 (07-10) 134℃
0喜欢
