编程开发 - 教程之家

262浏览

0评论

CSS3实现div从下往上滑入滑出效果示例

1，首先需要用的是 CSS3的 target 选择器，配合a标签指定id选择器切换目标元素，用于选取当前活动的目标元素。
2，CSS3 的 transition 动画，这里不做详细介绍看一下效果图：点击滑出...

2020-10-16 03:15:29

141浏览

0评论

基于CSS 判断鼠标进入的方向

在之前某一个前端技术群里，有一个群友说他面试的时候遇到了一个问题，就是面试官让他用纯 CSS 来实现一个根据鼠标移动位置觉得物体移动方向的 DEMO。给出的初始结构如下：<style...

2020-10-16 03:15:27

228浏览

0评论

基于ccs3的timeline时间线实现方法

在web项目中我们经常要使用时间轴（timeline）控件。本文提供一种基于CSS3的可逐项展开的timeline，在各展开项中可以嵌入文本、图片、视频等元素。运行效果如下：实现该控件的实现...

2020-10-16 03:15:25

157浏览

0评论

通过css3的filter滤镜改变png图片的颜色的示例代码

本方法是通过CSS3滤镜 filter 中的 drop-shadow 将png图片的非透明部分生成任意颜色的投影，然后将原始图片隐藏起来，从而达到改变图片颜色的目的
先看效果图接下来是代码<p><s...

2020-10-16 03:15:24

112浏览

0评论

CSS3实现渐变背景兼容问题

