CSS - 教程之家

112浏览

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

100浏览

0评论

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

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

2020-11-01

51浏览

0评论

解决margin 外边距合并问题

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

2020-11-01

122浏览

0评论

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

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

2020-11-01

75浏览

0评论

详解css3中 text-fill-color属性

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

2020-11-01

98浏览

0评论

CSS 中重要的层叠概念详解

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

2020-11-01

61浏览

0评论

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

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

2020-11-01

62浏览

0评论

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

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

2020-11-01

107浏览

0评论

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

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

2020-11-01

266浏览

0评论

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

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

2020-11-01

76浏览

0评论

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

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

2020-11-01

143浏览

0评论

使用纯css实现开关效果

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

2020-11-01

65浏览

0评论

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

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

2020-11-01

43浏览

0评论

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

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

2020-11-01

59浏览

0评论

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

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

2020-11-01

78浏览

0评论

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

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

2020-11-01

45浏览

0评论

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

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

2020-11-01

90浏览

0评论

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

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

2020-11-01

132浏览

0评论

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

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

2020-11-01

101浏览

0评论

CSS Houdini实现动态波浪纹效果

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

2020-11-01

97浏览

0评论

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

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

2020-11-01

71浏览

0评论

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

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

2020-11-01

66浏览

0评论

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

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

2020-11-01

131浏览

0评论

CSS画心形的三种方法

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

2020-11-01

130浏览

0评论

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

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

2020-11-01

120浏览

0评论

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

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

2020-11-01

159浏览

0评论

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

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

2020-11-01

124浏览

0评论

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

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

2020-11-01

87浏览

0评论

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

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

2020-11-01

116浏览

0评论

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

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

2020-11-01

132浏览

0评论

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

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

2020-11-01

200浏览

0评论

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

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

2020-11-01

124浏览

0评论

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

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

2020-11-01

104浏览

0评论

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

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

2020-11-01

68浏览

0评论

CSS3 毛玻璃效果

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

2020-11-01

69浏览

0评论

六大布局之FrameLayout的使用

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

2020-11-01

104浏览

0评论

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

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

2020-11-01

99浏览

0评论

CSS Reset 样式重置的实现示例

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

2020-11-01

52浏览

0评论

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

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

2020-11-01

111浏览

0评论

详解flex和position兼容采坑笔记

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

2020-11-01

73浏览

0评论

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

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

2020-11-01

103浏览

0评论

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

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

2020-11-01

163浏览

0评论

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

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

2020-11-01

117浏览

0评论

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

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

2020-11-01

67浏览

0评论

CSS3 animation – steps 函数详解

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

2020-11-01

119浏览

0评论

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

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

2020-11-01

83浏览

0评论

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

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

2020-11-01

139浏览

0评论

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

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

2020-11-01

110浏览

0评论

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

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

2020-11-01

88浏览

0评论

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

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

2020-11-01

热门文章