css3

dispaly的Grid布局与Flex布局
日志cdispaly的Grid布局与Flex布局  Gird 布局与 Flex 布局有一定的相似性,都是对容器的内部项目进行划分.  Flex 布局是轴线布局,只能指定项目针对轴线的位置,可以看作成一维布 ...
web主题适配方案指北
日志前置知识 在这里了解实现网页主题切换的相关知识. CSS 变量 要实现主题切换需要了解 css 自定义属性.当然,本文还提供了其他实现方式,为了不给您接下来的阅读带来阻碍,先了解它. 变量的声明 声明 ...
前端也要懂物理 —— 惯性滚动篇
日志作者:凹凸曼-吖伟 我们在平时编程开发时,除了需要关注技术实现.算法.代码效率等因素之外,更要把所学到的学科知识(如物理学.理论数学等等)灵活应用,毕竟理论和实践相辅相成.密不可分,这无论是对于我们的 ...
图片之间没加空格有间隙的解决方案
日志//图片之间会有一些空白距离,但是之间没有空格 解决方案: //父元素加: font-size:0;
1
h5 下ios适配底部小黑条,简单解决方案,只需一步
日志在页面加入一行css代码即可 @supports (bottom: env(safe-area-inset-bottom)) { body, .footer{ box-sizing: content- ...
移动端,h5页面1px 1像素边框过粗解决方案
日志//h5有个小bug 1像素边框过粗,其实有个解决方案,就是利用伪元素:after,结合css3中的scale在y轴方向缩放0.5就行了 //父元素 //删除border-bottom,添加posit ...
纯CSS样式写刘海屏效果
日志1. 效果:  2. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
css3 字体渐变
日志先看个效果 https://www.bienvillecapital.com/ 然后人家样式这样写的 font-family: Overpass,Helvetica,sans-serif; font- ...
display:box和display:flex填坑之路
日志背景分析:最近做移动端项目时,遇到一个常见的需求: 可以滑动的导航,如下图 虽然是很常见的一个布局,但在移动端没有做过,想当然的写下以下的样式,简单描述下: 父元素 width:100%: overf ...
@ font-face 引入本地字体文件
日志@font-face { font-family: DeliciousRoman; src: url('…/Delicious-Roman.otf'); font-stretch: condensed ...
CSS3伪类使用方法实例
日志 有时候在网页设计中会涉及到很多看上去很繁琐的设计图,这时候都会很让人头疼,那么这时候伪类就可以来帮助你解决问题了. 下面有一段实例大家可以参考一下: <!DOCTYPE html> &l ...
css3变形
日志CSS3变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点 ...
css3正方体效果
日志<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
css3烟花效果
日志<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
css3的一些属性
日志以前还没有注意过css的一些属性,近期发现有一些样式很好用,现在整理一遍. CSS3 动画属性 @keyframes : 规定动画 可以通过keyframes 改变一个块的样式当然这是要配合anima ...
css3-pointer-events_demo
日志该demo定义了一个菜单,点击了一次之后就不能再点击,另外其中也用到了flex布局,可直接将代码复制运行即可 <html> <head> <meta name=" ...
css3-pointer-events
日志<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
关于display的box和flex布局
日志关于二者的区别于联系,在知乎上看到有人这么回答的 flex 2012年的语法,也将是以后标准的语法,大部分浏览器已经实现了无前缀版本.box是2009年的语法,已经过时,是需要加上对应前缀的. 另外 ...
哎,老了之display-box
日志哎,不想吐槽自己了,表示已远远落后,从今天起开始恶补吧,来一个实例 <html> <head> <meta name="generator" cont ...
纯CSS3打造圆形菜单
日志原理是使用相对定位和绝对定位确定圆形菜单位置. 使用伪类选择器E:hover确定悬浮时候的效果,动画效果用CSS3的transition属性. 大概代码如下. html: <div> &l ...