-
CSS实现3D书本效果的示例代码
所属栏目：[系统] 日期：2020-06-16 热度：137
话不多说，先来看一下效果图 源代码如下 !DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8meta name=viewport content=width=device-width, initial-scale=1.0titleDocument/title/headstyle*{margin: 0;padding: 0;}body{display: flex;align-items: cen[详细]
-
修复一个因为scrollbar占据空间导致的bug问题
所属栏目：[系统] 日期：2020-06-16 热度：96
这一个因为滚动条占据空间引起的bug, 查了一下资料， 最后也解决了，顺便研究一下这个属性， 做一下总结，分享给大家看看。 正文 昨天， 测试提了个问题， 现象是一个输入框的聚焦提示偏了， 让我修一下, 如下图： 起初认为是红框提示位置不对， 就去找代[详细]
-
详解CSS3实现响应式手风琴效果
所属栏目：[系统] 日期：2020-06-16 热度：133
最近看了国外大佬用CSS3实现手风琴效果的视频,所以自己学习后写了一下,以博客的形式记录下来,方便自己日后复习,代码结构如下(字体用的是Genericons ): 最终效果如下: 全屏时: 屏幕宽度小于960px时: 下面来看一下页面的基本结构(index.html): !DOCTYPE html[详细]
-
css实现朋友圈照片排列布局的代码
所属栏目：[系统] 日期：2020-06-16 热度：147
首先可以打开朋友圈观察不同图片数量的几种布局,也可参考下图示例； 可以发现除1张图片，4张图片特殊外，其他数量图片均使用一行三列的方式排列； 假设有如下HTML代码，这里imgList是一个图片地址数组； ulli v-for=(item, index) in imgList :key=index i[详细]
-
CSS 动画实现动态气泡背景的方法
所属栏目：[系统] 日期：2020-05-15 热度：154
今天是节后上班第一天，早上醒来一睁眼，嗯？啊...？什么...？这是哪？我是谁？上什么班？ 然鹅，还是被昨晚特意设置的八个闹钟:alarm_clock:吵醒，冬天早上起床的难度...想必各位都心有体会 :sob:，抱着一万个不情愿起床早早地来到了办公室，还是熟悉的环[详细]
-
CSS3 calc()会计算属性详解
所属栏目：[系统] 日期：2020-05-15 热度：76
正如其名，calc是css3中新增的计算属性，让很多属性增加了一个表达式的说法； calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size、width和height等属性设置动态值。 怎么使用 cal[详细]
-
CSS实现网页背景图片自适应全屏的方法
所属栏目：[系统] 日期：2020-05-15 热度：120
网页背景自适应全屏.PNG 一张清晰漂亮的背景图片能给网页加分不少，设计师也经常会给页面的背景使用大图，我们既不想图片因为不同分辨率图片变形，也不希望当在大屏的情况下，背景有一块露白，简而言之，就是实现能自适应屏幕大小又不会变形的背景大图，而[详细]
-
CSS :befor :after 伪元素的巧妙用法
所属栏目：[系统] 日期：2020-05-15 热度：151
CSS中的:befor、:after都会创建一个伪元素，其中:befor创建的伪元素是所选元素的第一个子元素，:after创建的伪元素是所选元素的最后一个子元素。 :befor、:after创建的伪元素默认样式为内联样式。 1.2 语法 /* CSS3 */selector::before/* CSS2 */selector:[详细]
-
stricky footer的三种解决方案详解
所属栏目：[系统] 日期：2020-05-15 热度：147
stricky footer设计是最古老和最常见的效果之一，我们都曾经历过类似的情景： 如果页面内容不够长的时候，页脚块粘贴在底部；如果内容足够长时，页脚块会被内容向下推送。 这些天做vue+express实战的练习，跟着黄轶老师倒是认识了stricky footer，就认真的[详细]
-
CSS选择器的新用法(推荐)
所属栏目：[系统] 日期：2020-05-15 热度：93
现在，预处理器(如sass)似乎已经成为开发CSS的标配，正如几年前jQuery是开发JS的标配一样。JS的querySelector借鉴了jQuery的选择器思想，CSS选择器也借鉴了预处理器的变量定义、选择器嵌套、代码块重用等常用功能。本文将详细介绍CSS选择器的新用法 变量[详细]
-
css3动画过渡实现鼠标跟随导航效果
所属栏目：[系统] 日期：2020-05-15 热度：116
本篇文章主要介绍了css3动画过渡实现鼠标跟随导航效果，分享给大家，具体如下： 鼠标跟随导航效果 效果知识点：html/css布局思维, div+css讲解，css3动画，盒子模型, 浮动与定位，鼠标事件。 html代码： div class=wrapulli style=background-position:0px[详细]
-
10分钟理解CSS BFC原理及其应用
所属栏目：[系统] 日期：2020-05-15 热度：157
在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案: 普通流 (normal flow) 在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被[详细]
-
css3实现波纹特效、H5实现动态波浪效果
所属栏目：[系统] 日期：2020-05-15 热度：126
css3实现动态波纹特效，由于css3里面有过渡和动画效果，现在利用css3实现动态波浪效果就很简单了，直接使用transform来实现就ok， 使得translateX 产生偏移就可以不断实现循环动态效果，这样就比传统的flash来实现更为简单。而且对页面也比较友好的。 比如[详细]
-
CSS实现多行多列的布局的实例代码
所属栏目：[系统] 日期：2020-05-15 热度：194
副标题#e# HTML: div class=box1box1:实现两列多行布局ulli111/lili222/lili333/li/ul/div CSS: .box1 { width: 500px; background: #EEEEEE;}.box1 ul { clear: both; overflow: hidden;}.box1 ul li { width: 48%; height: 100px; margin-bottom: 10px; b[详细]
-
CSS3 clip-path 用法介绍详解
所属栏目：[系统] 日期：2020-05-14 热度：111
刷新 QQ 空间动态时，发现一则广告，随着用户上下滑动动态列表，就会自动切换广告图片，这样的效果对移动端本就不大的屏幕来说，无疑是很精妙的考虑，这样的效果是怎么实现的呢？ 接下来就说说这个效果的具体实现思路： 将两张图片通过定位，相对于图片容[详细]
-
css常用元素水平垂直居中方案
所属栏目：[系统] 日期：2020-05-14 热度：81
flex实现水平垂直居中 适用场景：父子宽高都可未知(比较推荐这种方式，简单，而且目前兼容性也不错。) html headstyle.parent {width: 100%;height: 100px;background: cyan;display: flex;justify-content: center;align-items: center;}.son {width: 20%[详细]
-
深入理解CSS中的line-height的使用
所属栏目：[系统] 日期：2020-05-14 热度：74
什么是line-height(行高)？ line-height 是指两行文字基线之间的距离。 什么是基线？ 基线、底线、顶线、中线 注意： 基线（base line）并不是汉字文字的下端沿，而是英文字母x的下端沿。 不同字体的基线不尽相同。 行距、行高 line-height 与行内框盒子模[详细]
-
CSS实现镂空遮罩效果
所属栏目：[系统] 日期：2020-05-14 热度：145
前一阵子面试被问题到这个问题，突然懵逼了，脑子一片空白，以前知道这种效果，比如什么值得买的改版引导页面： 当时再紧张也应该打出一种实现方法，就是什么值得买这种使用图片实现 它首先加了一个半透明的黑色蒙层（ background-color: rgba(0,0,0,.8)[详细]
-
详解flex布局的元素如何分配容器的剩余空间
所属栏目：[系统] 日期：2020-05-14 热度：110
副标题#e# 自从开始开学习 CSS 布局，想要比较灵活的把父元素的空间分配给各个子元一直是各个前端程序员的梦想。 在 flex 之前，如果不是专门去搜索相关的解决方案，一般人几乎想不出非常灵活的三（多）栏等高布局方案，而即使看了解决方案，很多人也会大呼[详细]
-
CSS3 translate导致字体模糊的实例代码
所属栏目：[系统] 日期：2020-05-14 热度：95
今日客户反馈，发现 使用了 translate会导致字体模糊。 .media-body-box{@media all and (min-width: 992px){position: absolute;width: 100%;top:50%;transform: translateY(-50%);right: 0;padding: 30px;}} 为了垂直居中，使用了 transform: translateY[详细]
-
CSS中@support实现渐进式网页设计实例代码
所属栏目：[系统] 日期：2020-05-14 热度：74
特性查询赋予了我们使用CSS检测浏览器是否支持某个css特性的能力。我们可以使用该功能在浏览器支持最新的CSS特性时，使用新的语法来编写我们的样式，同时对于不支持的浏览器进行优雅降级。 CSS的设计本身就是支持优雅降级的。对于浏览器不支持的CSS语法，[详细]
-
css transition animation的使用（内含贝赛尔曲线详解）
所属栏目：[系统] 日期：2020-05-14 热度：102
副标题#e# transition也叫过渡动画，主要是用于让一个元素从一种状态过渡到另一种状态效果，常用于主动触发的效果。例如移动端的页面切换（很常用）、button点击效果（也很常见）。 animation才是css3正宗的动画，主要是用于实现某种持续的动画效果（当然简[详细]
-
CSS背景图片固定宽高比自适应调整的实现方法
所属栏目：[系统] 日期：2020-05-14 热度：88
img标签可以使图片在保持宽高比不变的情况下自动调整。我们讨论的是div的背景图片实现固定宽高比自适应调整的方法。这里的图片不是 img标签一样通过src引入，而是通过css的background-image: url('路径')实现。 实现背景图片固定宽高比缩放我们采用padding[详细]
-
CSS3实现类似翻书效果的过渡动画的示例代码
所属栏目：[系统] 日期：2020-05-14 热度：101
副标题#e# 在VUE实战项目的中有一个加载推荐书籍的过渡动画，在项目中是使用JS实现。 当时看视频大概一个小时作用，拆分动画逻辑，写代码更是耗时。后来自己想着能不能用CSS动画直接写出来，折腾了半天，终于算是实现了。 可以查看加载动画地址 /*首先是DOM[详细]
-
针对class、id所做的CSS HACK
所属栏目：[系统] 日期：2020-05-14 热度：151
这是一篇关于CSS HACK的文章，这篇文章中提到的CSS HACK是针对class、id中属性的HACK，排列的顺序都具有要求。今天要和大家说的是针对class、id所做的CSS HACK。 .test{/*FF*/ height:20px; background-color:orange; } * html .test{/*IE7*/ height:20px;[详细]