我们在做一个渐变背景颜色的时候会用到linear-gradient() 函数用于创建一个线性渐变的 "图像"。它是css3中的语法，最低兼容IE10background-image: linear-gradient(to right,...

2020-10-16 03:15:23

140浏览

0评论

如何利用定位使元素居中(web端页面布局小技巧)

元素在浏览器窗口居中的方法这里先给出代码块，如果有同学已经看出来点眉目可以先自己尝试一下。 position:fixed; /*给想要居中的元素设置*/ left:50%; /*或者right:50%*/ t...

2020-10-16 03:15:22

126浏览

0评论

flex弹性盒布局最后一行左对齐的实现思路

使用flex布局，如果是九宫格的话正好可以平分，如图如果是我们只需要八块，如图但是我们想让最后一块左对齐，依次排列，需要在元素的父级增加伪元素after，如图<div class="box"> <ul> ...

2020-10-16 03:15:21

243浏览

0评论

借助CSS mask遮罩显著优化PNG图片的尺寸(推荐)

本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、无法进一步压缩的PNG图片例如有如下所示的PNG图片（尺寸1/2显示了），使用顶级的PNG工具压缩后...

2020-10-16 03:15:19

137浏览

0评论

CSS 继承 inherit属性的方法

给定一张有如下背景图的 div：制作如下的倒影效果：方法很多，但是我们当然要寻找最快最便捷的方法，至少得是无论图片怎么变化， div 大小怎么变化，我们都不用去改我们的代码。法一：-we...

2020-10-16 03:15:17

113浏览

0评论

CSS中如何解决外边距塌陷问题

首先我们先看出现外边距塌陷的三种情况：1.当上下相邻的两个块级元素相遇，上面的元素有下边距margin-bottom，下面的元素有上边距margin-top，则它们之间的垂直距离取两个值中的较...

2020-10-16 03:15:16

158浏览

0评论

css3的focus-within选择器的使用

伪元素和伪类说到这个，我们先回顾一下，伪类选择器和伪元素选择器，老版的浏览器没有严格区分下面 2 种写法。a:after{}a::after{}在新的标准中，单冒号(:)用于 CSS3 伪类，双冒号(::...

2020-10-16 03:15:15

198浏览

0评论

纯CSS实现取字符串的第一个字符实现文字图标功能

如何通过CSS实现文字图标/*图标样式*/.nav-icon-normal { width: 32px; height: 32px; line-height: 33px; display: inline-block; border-radius: 6px;...

2020-10-16 03:15:13

174浏览

0评论

html+css制作div标签增加右上角删除图标的示例代码

一、需求描述在Div标签的右上角显示删除图标二、实现方式html、CSS三、参考代码<style>.container{ width:60px; height:60px; border: 1px dotted re...

2020-10-16 03:15:11

144浏览

0评论

css3遮罩层镂空效果的多种实现方法

本文介绍了的4种实现遮罩层镂空的方法，分享给大家，也给自己留个笔记，具体如下：先看看效果【方法一：截图模拟实现】原理：先截一张相同位置的图片，创建一个遮罩层，然后把图片定位在...

2020-10-16 03:15:10

97浏览

0评论

CSS背景图片设置的6个有趣的技巧

背景图像可能是所有前端开发人员在我们的职业生涯中至少使用过几次的CSS属性之一。大多数人认为背景图片没有什么不寻常的，但是。。。。。。1.如何将背景图像完美地适合视口b...

2020-10-16 03:15:09

105浏览

0评论

一文掌握CSS 属性display:flow-root声明

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9404本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、Safari浏览器支持了di...

2020-10-16 03:15:07

122浏览

0评论

CSS将img图片填满父容器div自适应容器大小的实现方法

当一个页面中引入多张图片时候，会碰到图片尺寸不一致，单要求显示成一致的大小，我们直接设置图片尺寸会导致图片变形，这就是我们遇到的问题，看下解决方法<div> <img src="...

2020-10-16 03:15:06

122浏览

0评论

CSS设置div背景图的实现代码

给组件添加背景图控制只需要两步：<View className="gifts" style={{ background: `url(${baseUrl}starMove/exclusiveEntrance/card.png...

2020-10-16 03:15:05

181浏览

0评论

css使用@media响应式适配各种屏幕的方法示例

定义和使用使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有...

2020-10-16 03:15:03

224浏览

0评论

CSS实现波动水球效果的示例代码

今天学习到了一个新的css特效，波动水球效果，也是非常的好看HTML：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width...

2020-10-16 03:15:02

158浏览

0评论

css中转换为行内样式的解决方案(css-inline)

聊聊场景发送邮件在第三方网站中嵌入HTML 从其他编辑器拷贝编辑好的文章发布到微信、今日头条等自媒体在以上场景使用行内样式的兼容性要高很多，也可以保持原样式...

2020-10-16 03:15:01

95浏览

0评论

CSS盒子隐藏/显示后再最上层的实现代码

.imgbox{ width: 1200px; height: 612px; margin-right: auto; margin-left: auto; margin-top: 60px; }.m1{ border: solid; border-width: 1px; height: 300p...

2020-10-16 03:15:00

300浏览

0评论

css3实现背景模糊的三种方式(小结)

一、普通背景模糊代码：<Style> html, body { width: 100%; height: 100%; } * { margin: 0; pad...

2020-10-16 03:14:58

169浏览

0评论

详解flex布局中保持内容不超出容器的解决办法

在移动端，flex 布局很好用，它能够根据设备宽度来自动调整容器的宽度，用起来很方便，已经越来越离不开它，但是最近在做项目的时候发现一个问题。就是在一个设置了 flex:1 的容器中，...

2020-10-16 03:14:56

297浏览

0评论

Flex布局做出自适应页面(语法和案例)

Flex布局简介Flex英文为flexiable box，翻译为弹性盒子，Flex布局即弹性布局。Flex布局为盒子模型提供了很大的灵活性，任何一个容器都可以指定为Flex布局，设置方法为：.box{ disp...

2020-10-16 03:14:55

146浏览

0评论

css+html实现Skeleton Screen 加载占位图动画效果（带动画）

效果自上而下渐隐渐现源码html，用的angular语法，只要做简单的修改就可以成为你需要的语法<div *ngFor="let item of [1,1,1],index as index" class="skeletonItem anim-opaci...

2020-10-16 03:14:53

103浏览

0评论

css中一些常用的font-size字体单位和line-height详解

px(pixel)像素相信大家对像素这个名词并不陌生,接下来来介绍下这个单位的一些小知识点:pixel 是 picture(图片)和element(元素)这两个词组成的.pixel不是绝对的自然长度单位...

2020-10-16 03:14:51

173浏览

0评论

element带选择表格将表头的复选框改成文字的实现代码

方法一：使用表格属性：header-cell-class-name 表格界面代码<el-table ref="multipleTable" :data="tableData" :header-cell-class-name="cellclass" style="widt...

2020-10-16 03:14:50

242浏览

0评论

浅析CSS中单位px、rem、em、vh、vw之间的区别

绝对长度pxpx是像素值，是一个固定的长度，比如我们的米，厘米一样。相对长度为什么我们需要相对长度rem em等？固定长度已经不能满足我们现在的需求了。举例：比如我们在缩小我们屏幕...

2020-10-16 03:14:49

165浏览

0评论

用CSS Grid布局制作一个响应式柱状图的实现

最新一段时间比较喜欢玩弄图表，出于好奇，我想找出比较好的用 CSS 制作图表的方案。开始学习网上开源图表库，它对我学习新的和不熟悉的前端技术很有帮助，比如这个：CSS Grid。今天...

2020-10-16 03:14:48

114浏览

0评论

CSS columns实现两端对齐布局的示例代码

一、兜兜转转一大圈兜兜转转一大圈，最后发现实现两端对齐布局方式最简单的居然是使用CSS columns多栏布局。例如，我们想要实现3列元素两端对齐，中间间隙是30px，CSS代码为：.conta...

2020-10-16 03:14:46

165浏览

0评论

CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解

windows 下默认的滚动条样式巨丑，项目中又有比较多地方会显示滚动条，故回头翻了一下CSS3，还真能不用插件实现自定义滚动条的样式，正合我意代码如下：/定义滚动条高宽及背景高宽...

2020-10-16 03:14:44

84浏览

0评论

CSS 3.0 结合video视频实现的创意开幕效果

给大家分享一个用CSS 3.0结合video视频实现的创意开幕，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"...

2020-10-16 03:14:43

150浏览

0评论

利用css3实现进度条效果及动态添加百分比

项目过程中，开始使用了js的requestAnimationFrame方法实现进度条，但是在数据超级多的时候非常影响性能，如此改用css去实现，优化。先贴代码：<!DOCTYPE html><html lang="en"><head...

2020-10-16 03:14:33

342浏览

0评论

CSS3实现歌词进度文字颜色填充变化动态效果的思路详解

播放音乐时，歌词会随歌曲的进度逐渐填充颜色，不是逐字改变颜色，而是从左向右横向逐个像素改变的，也就是说会出现一个字的左右两边是不同颜色的效果。这个效果通过CSS3可以实现。...

2020-10-16 03:14:31

172浏览

0评论

CSS实现三栏布局中间一栏自适应且随文字大小变化宽度的示例代码

百度面试碰到的题，要实现如下布局效果其中中间这紫色的一栏的大小随字体的多少而变宽/变窄，且多出的文字自动省略为[...],右边的绿色栏要紧紧连着紫色这一栏。主要对紫色这一...

2020-10-16 03:14:30

285浏览

0评论

使用CSS实现三栏自适应布局(两边宽度固定，中间自适应)

所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。我这里主要分为两大类，一类是基于position传统的实现，一类是基...

2020-10-16 03:14:29

210浏览

0评论

css实现缕空遮罩层的示例代码

本文内容：页面镂空遮罩层、页面镂空遮罩引导层、图片镂空遮罩常规遮罩层<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conte...

2020-10-16 03:14:27

146浏览

0评论

CSS样式书写顺序和命名规范及注意事项

书写顺序的意义减少浏览器reflow（回流），提升浏览器渲染dom的性能①:解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构②:构建render树：D...

2020-10-16 03:14:25

109浏览

0评论

浅谈Flex布局与缩放比例计算

一、Flex 布局简介Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局，也就是说，行内元素也可以设置成Flex 布...

2020-10-16 03:14:24

91浏览

0评论

css实现背景虚化效果的示例代码

是不是下面的效果，是的话那就继续往下看！代码演示（以上图效果为例）把主要模块写出来，其他详细内容的代码就省略啦HTML代码： <div class="login-container"> //这个div就是背景...

2020-10-16 03:14:21

235浏览

0评论

CSS3实现淘宝留白的方法

做一个淘宝的留白：当你在缩小浏览器页面的时候他的内容区并没有缩小，是留白的变小。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type...

2020-10-16 03:14:19

153浏览

0评论

css 布局之两端布局的实例代码（利用父级负的margin）

最近在进行开发的过程中，有遇到两端对齐的布局，是按照百分比来进行布局的，之前有用过flex布局，但是flex布局，使用两端布局的时候，会出现一切bug。比如，下面的是动态生成的时候，三列...

2020-10-16 03:14:18

120浏览

0评论

CSS通过letter-spacing属性控制字与字间隔

letter-spacing 属性：增加或减少字符间的空白（字符间距）。该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔...

2020-10-16 03:14:17

243浏览

0评论

css实现朋友圈照片排列布局的代码

首先可以打开朋友圈观察不同图片数量的几种布局,也可参考下图示例；可以发现除1张图片，4张图片特殊外，其他数量图片均使用一行三列的方式排列；假设有如下HTML代码，这里imgList是一...

2020-10-16 03:14:16

228浏览

0评论

详解CSS3实现响应式手风琴效果

最近看了国外大佬用CSS3实现手风琴效果的视频,所以自己学习后写了一下,以博客的形式记录下来,方便自己日后复习,代码结构如下(字体用的是Genericons ):最终效果如下:全屏时:...

2020-10-16 03:14:14

157浏览

0评论

修复一个因为scrollbar占据空间导致的bug问题

背景这一个因为滚动条占据空间引起的bug, 查了一下资料，最后也解决了，顺便研究一下这个属性，做一下总结，分享给大家看看。正文昨天，测试提了个问题，现象是一个输入框的聚焦提...

2020-10-16 03:14:11

119浏览

0评论

CSS实现3D书本效果的示例代码

话不多说，先来看一下效果图源代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-...

2020-10-16 03:14:09

157浏览

0评论

CSS中的float和margin的混合使用示例代码

在最近的学习中，在GitHub上找了一些布局练习，我发现了我自己对布局超级不熟悉（很难受）。在以前的学习中，感觉使用CSS就记住各个属性的功能就OK了，但是呢？真的很打脸。不说了，太伤心...

2020-10-16 03:14:08

100浏览

0评论

CSS3中引入多种自定义字体font-face

今天在HTML中发现了一个问题，提供给我们默认的字体有很多，但是除了那些“黑体”、“宋体”、“楷体”等支持中文字体之外，其余的都不知道中文字...

2020-10-16 03:14:06

热门文章