css3

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