background-image: linear-gradient(90deg, #dfdfdf 2px, transparent 0), linear-gradient(#dfdfdf 2px, transparent 0), linear-gradient(90deg, #dfdfdf 1px, ...
分类：
Web程序 时间：
2020-07-28 22:14:56
阅读次数：
79
话不多说，先上效果图 本demo没使用JavaScript，纯CSS3实现，下面是完整代码 1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>时钟</title> 5 <style type="text/css"> 6 .screen{ 7 wi ...
分类：
Web程序 时间：
2020-07-18 15:52:50
阅读次数：
82
在web前端开发过程中，UI设计师经常会设计一些带渐变文字的设计图，在以前我们只能用png的图片来代替文字，今天可以实现使用纯css实现渐变文字了。下面就介绍3中实现方式供大家参考！ 基础样式： .gradient-text{text-align: left;text-indent:30px;lin ...
分类：
Web程序 时间：
2020-07-18 11:27:54
阅读次数：
77
需求如下： 前端需要显示矩形的缩略图，接口返回的图片尺寸大小不一，宽高不相等，需要前端来处理并显示成正方形，类似微信朋友圈图片的效果，等比例正方形显示在列表中，让图片根据宽高来自适应显示在页面上。那么使用纯css该如何实现不定宽高的图片居中裁剪呢？ mate标签： <meta name="viewp ...
分类：
微信 时间：
2020-07-07 00:30:55
阅读次数：
92
checkbox复选框可能是网站中常用的html元素，但大多数人并不满意它的默认样式，这篇文章就讲讲如何实现input checkbox复选框控件 样式美化效果。 资源网站大全 https://55wd.com 方案一：纯css方法 单选按钮和复选按钮都有选中和未选中状态。要设置这两个按钮默认样式稍 ...
分类：
Web程序 时间：
2020-07-04 21:00:42
阅读次数：
128
有一些网页中,有时候会碰到饼状图的需求，比如统计图表，进度指示器，定时器等，实现方式也是各种各样，现在也有不少现成的js库，可以直接拿来使用，方便很多。这里笔者为大家演示一种纯css实现饼状图效果的方法。 资源网站大全 https://55wd.com <div class="pie"></div> ...
分类：
Web程序 时间：
2020-07-03 12:43:44
阅读次数：
93
首先看看需求，tab栏上的一个active样式 //找到active时的选择器 .active::before { content: ''; width: 100%; height: 6px; background-color: green; display: inline-block; posit ...
分类：
Web程序 时间：
2020-07-01 17:28:24
阅读次数：
146
偏爱这个办法 .wrap {position: relative;text-align: center;width: 84%;margin: 15px auto;} /*CSS伪类用法*/ .wrap:after, .wrap:before {position: absolute;top: 50%; ...
分类：
Web程序 时间：
2020-06-18 10:25:19
阅读次数：
114
1、概述 html实现用时间点来展示事件发生点来代替用table展示一条条数据，能够给人清晰、一目了然能够看清事情发生的过程，UI页面也显示的那么清晰。如何用css+html做出时间轴展示事件点的？先来看看下面的效果： 做出这样效果的时间轴展示事件点，需要了解一下知识： 1、css位置：positi ...
分类：
Web程序 时间：
2020-06-13 00:54:25
阅读次数：
100
本文出自：https://www.cnblogs.com/2186009311CFF/p/13093596.html 用元素绑定一个class <view class="fireWorkBox"></view> class对应的css如下 .fireWorkBox { content: ''; wi ...
分类：
Web程序 时间：
2020-06-11 16:52:00
阅读次数：
185
