编程开发 - 教程之家

82浏览

0评论

CSS3 毛玻璃效果

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

2020-11-01 23:19:50

76浏览

0评论

六大布局之FrameLayout的使用

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

2020-11-01 23:19:48

122浏览

0评论

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

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

2020-11-01 23:19:46

124浏览

0评论

CSS Reset 样式重置的实现示例

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

2020-11-01 23:19:44

63浏览

0评论

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

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

2020-11-01 23:19:43

118浏览

0评论

详解flex和position兼容采坑笔记

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

2020-11-01 23:19:42

86浏览

0评论

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

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

2020-11-01 23:19:40

112浏览

0评论

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

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

2020-11-01 23:19:39

175浏览

0评论

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

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

2020-11-01 23:19:38

143浏览

0评论

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

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

2020-11-01 23:19:37

75浏览

0评论

CSS3 animation – steps 函数详解

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

2020-11-01 23:19:35

144浏览

0评论

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

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

2020-11-01 23:19:33

94浏览

0评论

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

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

2020-11-01 23:19:29

163浏览

0评论

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

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

2020-11-01 23:19:27

123浏览

0评论

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

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

2020-11-01 23:19:25

106浏览

0评论

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

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

2020-11-01 23:19:22

111浏览

0评论

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

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

2020-11-01 23:19:21

130浏览

0评论

CSS loading效果之吃豆人的实现

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

2020-11-01 23:19:20

83浏览

0评论

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

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

2020-11-01 23:19:19

134浏览

0评论

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

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

2020-11-01 23:19:17

68浏览

0评论

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

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

2020-11-01 23:19:15

135浏览

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

130浏览

0评论

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

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

2020-11-01 23:19:11

170浏览

0评论

css简单动画之transition属性详解

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

2020-11-01 23:19:10

103浏览

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

108浏览

0评论

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

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

2020-11-01 23:19:06

109浏览

0评论

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

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

2020-11-01 23:19:05

87浏览

0评论

css 多列布局解决方案

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

2020-11-01 23:19:03

234浏览

0评论

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

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

2020-11-01 23:19:02

207浏览

0评论

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

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

2020-11-01 23:19:01

141浏览

0评论

css实现旋转翻牌动画效果

