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
纯css实现更改图片颜色的技巧
css更改图片颜色的技巧 ，代码很简单，具体代码如下所示：tips： JPG、PNG、GIF 都可以，但是有一个前提要求，就是黑色纯色，背景白色.pic1 { background-image: url($img), linear-gr...
2020-11-01
解决margin 外边距合并问题
一、兄弟元素的外边距合并效果图如下：（二者之间的间距为100px，不是150px）二、嵌套元素的外边距合并对于两个嵌套关系的元素，如果父元素中没有内容或者内容在子元素的后面并且没有...
2020-11-01
几种常见的CSS布局(小结)
本文概要本文将介绍如下几种常见的布局：其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。另外几种可以猛戳实现三栏布局的几种方法一、单列布局常见的单列布局...
2020-11-01
详解css3中 text-fill-color属性
text-fill-color是什么意思呢？单单从字面上来看就是“文本填充颜色”,不过它实际也是设置对象中文字的填充颜色，和color的效果很相似。如果同时设置text-fill-color...
2020-11-01
CSS 中重要的层叠概念详解
最近在项目的过程中遇到了一个问题，menu-bar希望始终显示在最上面，而在之后的元素都显示在它之下，当时设置了 z-index 也没有效果，不知道什么原因，因此找了一下css有关层叠方面的...
2020-11-01
css 给div添加滚动并隐藏滚动条
css 给div添加滚动并隐藏滚动条 ，具体代码如下所示: 在html中<div class="box"> <div>下面内容会单独滚动</div> <div class="scroll"> <div class="content">...
2020-11-01
css列表滑动防止被底部遮住和适配屏幕长一点的机型处理
1、移动端处理列表滑动的时候，微信底下有自带的返回页面按钮，经常会被遮住，遇到屏幕长一点的，下面会短一大截，以下用此方法可以解决。
.container{ position:relative; backgr...
2020-11-01
css行内样式,内嵌样式,外部引用样式的三种使用方式
三中的使用方法的简单实例如下：行内样式：<!doctype html><html><head> <meta charset="UTF-8"> <title>css行内样式</title></head><body><div style="width:100px;height:100...
2020-11-01
使用CSS隐藏元素滚动条的示例代码
如何隐藏滚动条，同时仍然可以在任何元素上滚动？首先，如果需要隐藏滚动条并在内容溢出时显示滚动条，只需要设置overflow：auto样式即可。想要完全隐藏滚动条只需设置overflow：hidden...
2020-11-01
Css实现清除浮动的方法汇总
网页布局中经常会用到float浮动，但是浮动的块级元素脱离了标准文档流，使得浮动元素的父元素没有高度，导致父级元素没有高度，所以需要清除浮动对父级元素的影响，本文介绍清除浮动...
2020-11-01
使用纯css实现开关效果
首先是构思我们使用<input type="checkbox">标签来实现这个效果。checkbox的选中、未选中的特性，刚好对应开关的打开、关闭on:打开 off:关闭<label for="ck2"> <input type=...
2020-11-01
css轻松实现固定比例的块级容器
给H5布局的时候一般都会碰到banner（横幅）比如要显示成2比1 当然后端返回的图片是2比1就好了 但事情往往不会那么如意 所以怎么办呢 ？写死宽高总觉得不妥当默认width: 100%;让he...
2020-11-01
如何只使用CSS创建折叠标题效果的示例代码
折叠标题是向用户显示重要信息的绝佳解决方案，例如特价优惠和密钥通知。许多开发人员在创建此类效果时依赖JavaScript，但是，使用纯CSS创建更简单的折叠头效果也是完全可能的。...
2020-11-01
使用CSS3实现input多选框自定义样式的方法示例
原理：首先把input元素隐藏掉，然后用CSS设置label元素（其他元素也可以）的样式，选中时的样式使用input:check+label选中label，无须使用图片和JS效果预览html代码 <div class="radio"...
2020-11-01
使用css实现android系统的loading加载动画
web常用的loading图标有2种, 一种是ios的"菊花", 一种是android的"环". 今天我们用svg实现android的"环"动画, 下节课实现ios的"菊花".注意 : gif帧数少的原因, 实际动画效...
2020-11-01
flex-grow、flex-shrink、flex-basis和九宫格布局理解
一、flex-grow、flex-shrink、flex-basis属性flex-grow: 定义剩余空间的分成。默认为0，即如果存在剩余空间，也不放大。flex-shrink: 定义了项目的缩小比例。flex-shrink的默认...
2020-11-01
uni-app项目瀑布流布局的实现
github地址，喜欢的可以star下哦插件预览图使用教程1.插件代码拷贝下载后把components目录下waterfall.vue文件拷贝到自己项目目录下2.插件全局配置在项目里main.js中配置如下...
2020-11-01
你可能需要这样的大屏数字滚动效果
大屏数字滚动效果来源于最近工作中一张大屏的UI图，该UI图上有一个模块需要有数字往上翻动的效果，以下是最终实现的效果： 思路在实现此效果之前，我们先来捋一下思路，用思维导图来...
2020-11-01
CSS Houdini实现动态波浪纹效果
CSS Houdini 号称 CSS 领域最令人振奋的革新。CSS 本身长期欠缺语法特性，可拓展性几乎为零，并且新特性的支持效率太低，兼容性差。而 Houdini 直接将 CSS 的 API 暴露给开发者，以...
2020-11-01
详解css position 5种不同的值的用法
position属性position属性指定用于元素的定位方法的类型（静态，相对，固定，绝对或粘性）。 有五种不同的值：
•static
•relative
•fixed
•absolute
•sticky...
2020-11-01
css实现5种滚动吸顶实现方式的比较(性能升级版)
修改版预览这篇文章是三天前写就的，有大佬给我提了一些修改意见，我觉得这个意见确实中肯。所以就有了这个升级的修改版本。代码同步更新到 GitHub 了。修改内容如下： 添加了...
2020-11-01
纯CSS流星雨背景的示例代码
github地址，喜欢的可以star下哦插件预览图使用教程代码展示vue页面使用<template> <view class="space"> <view class="planet"> <view class="planet_...
2020-11-01
CSS画心形的三种方法
下面，介绍三种CSS画心形的方法。实现过程都非常简单，保证你一看就会。1.一颗div一颗心用一个div画出一个心，核心的方法就是使用伪元素。首先，我们在页面上先写出一个div：<div></d...
2020-11-01
css position属性为absolute时其百分值的计算
当position为absolue时候，其相关属性的百分比是相对它参考的元素（包含块）来进行计算并进行位置渲染的 。首先我们必须知道：1、[百分比的参照][1]：根据包含块计算百分值（1）元素的mar...
2020-11-01
css 媒体查询 aspect-ratio less 使用方法
css媒体查询有一个 宽高比很方便，aspect-ratio ，可以直接使用宽/高 来进行页面适配 使用样例如下：
// 宽高比在(（320/50）+(728/90))/2 两个尺寸中间值以内 适配 320*50 设计图...
2020-11-01
详解用backgroundImage解决图片轮播切换
单dom节点实现轮播利用backgroundImage可以添加多张图片，以及位置偏移实现轮播效果 创建一个div；并用backgroundImage给div附图片 利用backgroundPosition调节位置...
2020-11-01
css骚操作表单验证功能的实现代码
效果图原理表单元素中，有一个pattern属性，可以自定义正则表达式（如手机号、邮箱、身份证..）；valid伪类，可以匹配通过pattern验证的元素；invalid伪类则相反，可以匹配未通过pattern验...
2020-11-01
前端项目修改默认滚动条样式(小结)
写过挺多项目都需要改变滚动条的默认样式 并不想单独下载和引入插件 因此纯css修改默认滚动条的样式 这次算统一整理下方法，直接上代码。 &::-webkit-scrollbar {...
2020-11-01
CSS实现宽高等比自适应容器的方法
在最近开发移动端页面，遇到这么一个情况：当页面宽度 100% 时，高度为宽度一半，并随手机宽度变化依然是一半。于是我们就需要实现一个 宽度自适应，高度为宽度一半的容器 。这里先以...
2020-11-01
CSS 样式的使用方式、选择器
在html中使用css的三种方式：1、行内样式：同过元素的style属性来设置<p style="font-size:20px; color:red">hello</p>属性之间分号隔开。2、内部样式：在<head>的<style>元素中...
2020-11-01
css中的计算函数calc在网站布局中一个示例
calc在css 中是一个函数，用来做数值的计算。可以进行长度、角度、时间等的计算。支持 + 、 - 、 * 、 / 和小括号。使用的时候有个需要注意的地方是就是 加号和减号前后需要...
2020-11-01
控制Flex子元素在主轴上的比例的方法
背景flex布局更有效的实现对齐，空间分配。最近又学习下flex子元素的尺寸计算规则，主要是flex-grow, flex-shrink的计算规则的学习。一、基本概念1.1 主轴(Main axis)定义了fle...
2020-11-01
CSS 外边距(margin)重叠及防止方法
两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减...
2020-11-01
CSS3 毛玻璃效果
毛玻璃效果做的好能使页面显得非常生动立体。直接上图body { min-height: 100vh; box-sizing: border-box; margin: 0; padding-top: calc(50vh - 6em); fon...
2020-11-01
六大布局之FrameLayout的使用
前言上一期我们给大家讲解了LinearLayout，这一期我们为大家讲解一下FrameLayout（帧布局）的使用，相较于其他布局，FrameLayout可以说的上是最简单的一个，并且其使用范围相对来说也相...
2020-11-01
CSS实现照片堆叠效果的实例代码
实现效果 步骤1.初始index.html为了建立第一张照片，也就是最上面的那张。我们只需要添加一个div，里面包含照片的img。就这么多，剩下的效果都是通过CSS来实现的。确保div的class...
2020-11-01
CSS Reset 样式重置的实现示例
前言：所有浏览器都有附带的默认样式，这些样式应用在每一个页面，叫做“用户代理样式表”。（如下需要梯子）Chromium UA stylesheet -Google Chrome & OperaMozilla UA st...
2020-11-01
移动端适配 使px自动转换rem
先安装postcss-pxtorem： npm install postcss-pxtorem --save-dev 进行安装 通过屏幕的变化，设置动态根元素 font-size ： 我写在vue的html中function setRem () { le...
2020-11-01
详解flex和position兼容采坑笔记
今天有空写了一个自己主页的网站，浏览器兼容（主要ie 9以上和chrome），有一个以前的问题也是很常见的问题，既然遇见了，索性就记录下来。直接看问题吧<!DOCTYPE html><html><head><me...
2020-11-01
详解css粘性定位position：sticky问题采坑
前言：position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达...
2020-11-01
css设置Overflow实现隐藏滚动条的同时又可以滚动
css设置Overflow实现隐藏滚动条的同时又可以滚动，具体代码如下所示：.scroll-list ul{ white-space: nowrap; -webkit-overflow-scrolling: touch; overflow-x: auto;...
2020-11-01
css画一个棒棒糖的实例代码
背景:每天进步一点点,多积累一点点.就会越来越棒代码:<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>棒棒糖</title> <h3>用css画一个棒棒糖</h3>...
2020-11-01
css如何实现n宫格布局的方法示例
常见应用场景
现在的APP界面基本都是大同小异, 宫格布局现在基本成了每个APP必然的存在.带边框, 常用在"功能导航"页面无边框, 常用在首页分类设计目标在scss环境下, 通过mi...
2020-11-01
CSS3 animation – steps 函数详解
这几天在看一些 css3 动画的源码实现时，发现 css 代码的 animation 当中有一个比较陌生的单词 steps ，在源码中是这么写的：animation: thunder 2s steps(1, end) infinite;查阅...
2020-11-01
纯css实现输入框placeholder动效及输入校验
更多精彩内容请关注 https://github.com/abc-club/free-resources背景话不多说，我们能否用纯css实现以下效果:答案是肯定的。借助css:placeholder-shown :valid :invalid伪类...
2020-11-01
CSS自适应布局实现子元素项目整体居中，内部项目左对齐
日常工作时，我们可能遇到这样一个布局：一个父元素框框（随着浏览器大小自适应宽度）里面有许多按钮，然后这些按钮（宽度固定）的整体需要在父元素内居中对齐，而按钮整体的内容又是从左往...
2020-11-01
你必须要知道关于响应式布局的几件事
一、前言响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。本文主要介绍一些响...
2020-11-01
使用CSS混合模式和SVG来动态更改产品图片的颜色
前两天在Codepen看到了@Kyle Wetton写的一个示例， 使用CSS混合模式和SVG来改变沙发的颜色 。非常有意思的一案例。这让我想起了在实际的一些业务场景中的运用，比如说一些美妆...
2020-11-01
css新手教程之背景图充满整个屏幕
想让整个界面有一个背景图片，自然想到的是在body上加background，代码如下：body { width：100%； height: 100%; /* 加载背景图 */ background: url("../static/image...
2020-11-01
