CSS - 教程之家

83浏览

0评论

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

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

2020-11-01

101浏览

0评论

CSS loading效果之吃豆人的实现

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

2020-11-01

50浏览

0评论

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

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

2020-11-01

98浏览

0评论

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

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

2020-11-01

41浏览

0评论

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

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

2020-11-01

81浏览

0评论

CSS3 @media的基本用法总结

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

2020-11-01

115浏览

0评论

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

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

2020-11-01

126浏览

0评论

css简单动画之transition属性详解

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

2020-11-01

88浏览

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

69浏览

0评论

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

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

2020-11-01

95浏览

0评论

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

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

2020-11-01

78浏览

0评论

css 多列布局解决方案

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

2020-11-01

201浏览

0评论

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

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

2020-11-01

168浏览

0评论

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

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

2020-11-01

105浏览

0评论

css实现旋转翻牌动画效果

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

2020-11-01

178浏览

0评论

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

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

2020-11-01

167浏览

0评论

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

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

2020-11-01

81浏览

0评论

CSS 设置滚动条样式的实现

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

2020-11-01

112浏览

0评论

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

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

2020-11-01

53浏览

0评论

css link与@import区别详解

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

2020-11-01

139浏览

0评论

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

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

2020-11-01

45浏览

0评论

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

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

2020-11-01

70浏览

0评论

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

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

2020-11-01

150浏览

0评论

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

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

2020-11-01

106浏览

0评论

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

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

2020-11-01

135浏览

0评论

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

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

2020-11-01

105浏览

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

93浏览

0评论

css滚动条样式修改的代码

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

2020-11-01

120浏览

0评论

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

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

2020-11-01

105浏览

0评论

css 之空格处理的方法

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

2020-11-01

83浏览

0评论

CSS 阴影动画优化技巧

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

2020-11-01

124浏览

0评论

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

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

2020-11-01

218浏览

0评论

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

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

2020-11-01

123浏览

0评论

CSS3 边框效果

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

2020-11-01

86浏览

0评论

css3给背景图片加颜色遮罩的方法

前段时间在开发中，遇到需要给背景层加颜色遮罩的项目，现在特定总结一下给背景图层加颜色遮罩的方法。方法一：通过定位叠加(注意层级)<div class="wrap1"> <div class="inne...

2020-11-01

105浏览

0评论

CSS3实现图片抽屉式效果的示例代码

老规矩，先放图片效果图：这个效果实现原理很简单：只要你掌握css3动画和过渡相关知识就行，不用js代码；HTML代码：<div> <ul id="list"> <li > <a...

2020-11-01

235浏览

0评论

css :not的多个条件的写法详解

:not 伪类选择器可以筛选不符合表达式的元素例子table tbody tr:not(:first-child):not(:last-child) td{ text-align: right;}以上代码可以选择table表格中tbody部分非...

2020-11-01

80浏览

0评论

手把手教你CSS水平、垂直居中的10种方式(小结)

面试必备，工作一定会用到。emmm大家都懂的，话不多说，先直接贴一个总结和效果图。总结 PC端有兼容性要求，子元素宽高固定，推荐absolute + 负margin PC端有兼容要求，子元素宽...

2020-11-01

121浏览

0评论

CSS3制作轮播图的一种方法

轮播图，网页上经常能看得见，画面比较精美，下面是纯CSS3的轮播图的一种下面是style部分：这几行都能明白吧<style> *{margin:0;padding:0;} a{text-decoration:none} li{...

2020-11-01

65浏览

0评论

css实现流程导航效果(三种方法)

css实现流程导航效果，具体内容如下所示：::tip 使用纯css线上流程导航效果。本文统一采取 flex 布局 ,你也可以采用其他布局实现，核心原理不变 ::: ## 方法一利用裁剪...

2020-11-01

143浏览

0评论

CSS3 新增选择器的实例

结构(位置)伪类选择器（CSS3) :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n...

2020-11-01

111浏览

0评论

奇妙的 CSS 属性 MASK详解

本文将介绍 CSS 中一个非常有意思的属性 mask 。顾名思义，mask 译为遮罩。在 CSS 中，mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部...

2020-11-01

144浏览

0评论

详解css盒子模型之内边距padding及简写

如上图,padding值是复合属性按照顺时针(上右下做)顺序,其中padding的内边距影响盒子大小的实际宽高

<!DOCTYPE html><html><head><meta charset="utf-8"><title></ti...

2020-11-01

51浏览

0评论

关于css中margin的值和垂直外边距重叠问题

并列盒子的margin(双margin的重叠)面试题:一个盒子有上边距,另一个盒子有下边距,会出现margin边距的重叠问题?解决:取大值,并不是他们的相加之和,而是谁大听谁的!

<!DOCT...

2020-11-01

43浏览

0评论

浅析CSS3 用text-overflow解决文字排版问题

基本语法

text-overflow的使用需配合hight,over-flow:hidden;white-space:nowrap;三个属性共同使用

text-overflow: clip;ellipsis;string

clip: 直接隐藏不显示

el...

2020-11-01

62浏览

0评论

css实现六种自适应两栏布局方式

html结构

<body> <div class="wrapper"> <div class="left"></div> <div class="right"></div> </div> </body>

方法一：flex...

2020-11-01

134浏览

0评论

css3实现简单的白云飘动背景特效

这是一款非常简单的纯CSS3白云飘动背景特效。该白云飘动特效使用CSS animation动画来控制不同的白云，以不同的速度进行运动，形成白云飘动的效果。

HTML结构

该白...

2020-11-01

99浏览

0评论

解决CSS3 transition-delay 属性默认值0不带单位失效的问题

今天爱分享给大家带来CSS3 transition-delay 属性默认值0不带单位失效【问题解决】，希望能够帮助到大家。

CSS3 里面的 transition-delay 用了0默认值本来按前端代码规...

2020-11-01

88浏览

0评论

详解CSS line-height和height

最近在做CSS界面时经常遇到line-height和height这两个属性，一直没搞很明白，今天静下心来好好网上查阅了一下，算是有所领悟。https://blog.csdn.net/a2013126370/article/deta...

2020-11-01

75浏览

0评论

CSS3实现彩色进度条动画的示例

简要教程

这是一款css3彩色进度条动画特效。该CSS3进度条动画特效中包含了三种动画特效，它们通过HMTL代码和简单的CSS3来实现彩色进度条的不同动画效果。

使...

2020-11-01

热门文章