css动画之旋转翻牌效果，具体内容如下所示：1、我们先设置两个盒子大小，颜色等等，然后定位重叠在一起，最后再进行动画设置例子如下：<style> .box { height: 300px...

2020-11-01 23:18:59

203浏览

0评论

基于html css实现带搜索图标的搜索框功能

前言给大家分享一下前端用处很多的带小图标的搜索框的制作方法。效果展示
基本思路1、搜索图像用绝对定位放到搜索框的上方2、input框设置文本缩进，大小为搜索图像大小加上图...

2020-11-01 23:18:57

202浏览

0评论

浅谈css position absolute相对于父元素的设置方式

大家知道css的position absolute默认是根据document来设置的，比如position:absolute后设置left:0;top:0这时候元素会显示到页面的左上角。有时候我们需要在父元素的容器内设...

2020-11-01 23:18:56

123浏览

0评论

CSS 设置滚动条样式的实现

webkit滚动条样式重置1、scrollbar包含scrollbar buttons和一个track。track进一步细分为track pieces和thumb。trace pieces为thumb的上半部分和半下部分。
2、scrollbar c...

2020-11-01 23:18:55

141浏览

0评论

scss使用mixin不生效(浏览器无法编译出来)的解决方法

mixin方法：浏览器无法编译：以前旧版sass是支持上面写法，现在新版后不支持，传入变量必须加#{}编译浏览器编译：以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持...

2020-11-01 23:18:54

67浏览

0评论

css link与@import区别详解

如何在html中添加css？在html中设置css共有三种方式，分别是：行内式内嵌式导入式-link 导入式-@import1.行内式。即在html标签中的style属性中设置css，值得注意的...

2020-11-01 23:18:52

149浏览

0评论

CSS3 实现footer 固定在底部(无论页面多高始终在底部)

前言把 footer 区固定在底部，无论页面高度多宽，它始终在底部不会变，就像移动端的菜单一样。<!DOCTYPE html><html><head><meta charset="utf-8" /><title>document</title><!--...

2020-11-01 23:18:51

56浏览

0评论

CSS ellipsis 与 padding 结合时的问题详解

CSS 实现的文本截断考察如下代码实现文本超出自动截断的样式代码：.truncate-text-4 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-...

2020-11-01 23:18:49

100浏览

0评论

使用CSS3实现SVG路径描边动画效果入门教程

不依赖javascript，直接使用纯css实现 svg 的描边绘制动画效果，效果演示动画。基础知识：SVG中有个比较重要的属性分支 stroke ，中文软件中称为“描边”。和stroke相关...

2020-11-01 23:18:48

200浏览

0评论

CSS实现 Google Material Design 文本输入框风格(推荐)

大家好，今天想要跟大家分享如何使用纯CSS来实现 Google Material Design 文本输入框的风格。虽然今天我们有很多框架可以帮我们实现这些风格，不过通过学习在底层是如何使用纯C...

2020-11-01 23:18:46

155浏览

0评论

CSS 如何影响首次加载时的白屏时间的解决方法

含有外部 css 文件的渲染流水线上图中，请求 HTML 数据和构建 DOM 中间有一段空闲时间，这段时间可能成为页面渲染的瓶颈。DOM 构建结束后，css 文件还未下载完成这段时间内，渲染...

2020-11-01 23:18:45

174浏览

0评论

详解CSS盒子塌陷的5种解决方法

一，盒子塌陷是什么？本应该在父盒子内部的元素跑到了外部。二，为什么会出现盒子塌陷？当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文...

2020-11-01 23:18:43

127浏览

0评论

利用css制作3D照片墙效果

利用css制作3D照片墙，具体代码如下所示：<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><body> <div> <img src="#"/> <img src="#"/>...

2020-11-01 23:18:42

124浏览

0评论

css滚动条样式修改的代码

css滚动条样式修改的代码.scroll::-webkit-scrollbar { // 纵向滚动条和横向滚动条宽度 width: 1px; height: 1px;}.scroll::-webkit-scrollbar-thumb {...

2020-11-01 23:18:37

155浏览

0评论

CSS3中的display:grid，网格布局介绍

1.网格布局(grid):　　　　　　　　它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局;2.基本概念：　　　　　　　　容器和项目，如图所示： <div class="co...

2020-11-01 23:18:36

129浏览

0评论

css 之空格处理的方法

1、空格规则HTML 代码的空格通常会被浏览器忽略。<p> hello world </p>上面是一行 HTML 代码，文字的前部、内部和后部各有两个空格。浏览器的输出结果如下: hello world可...

2020-11-01 23:18:34

132浏览

0评论

CSS 阴影动画优化技巧

本技巧来自这篇文章 --How to animate box-shadow with silky smooth performance本文不是直译，因为觉得这个技巧很有意思很有用，遂起一文。box-shaodw在我们的工作中使用以及...

2020-11-01 23:18:33

154浏览

0评论

css清除默认样式和设置公共样式的方法

CSS 清除默认样式通常的清除默认样式：*{ margin:0; padding:0}li{ list-style:none}img{ vertical-align:top; border:none}设置默认字体body,button, input,...

2020-11-01 23:18:31

264浏览

0评论

uni-app中使用scss的示例代码

遇到的坑整个一个下午我都在解决uni-app中使用scss的坑，首先说一下我的问题，在用scss时一直不能使用@mixin，然后百度各种办法调试：代码写法问题（完全按官网的写法来的不可行）: 官...

2020-11-01 23:18:30

177浏览

0评论

CSS3 边框效果

什么是CSS#CSS(Cascading Style Sheets的缩写)，翻译为“层叠样式表”或“级联样式表”，简称样式表。CSS的主要作用#它主要是用来给HTML网页来设置外观或...

2020-11-01 23:18:29

热门文章