编程开发 - 教程之家

184浏览

0评论

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

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

2020-11-01 23:20:23

203浏览

0评论

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

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

2020-11-01 23:20:21

103浏览

0评论

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

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

2020-11-01 23:20:19

185浏览

0评论

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

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

2020-11-01 23:20:18

306浏览

0评论

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

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

2020-11-01 23:20:17

249浏览

0评论

CSS Houdini实现动态波浪纹效果

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

2020-11-01 23:20:14

260浏览

0评论

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

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

2020-11-01 23:20:12

204浏览

0评论

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

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

2020-11-01 23:20:11

190浏览

0评论

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

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

2020-11-01 23:20:08

214浏览

0评论

CSS画心形的三种方法

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

2020-11-01 23:20:05

284浏览

0评论

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

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

2020-11-01 23:20:03

183浏览

0评论

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

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

2020-11-01 23:20:01

281浏览

0评论

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

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

2020-11-01 23:20:00

234浏览

0评论

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

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

2020-11-01 23:19:59

221浏览

0评论

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

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

2020-11-01 23:19:57

240浏览

0评论

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

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

2020-11-01 23:19:56

230浏览

0评论

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

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

2020-11-01 23:19:55

329浏览

0评论

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

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

2020-11-01 23:19:54

279浏览

0评论

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

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

2020-11-01 23:19:52

196浏览

0评论

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

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

2020-11-01 23:19:51

194浏览

0评论

CSS3 毛玻璃效果

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

2020-11-01 23:19:50

148浏览

0评论

六大布局之FrameLayout的使用

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

2020-11-01 23:19:48

263浏览

0评论

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

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

2020-11-01 23:19:46

244浏览

0评论

CSS Reset 样式重置的实现示例

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

2020-11-01 23:19:44

167浏览

0评论

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

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

2020-11-01 23:19:43

225浏览

0评论

详解flex和position兼容采坑笔记

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

2020-11-01 23:19:42

196浏览

0评论

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

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

2020-11-01 23:19:40

235浏览

0评论

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

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

2020-11-01 23:19:39

299浏览

0评论

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

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

2020-11-01 23:19:38

277浏览

0评论

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

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

2020-11-01 23:19:37

137浏览

0评论

CSS3 animation – steps 函数详解

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

2020-11-01 23:19:35

276浏览

0评论

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

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

2020-11-01 23:19:33

202浏览

0评论

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

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

2020-11-01 23:19:29

337浏览

0评论

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

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

2020-11-01 23:19:27

245浏览

0评论

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

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

2020-11-01 23:19:25

224浏览

0评论

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

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

2020-11-01 23:19:22

232浏览

0评论

用CSS防Lightbox实现点击小图无刷新显示大图代码

用CSS防Lightbox实现点击小图无刷新显示大图代码代码简介：CSS的“Lightbox”是一个人见人爱的图片显示技术，她可以实现点击小图无刷新显示大图的功能。Discuz论坛就...

2020-11-01 23:19:21

261浏览

0评论

CSS loading效果之吃豆人的实现

emmm 名字瞎想的2333前言这是一个用来练习的css demo，如果有哪里写的不好，还请各位指正，一定虚心接受。嘻嘻HTML布局 <div class="container"> <div class="loading">...

2020-11-01 23:19:20

188浏览

0评论

html/css中float浮动的用法实例详解

一、float基础用法示例1、我们先建两个div盒子，设置高度、宽度和背景颜色；最开始两个盒子在网页上的位置如下：然后我们将红色盒子浮动到右边然后我们会发现红色盒子浮动到了...

2020-11-01 23:19:19

280浏览

0评论

css3进阶之less实现星空动画的示例代码

本文介绍了css3进阶之less实现星空动画的示例代码，分享给大家，具体如下：效果动图如下：预览链接和代码在我的codepen： https://codepen.io/lio-mengxiang/pen/YzKrEde 知识点预览...

2020-11-01 23:19:17

178浏览

0评论

css3 伪类选择器快速复习小结

前言如果说 css 作为前端开发的基本功, 那么 "选择器" 就是基础中的基础. 如果你在复写或者学习这些容易令人混淆的选择器, 那么你就来对地方了, 我的老伙计.本篇文章会直接...

2020-11-01 23:19:15

262浏览

0评论

CSS3 @media的基本用法总结

//语法：@media mediatype and | not | only (media feature) { css-code; }//也可以针对不同的媒体使用不同的stylesheets: <link rel="stylesheet" media="mediatype and|no...

2020-11-01 23:19:12

205浏览

0评论

纯css实现乌云密布的天气图标效果

效果效果如下实现思路使用box-shadow属性画几个灰色的圆，将这些圆错落的组合在一起，形成乌云图案 after伪元素写乌云下的投影增加动画dom结构用两个嵌套的d...

2020-11-01 23:19:11

315浏览

0评论

css简单动画之transition属性详解

一、对transition属性的认识1、transition 属性是一个简写属性，可用于设置四个过渡属性：
transition-property 过渡效果的 CSS 属性的名称（height、width、opacity等）。
tr...

2020-11-01 23:19:10

165浏览

0评论

css 不定宽高的元素居中布局解决方案

1. 水平居中公共代码:html:<div class="parent"> parent <br> <div class="child"> child </div></div>css:html, body { margin: 0; width: 100%...

2020-11-01 23:19:07

238浏览

0评论

纯css写一个大太阳的天气图标的方法示例

效果效果图如下实现思路 div实现太阳的一条矩形光影 before伪元素制作另一条光影矩形，和已有的转变90° after伪元素画个圆实现太阳样式dom结构用两个嵌套的div...

2020-11-01 23:19:06

168浏览

0评论

使用CSS实现图片帧动画与曲线运动

所有动画的基本原理都是：在短时间内连续依次展示对应的图片，这样在视觉上看起来就是'动'的了。本文主要来说一说第4点和第5点。图片帧动画当我们要实现的动画效果比较复杂，而且...

2020-11-01 23:19:05

142浏览

0评论

css 多列布局解决方案

一. 定宽 + 自适应期望效果: 左侧宽度固定, 右侧宽度自适应
公共代码:
html:<div class="parent"> <div class="left"> <p>left menu</p> </div> <div cla...

2020-11-01 23:19:03

360浏览

0评论

运用CSS methodologies去实现模块化的方法示例

一、什么是 CSS methodologiesCSS methodologies，可以理解成设计模式，也可以理解成 css 规范，市面使用情况如下图：上图来源：https://2019.stateofcss.com/technologies/你可能在...

2020-11-01 23:19:02

356浏览

0评论

CSS实现雨滴动画效果的实例代码

玻璃窗今天我们要实现的是雨滴效果，不过实现雨滴前，我们先把毛玻璃的效果弄出来，没有玻璃窗，雨都进屋了，还有啥好敲打的。<div class='window'></div>.window { posit...

2020-11-01 23:19:01

热门文章