245浏览

0评论

svg+css3做一个动感的波浪效果实现

一根矢量的波浪<svg viewBox="0 0 560 20" class="wave-animation__water-wave wave-animation__water-wave--front"> <use xlink:href="#wave"></use></svg><svg id="wa...

• 2020-11-01

245浏览

0评论

纯css实现更改图片颜色的技巧

css更改图片颜色的技巧 ，代码很简单，具体代码如下所示：tips： JPG、PNG、GIF 都可以，但是有一个前提要求，就是黑色纯色，背景白色.pic1 { background-image: url($img), linear-gr...

• 2020-11-01

171浏览

0评论

解决margin 外边距合并问题

一、兄弟元素的外边距合并效果图如下：（二者之间的间距为100px，不是150px）二、嵌套元素的外边距合并对于两个嵌套关系的元素，如果父元素中没有内容或者内容在子元素的后面并且没有...

• 2020-11-01

282浏览

0评论

几种常见的CSS布局(小结)

本文概要本文将介绍如下几种常见的布局：其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。另外几种可以猛戳实现三栏布局的几种方法一、单列布局常见的单列布局...

• 2020-11-01

131浏览

0评论

详解css3中 text-fill-color属性

text-fill-color是什么意思呢？单单从字面上来看就是“文本填充颜色”,不过它实际也是设置对象中文字的填充颜色，和color的效果很相似。如果同时设置text-fill-color...

• 2020-11-01

221浏览

0评论

CSS 中重要的层叠概念详解

最近在项目的过程中遇到了一个问题，menu-bar希望始终显示在最上面，而在之后的元素都显示在它之下，当时设置了 z-index 也没有效果，不知道什么原因，因此找了一下css有关层叠方面的...

• 2020-11-01

180浏览

0评论

css 给div添加滚动并隐藏滚动条

css 给div添加滚动并隐藏滚动条 ，具体代码如下所示: 在html中<div class="box"> <div>下面内容会单独滚动</div> <div class="scroll"> <div class="content">...

• 2020-11-01

179浏览

0评论

css列表滑动防止被底部遮住和适配屏幕长一点的机型处理

1、移动端处理列表滑动的时候，微信底下有自带的返回页面按钮，经常会被遮住，遇到屏幕长一点的，下面会短一大截，以下用此方法可以解决。
.container{ position:relative; backgr...

• 2020-11-01

223浏览

0评论

css行内样式,内嵌样式,外部引用样式的三种使用方式

三中的使用方法的简单实例如下：行内样式：<!doctype html><html><head> <meta charset="UTF-8"> <title>css行内样式</title></head><body><div style="width:100px;height:100...

• 2020-11-01

422浏览

0评论

使用CSS隐藏元素滚动条的示例代码

如何隐藏滚动条，同时仍然可以在任何元素上滚动？首先，如果需要隐藏滚动条并在内容溢出时显示滚动条，只需要设置overflow：auto样式即可。想要完全隐藏滚动条只需设置overflow：hidden...

• 2020-11-01

178浏览

0评论

Css实现清除浮动的方法汇总

网页布局中经常会用到float浮动，但是浮动的块级元素脱离了标准文档流，使得浮动元素的父元素没有高度，导致父级元素没有高度，所以需要清除浮动对父级元素的影响，本文介绍清除浮动...

• 2020-11-01

290浏览

0评论

使用纯css实现开关效果

首先是构思我们使用<input type="checkbox">标签来实现这个效果。checkbox的选中、未选中的特性，刚好对应开关的打开、关闭on:打开 off:关闭<label for="ck2"> <input type=...

• 2020-11-01

188浏览

0评论

css轻松实现固定比例的块级容器

给H5布局的时候一般都会碰到banner（横幅）比如要显示成2比1 当然后端返回的图片是2比1就好了 但事情往往不会那么如意 所以怎么办呢 ？写死宽高总觉得不妥当默认width: 100%;让he...

• 2020-11-01

101浏览

0评论

如何只使用CSS创建折叠标题效果的示例代码

折叠标题是向用户显示重要信息的绝佳解决方案，例如特价优惠和密钥通知。许多开发人员在创建此类效果时依赖JavaScript，但是，使用纯CSS创建更简单的折叠头效果也是完全可能的。...

• 2020-11-01

177浏览

0评论

使用CSS3实现input多选框自定义样式的方法示例

原理：首先把input元素隐藏掉，然后用CSS设置label元素（其他元素也可以）的样式，选中时的样式使用input:check+label选中label，无须使用图片和JS效果预览html代码 <div class="radio"...

• 2020-11-01

197浏览

0评论

使用css实现android系统的loading加载动画

web常用的loading图标有2种, 一种是ios的"菊花", 一种是android的"环". 今天我们用svg实现android的"环"动画, 下节课实现ios的"菊花".注意 : gif帧数少的原因, 实际动画效...

• 2020-11-01

96浏览

0评论

flex-grow、flex-shrink、flex-basis和九宫格布局理解

一、flex-grow、flex-shrink、flex-basis属性flex-grow: 定义剩余空间的分成。默认为0，即如果存在剩余空间，也不放大。flex-shrink: 定义了项目的缩小比例。flex-shrink的默认...

• 2020-11-01

176浏览

0评论

uni-app项目瀑布流布局的实现

github地址，喜欢的可以star下哦插件预览图使用教程1.插件代码拷贝下载后把components目录下waterfall.vue文件拷贝到自己项目目录下2.插件全局配置在项目里main.js中配置如下...

• 2020-11-01

294浏览

0评论

你可能需要这样的大屏数字滚动效果

大屏数字滚动效果来源于最近工作中一张大屏的UI图，该UI图上有一个模块需要有数字往上翻动的效果，以下是最终实现的效果： 思路在实现此效果之前，我们先来捋一下思路，用思维导图来...

• 2020-11-01

244浏览

0评论

CSS Houdini实现动态波浪纹效果

CSS Houdini 号称 CSS 领域最令人振奋的革新。CSS 本身长期欠缺语法特性，可拓展性几乎为零，并且新特性的支持效率太低，兼容性差。而 Houdini 直接将 CSS 的 API 暴露给开发者，以...

• 2020-11-01

254浏览

0评论

详解css position 5种不同的值的用法

position属性position属性指定用于元素的定位方法的类型（静态，相对，固定，绝对或粘性）。 有五种不同的值：
&bull;static
&bull;relative
&bull;fixed
&bull;absolute
&bull;sticky...

• 2020-11-01

198浏览

0评论

css实现5种滚动吸顶实现方式的比较(性能升级版)

修改版预览这篇文章是三天前写就的，有大佬给我提了一些修改意见，我觉得这个意见确实中肯。所以就有了这个升级的修改版本。代码同步更新到 GitHub 了。修改内容如下： 添加了...

• 2020-11-01

183浏览

0评论

纯CSS流星雨背景的示例代码

github地址，喜欢的可以star下哦插件预览图使用教程代码展示vue页面使用<template> <view class="space"> <view class="planet"> <view class="planet_...

• 2020-11-01

209浏览

0评论

CSS画心形的三种方法

下面，介绍三种CSS画心形的方法。实现过程都非常简单，保证你一看就会。1.一颗div一颗心用一个div画出一个心，核心的方法就是使用伪元素。首先，我们在页面上先写出一个div：<div></d...

• 2020-11-01

278浏览

0评论

css position属性为absolute时其百分值的计算

当position为absolue时候，其相关属性的百分比是相对它参考的元素（包含块）来进行计算并进行位置渲染的 。首先我们必须知道：1、[百分比的参照][1]：根据包含块计算百分值（1）元素的mar...

• 2020-11-01

176浏览

0评论

css 媒体查询 aspect-ratio less 使用方法

css媒体查询有一个 宽高比很方便，aspect-ratio ，可以直接使用宽/高 来进行页面适配 使用样例如下：
// 宽高比在(（320/50）+(728/90))/2 两个尺寸中间值以内 适配 320*50 设计图...

• 2020-11-01

275浏览

0评论

详解用backgroundImage解决图片轮播切换

单dom节点实现轮播利用backgroundImage可以添加多张图片，以及位置偏移实现轮播效果 创建一个div；并用backgroundImage给div附图片 利用backgroundPosition调节位置...

• 2020-11-01

231浏览

0评论

css骚操作表单验证功能的实现代码

效果图原理表单元素中，有一个pattern属性，可以自定义正则表达式（如手机号、邮箱、身份证..）；valid伪类，可以匹配通过pattern验证的元素；invalid伪类则相反，可以匹配未通过pattern验...

• 2020-11-01

213浏览

0评论

前端项目修改默认滚动条样式(小结)

写过挺多项目都需要改变滚动条的默认样式 并不想单独下载和引入插件 因此纯css修改默认滚动条的样式 这次算统一整理下方法，直接上代码。 &::-webkit-scrollbar {...

• 2020-11-01

233浏览

0评论

CSS实现宽高等比自适应容器的方法

在最近开发移动端页面，遇到这么一个情况：当页面宽度 100% 时，高度为宽度一半，并随手机宽度变化依然是一半。于是我们就需要实现一个 宽度自适应，高度为宽度一半的容器 。这里先以...

• 2020-11-01

222浏览

0评论

CSS 样式的使用方式、选择器

在html中使用css的三种方式：1、行内样式：同过元素的style属性来设置<p style="font-size:20px; color:red">hello</p>属性之间分号隔开。2、内部样式：在<head>的<style>元素中...

• 2020-11-01

322浏览

0评论

css中的计算函数calc在网站布局中一个示例

calc在css 中是一个函数，用来做数值的计算。可以进行长度、角度、时间等的计算。支持 + 、 - 、 * 、 / 和小括号。使用的时候有个需要注意的地方是就是 加号和减号前后需要...

• 2020-11-01

272浏览

0评论

控制Flex子元素在主轴上的比例的方法

背景flex布局更有效的实现对齐，空间分配。最近又学习下flex子元素的尺寸计算规则，主要是flex-grow, flex-shrink的计算规则的学习。一、基本概念1.1 主轴(Main axis)定义了fle...

• 2020-11-01

189浏览

0评论

CSS 外边距(margin)重叠及防止方法

两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减...

• 2020-11-01

188浏览

0评论

CSS3 毛玻璃效果

毛玻璃效果做的好能使页面显得非常生动立体。直接上图body { min-height: 100vh; box-sizing: border-box; margin: 0; padding-top: calc(50vh - 6em); fon...

• 2020-11-01

142浏览

0评论

六大布局之FrameLayout的使用

前言上一期我们给大家讲解了LinearLayout，这一期我们为大家讲解一下FrameLayout（帧布局）的使用，相较于其他布局，FrameLayout可以说的上是最简单的一个，并且其使用范围相对来说也相...

• 2020-11-01

258浏览

0评论

CSS实现照片堆叠效果的实例代码

实现效果 步骤1.初始index.html为了建立第一张照片，也就是最上面的那张。我们只需要添加一个div，里面包含照片的img。就这么多，剩下的效果都是通过CSS来实现的。确保div的class...

• 2020-11-01

239浏览

0评论

CSS Reset 样式重置的实现示例

前言：所有浏览器都有附带的默认样式，这些样式应用在每一个页面，叫做“用户代理样式表”。（如下需要梯子）Chromium UA stylesheet -Google Chrome & OperaMozilla UA st...

• 2020-11-01

157浏览

0评论

移动端适配 使px自动转换rem

先安装postcss-pxtorem： npm install postcss-pxtorem --save-dev 进行安装 通过屏幕的变化，设置动态根元素 font-size ： 我写在vue的html中function setRem () { le...

• 2020-11-01

219浏览

0评论

详解flex和position兼容采坑笔记

今天有空写了一个自己主页的网站，浏览器兼容（主要ie 9以上和chrome），有一个以前的问题也是很常见的问题，既然遇见了，索性就记录下来。直接看问题吧<!DOCTYPE html><html><head><me...

• 2020-11-01

191浏览

0评论

详解css粘性定位position：sticky问题采坑

前言：position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达...

• 2020-11-01

228浏览

0评论

css设置Overflow实现隐藏滚动条的同时又可以滚动

css设置Overflow实现隐藏滚动条的同时又可以滚动，具体代码如下所示：.scroll-list ul{ white-space: nowrap; -webkit-overflow-scrolling: touch; overflow-x: auto;...

• 2020-11-01

294浏览

0评论

css画一个棒棒糖的实例代码

背景:每天进步一点点,多积累一点点.就会越来越棒代码:<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>棒棒糖</title> <h3>用css画一个棒棒糖</h3>...

• 2020-11-01

271浏览

0评论

css如何实现n宫格布局的方法示例

常见应用场景
现在的APP界面基本都是大同小异, 宫格布局现在基本成了每个APP必然的存在.带边框, 常用在"功能导航"页面无边框, 常用在首页分类设计目标在scss环境下, 通过mi...

• 2020-11-01

132浏览

0评论

CSS3 animation – steps 函数详解

这几天在看一些 css3 动画的源码实现时，发现 css 代码的 animation 当中有一个比较陌生的单词 steps ，在源码中是这么写的：animation: thunder 2s steps(1, end) infinite;查阅...

• 2020-11-01

271浏览

0评论

纯css实现输入框placeholder动效及输入校验

更多精彩内容请关注 https://github.com/abc-club/free-resources背景话不多说，我们能否用纯css实现以下效果:答案是肯定的。借助css:placeholder-shown :valid :invalid伪类...

• 2020-11-01

195浏览

0评论

CSS自适应布局实现子元素项目整体居中，内部项目左对齐

日常工作时，我们可能遇到这样一个布局：一个父元素框框（随着浏览器大小自适应宽度）里面有许多按钮，然后这些按钮（宽度固定）的整体需要在父元素内居中对齐，而按钮整体的内容又是从左往...

• 2020-11-01

331浏览

0评论

你必须要知道关于响应式布局的几件事

一、前言响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。本文主要介绍一些响...

• 2020-11-01

239浏览

0评论

使用CSS混合模式和SVG来动态更改产品图片的颜色

前两天在Codepen看到了@Kyle Wetton写的一个示例， 使用CSS混合模式和SVG来改变沙发的颜色 。非常有意思的一案例。这让我想起了在实际的一些业务场景中的运用，比如说一些美妆...

• 2020-11-01

215浏览

0评论

css新手教程之背景图充满整个屏幕

想让整个界面有一个背景图片，自然想到的是在body上加background，代码如下：body { width：100%； height: 100%; /* 加载背景图 */ background: url("../static/image...

• 2020-11-01