编程开发 - 教程之家

136浏览

0评论

rem布局原理解析

移动端的屏幕大小各异,尤其是安卓机,千奇百怪,各种尺寸的机型都有,而且有1倍屏,2倍屏，3倍屏之分，作为精益求精的前端，我们希望找到一种完美适配各种机型的方案。rem是现在主流...

2020-11-01 23:25:54

260浏览

0评论

纯CSS实现微信小程序仿QQ顶部提示弹框动画效果

效果思路用css的animation属性做动画代码wxml：<view class="container"> <view class='anit {{show == 1?"show":(show == 2?"hide":"")}}'>请选择商品</view> <view bind...

2020-11-01 23:25:53

157浏览

0评论

使用CSS实现无滚动条滚动的两种方法

我们都知道，撸页面的时候当我们的内容超出了我们的div，往往会出现滚动条，影响美观。尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。我们不希望出现滚动条...

2020-11-01 23:25:52

222浏览

0评论

利用CSS3动画实现圆圈由小变大向外扩散的效果实例

前言本文主要给大家分享的是关于利用CSS3动画实现圆圈由小变大向外扩散的效果实例，文中涉及到 CSS3 的动画（animation）、2D 转换（transform: scale）css3中新增了一个animation的...

2020-11-01 23:25:51

206浏览

0评论

CSS绘制三角形的实现代码(border法)

1. 实现一个简单的三角形使用CSS盒模型中的border（边框）即可实现如下所示的三角形：CSS实现简单三角形实现原理：首先来看在为元素添加border时，border的样子；假设有如下代码：<div></...

2020-11-01 23:25:49

265浏览

0评论

css实现二维码扫码框的示例代码

我们一般在打开相机的时候有个扫描框，然后静态二维码有时候为了聚焦和利于扫描也会加一个框框，下面介绍一下如何通过css 来实现一个框框实现效果:代码如下:html:<div class="i...

2020-11-01 23:25:48

177浏览

0评论

纯css实现立体摆放图片效果的实例代码

