标签 css 下的文章 - LETTERED

自定义实现简单柱形图

前言前两天下发一个需求，需要实现一个月统计图，但是只显示最近周。思来想去找到了Echats，但是具体跟UI设计差别过大，数据也不好整理。鼓捣了一早上之后选择放弃了。其实Echats也蛮好的，提供了多样化的数据图表，示例中涵盖各行各业。实现设计图如下，实现要求是当日加粗实体显示，其他模糊化，但可以选中查看。HTML结构结构规划比较简单，整体+容器+项目（头部/内容/底部），内容分有背景条和柱形条，就目前背景还没有去实现，主要点就是柱形条的高度变化和整体高度之间的处理。<div class="zin-chat"> <div class="zin-chat-container">  <div class="zin-chat-item" :class="{ today: index === today }" @click="today = index" v-for=&q

学习 · 2022-01-06

替换marquee跑马灯方案之CSS动画

前言在也页面开发中，常见滚动文本使用marquee实现HTML marquee 元素<marquee>）用来插入一段滚动的文字。你可以使用它的属性控制当文本到达容器边缘发生的事情。<marquee>这是一段滚动文本</marquee>而在现代浏览器规则里，marquee 则已被标明废弃已废弃: This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.既然如此，我们就得寻找新的解决方案，这里使用CSS动画来实现样式表内容.marquee { width: 450px; line-height: 50px; background-color: red; color: white; white-space: nowrap; overflow: hidden;

学习 · 2021-12-21

SCSS 常用样式写法集合

$white: #ffffff; $primary: #fa4427; $secondary: #fe8800; $theme-color-primary: $primary; // 主色 $theme-color-secondary: $secondary; // 副色 $text-black: #222222; // 文本主色 $text-gray: #656565; // $text-white: $white; // 白色 $background-color: #f5f5f5; $border-color: #e0e0e0; // flex 样式 .z-w-100 { width: 100%; } .z-h-100 { height: 100%; } // flex 布局 .z-flex { display: flex; align-items: center; } .z-flex-1 { flex: 1; } .z-flex-wrap { flex-wrap: wrap; } .z-col-start { display:

学习 · 2021-03-13

Theme Jasmine by Kent Liao | 桂ICP备15008025号-6