1. 元素的 width/height/padding/margin 的百分比基准设置一个元素 width/height/padding/margin 的百分比的时候，大家可知道基准是什么？举个栗子：.parent { width: 200px;...

2020-11-01 23:25:47

191浏览

0评论

CSS中overflow-y: visible;不起作用的原因分析及解决方法

场景最近要做的一个需求是移动端的h5页面，要求有一排可选择的卡片, 超出容器部分可以左右滑动，同时每张卡片左上角要有一个删除按钮。如下图：心想：so easy, 在父容器上加一个max...

2020-11-01 23:25:46

101浏览

0评论

margin-top塌陷问题的现象与解决的具体方法

什么是margin-top塌陷margin-top塌陷是在CSS的盒子模型中出现的一种现象，描述的是当父元素包裹着一个子元素的时候，当给子元素设置margin-top属性时，此时只是想让子元素的边框...

2020-11-01 23:25:44

99浏览

0评论

CSS 同级元素position:fixed和margin-top共同使用的问题

问题描述想用CSS实现顶部固定的效果：尝试margin-top加position:fixed实现，代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="w...

2020-11-01 23:25:43

159浏览

0评论

纯css实现立体摆放图片效果的示例代码

1.元素的 width/height/padding/margin 的百分比基准设置一个元素 width/height/padding/margin 的百分比的时候，大家可知道基准是什么？举个栗子：.parent { width: 200px; h...

2020-11-01 23:25:42

123浏览

0评论

浅谈css溢出机制探究

为什么需要深入学习CSS溢出机制？在实际开发的过程中，内容溢出是经常见到的。如果不深入了解这个机制，你经常会碰到这样的问题：为什么这个元素没有受到祖先元素的overflow:hidden...

2020-11-01 23:25:40

132浏览

0评论

CSS多种方式实现底部对齐的示例代码

因公司业务要求需要实现如下图中红色区域的效果：效果说明：1、红色区域数据需要倒排（即从底部开始数，数字为1、2、3、4、5），并且显示在最底部
2、当数据过多时需要显示滚动条，**并且...

2020-11-01 23:25:39

143浏览

0评论

CSS 实现滑动门的实例代码

所谓的滑动门技术，就是指盒子背景能够自动拉伸以适应不同长度的文本。即当文字增多时，背景看起来也会变长。大多数应用于导航栏之中，如微信导航栏:具体实现方法如下：1、首先每一...

2020-11-01 23:25:38

218浏览

0评论

css设置多列等高布局的方法示例

初始时，多个列内容大小不同，高度不同。现在需要设置不同的背景来显示，而且各个列的高度需要保持一致。那么这就需要利用到多列等高布局。最终需要的效果： 1. 真实等高布局 flex...

2020-11-01 23:25:36

138浏览

0评论

15行CSS代码让苹果设备崩溃,最新的iOS 12也无法幸免

只需15行CSS代码，就可以让你的iPhone崩溃Wire 的安全研究员 Sabri Haddouche 发现了一种新的攻击，只需访问包含某些 CSS 和 HTML 的网页，就会导致 iOS 重新启动以及 macOS 冻结...

2020-11-01 23:25:35

159浏览

0评论

CSS 小结笔记之变形、过渡与动画的示例

1、过渡 transition 过渡属性用法： transition :ransition-property transition-duration transition-timing-function transition-delay 可以一起指定也可以分别单独...

2020-11-01 23:25:33

130浏览

0评论

CSS 实现滚动的图片栏实例代码

在一些网站上可以经常看到有一些图片进行持续不断的滚动，这个效果可以通过css的动画效果来实现。具体效果如下主要原理是通过动画向左移动。首先给出两组一样的图片（同一行上），...

2020-11-01 23:25:31

120浏览

0评论

css中的position属性值的探究(小结)

css的position属性指定了元素的定位类型，然后通过top，botton，left，right来具体定位。在具体定位之前必须使用position属性，否则所有的具体定位属性都无法生效。position可选择的...

2020-11-01 23:25:28

100浏览

0评论

浅谈遇到的几个浏览器兼容性问题

背景解决浏览器的兼容性问题是一件很烦的事情，其中并没有太多高深的技巧，但是开发需要，也不得不去解决它，最近在开发项目中也遇到一些兼容性的问题，希望把这些问题的解决方式记录...

2020-11-01 23:25:27

128浏览

0评论

详解CSS文件的三种引入方式

CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。一、行内样式使用style属性引入CSS样式。示例：<h1 style="color:red;">style属性的应用</h1><p style="font-size...

2020-11-01 23:25:26

162浏览

0评论

使用纯 CSS 创作一个脉动 loader效果的源码

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。https://codepen.io/comehope/pen/wYvGwr 可交互视频此视频是可以交互的，你可以随...

2020-11-01 23:25:24

194浏览

0评论

css两端对齐之div+css布局实现2端对齐的4种方法总结

div+css布局实现2端对齐是我们网页排版中经常会使用到的，这篇文章将总结一下可以实现的方法：html结构实现demo里面的div通过Css进行2端对齐。<div class="box"> <div class="d...

2020-11-01 23:25:22

205浏览

0评论

css实现三栏布局的几种方法及优缺点

前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览...

2020-11-01 23:25:21

245浏览

0评论

纯css3实现宠物小鸡实例代码

最近看了很多关于css3的知识和文章，觉得css3用起来很方便，使用css3的话，在页面布局上可以省去很多不必要的代码。所以最近用css3仿写了我每天都照顾的宠物小鸡的模样，第一次写，有...

2020-11-01 23:25:19

112浏览

0评论

box-shadow和drop-shadow实现不规则投影实例代码

当我们想给一个矩形或其他能用 border-radius 生成的形状（在“自适应的椭圆”一节中可以看到一些示例）加投影时，box-shadow 的表现都堪称完美。但是，当元素添加了一些...

2020-11-01 23:25:18

100浏览

0评论

calc()实现满屏背景定宽内容

在过去的几年间，有一种网页设计手法逐渐流行起来，我将它称作背景宽度满屏，内容宽度固定。这个设计的一些典型特征如下。页面中包含多个大区块，每个区块都占据了整个视口的宽度，区...

2020-11-01 23:25:17

240浏览

0评论

使用CSS content的attr实现鼠标悬浮提示（tooltip）效果

为什么实现这种效果呢，其实这效果也是根据title的提示说明衍生出来的，只是因为原生的比较丑陋，像这种衍生出的插件后很多种，如jquery-ui的tooltip，Bootstrap的tooltips等等，有很多...

2020-11-01 23:25:16

108浏览

0评论

CSS实现footer“吸底”效果

我们经常会遇到这样的问题：如何用css来实现底部元素可“粘住底部”的效果，对于“粘住底部”，本文有两种理解：一是无论内容的多少，我们都希望使按钮，固定...

2020-11-01 23:25:14

149浏览

0评论

让 Chrome 崩溃的一行 CSS 代码

一般的 CSS 代码只会出现 UI 版式或者兼容性方面的小问题。但这里我们要分享一行有趣的 CSS，它可以直接让你的 Chrome 页面挂掉 :)复现在 Chrome 里打开一个稍复杂的页面...

2020-11-01 23:25:13

164浏览

0评论

CSS :visited伪类选择器隐秘往事回忆录

昨天想使用 a:visited 改变右侧“猜你喜欢”已访问过的文字颜色，发现改来改去效果都一般，想到还有其他几个CSS可以设置，与颜色相关的，结果，太久没使用这个伪类选择器，具...

2020-11-01 23:25:12

115浏览

0评论

基于 CSS 动画的 SVG 按钮实例代码

具体代码如下所示：<a href="#"> <svg> <rect></rect> </svg>Button</a>body { margin: 0; padding: 0; background: #000;}a { position: absolute...

2020-11-01 23:25:10

184浏览

0评论

CSS中filter属性的使用详解

filter 属性定义了元素的可视效果blur 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊。如果没有设定值，则...

2020-11-01 23:25:09

232浏览

0评论

CSS中clip-path属性的使用详解

clip-path的使用polygon 值为多个坐标点组成，坐标第一个值是x方向，第二个值是y方向。左上角为原点，右下角是(100%,100%)的点。</p>body { background-color: #000;}.fa...

2020-11-01 23:25:07

182浏览

0评论

css实现左侧固定右侧自适应的布局方式

一.浮动布局1.先让固定宽度的div浮动！使其脱离文档流。
2.margin-left的值等于固定div的宽度相等。 .aside{ float: left; width: 200px; backgroun...

2020-11-01 23:25:06

293浏览

0评论

css 两边固定中间自适应布局的实现

解析四种常用方法以及原理：浮动、浮动内嵌 div、定位、flex。浮动<style type="text/css"> .wrap {background: #eee; padding: 20px; } p {margin: 0; } .left {wi...

2020-11-01 23:25:05

206浏览

0评论

了解CSS3的all属性的使用

一、兼容性如下图：兼容性还行，除了IE不支持，其他浏览器基本上都绿油油，目前自娱自乐，内网项目什么的都是可以用用的。二、all是干嘛用的all属性实际上是所有CSS属性的缩写，表示，所...

2020-11-01 23:25:03

166浏览

0评论

CSS实现元素居中原理解析

在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了。但就是这样一个从理论上来看似乎实现起来极其简单的，在实践中，它往往难住了很多人。让元素水平居中相对比较简单：如...

2020-11-01 23:25:02

185浏览

0评论

值得收藏的CSS命名规范(规则)常用的CSS命名规则

CSS命名规范(规则)常用的CSS命名规则头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体佈局宽度：wrapper
左右中：left righ...

2020-11-01 23:25:00

110浏览

0评论

css flex几种多列布局

基本的等分三列布局.container{ display: flex; width: 500px; height: 200px; } .left{ flex:1; background: red; } .mi...

2020-11-01 23:24:59

228浏览

0评论

css实现“加号”效果的实例代码

实现下图的加号效果：若想实现这个效果，只需一个div元素即可搞定。需要用到css的为了before和after，以及border特性。先设置一个div便签 <div class="add"></div>再设置一个边...

2020-11-01 23:24:58

185浏览

0评论

CSS设置背景模糊的实现方法

在做一些页面的时候，为了让页面更好看，我们常常需要设置一些背景图片，但是，当背景图片太过花哨的时候，又会影响我们的主体内容，所以我们就需要用到 filter 属性来设置他的模糊值。...

2020-11-01 23:24:57

159浏览

0评论

css实现中间文字两边横线效果

1. vertical-align属性实现效果：vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。...

2020-11-01 23:24:55

232浏览

0评论

使用css实现物流进度的样式的实例代码

效果：css样式：<style type="text/css"> ul li { list-style: none; } .package-status { padding: 18px 0 0 0 }...

2020-11-01 23:24:54

176浏览

0评论

详解flex多列布局遇到的问题和解决方案

flex布局无疑是简单、易用的，他让我我们的布局更加简单和快速，但是在使用flex进行多列布局的时候，我相信很多人会遇到下面的情况：这种情况是因为我们使用了justify-content: spa...

2020-11-01 23:24:53

165浏览

0评论

Flexbox 布局的最简单表单的实现

弹性布局（Flexbox）逐渐流行，越来越多人使用，因为它写 CSS 布局真是太方便了。三年前，我写过 Flexbox 的介绍（上，下），但是有些地方写得不清楚。今天，我看到一篇教程，才意识到一个最简...

2020-11-01 23:24:51

86浏览

0评论

纯css实现Material Design中的水滴动画按钮

前言大家平时应该经常见到这种特效，很炫酷不是吗这是谷歌Material Design中最常见的特效了，市面上也有很多现成的js库，用来模拟这一特效。但是往往要引入一大堆js和css，其实在已...

2020-11-01 23:24:50

118浏览

0评论

css中grid属性的使用详解

grid布局加在父元素上的属性grid-template-columns/grid-template-rows 定义元素的行或列的宽高如果父元素被等分成了9等分，则，不管有多少个子元素，都显示9等分 grid...

2020-11-01 23:24:48

223浏览

0评论

css3实现椭圆轨迹旋转的示例代码

最近需要实现如下效果最开始用css3D旋转写，只能实现如下效果没办法把所有的圆转向正面，不知道是我的操作不对，还是3d旋转无法实现，有知道的大佬还请赐教啊没法用3d实现只能转向2...

2020-11-01 23:24:46

160浏览

0评论

CSS3 创建网页动画实现弹跳球动效果

基础准备对于这个实现，我们需要一个简单的 div ，并且样式类名为 ball ：HTML 代码:<div class="ball"></div>我们将使用 Flexbox 布局，把球放到页面中间，尺寸为 100px * 100px，背景...

2020-11-01 23:24:44

热门文章