![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
iamlujingtao
学而致用才是真理
展开
-
与时俱进,css不定宽高水平垂直居中的5种方法
与时俱进,css不定宽高水平垂直居中的5种方法一、前言二、方法总结三、效果五、源码一、前言本文总结了css不定宽高水平垂直居中的5种方法,考虑到兼容性,用到css3的方法多用手机端,手机端ie可以不用考虑。各方法原理我在代码里都有注释。二、方法总结分别是:方法一:table-cell + inline-block兼容性:ie8+, chrome全支持方法二:css3 pos...原创 2019-10-17 17:48:42 · 1251 阅读 · 0 评论 -
js+animate.css实现滚动页面,元素动态出现(附演示地址和源码)
js+animate.css实现滚动页面,元素动态出现(附演示地址和源码)一、背景二、效果三、原理四、在线演示和源码一、背景之前做项目用到滚动页面,元素动态出现的效果,当时研究一番决定用Animate.css + fullpage.js + 一堆js控制,这段时间也有项目也有这种需求,不过不是整页滚动,而是不确定高度滚动,所有用不到fullpage,于是只能手写js控制。二、效果三、原理...原创 2019-10-17 10:54:38 · 6508 阅读 · 1 评论 -
响应式图片实践研究(html5 picture/srcset 等多种方法对比)
响应式图片实践研究(html5 picture/srcset 等多种方法对比)一、需求二、html5新属性 srcset&sizes三、html5新标签四、css3媒体查询五、用js判断处理六、后端代码判断处理、第三方云服务一、需求现在有一需求对于一个宽屏的banner焦点图,要求根据浏览器尺寸读取不同尺寸的图片,设浏览器宽度为w,w<767时读取640px768<=...原创 2019-10-16 16:53:48 · 586 阅读 · 1 评论 -
css3布局方式一:box布局
一、注意注意:box布局是2009提出的,flex布局2012年提出的,二者原理基本一致,flex可以说是box的新语法,但是不能相互替代,而且很关键的一点是二者兼容性不同,box兼容性更好,特别是对于移动端,所以还是有必要学习box布局的。二、开始随着移动端的崛起,现在是多端多分辨率的时代,前端工程师必须考虑页面的自适应。自适应通常大家的反应都是用百分比布局,但局限还是比较多的,最常见的...原创 2019-10-15 21:13:49 · 1621 阅读 · 0 评论 -
跟我做css3的ppt(Animation介绍&Animate.css应用)
跟我做css3的ppt(Animation介绍&Animate.css应用)一、前言二、Animation 介绍和demo三、Animate.css 介绍四、使用Animate.css做一个ppt一、前言上一篇文章《翻滚吧少年!(自定义css3动画过渡中的贝塞尔曲线)》我简单介绍了css3中transition的使用,和自定义过渡中的贝塞尔曲线,效果已经很好了,但有一个比较明显的缺点就...原创 2019-10-15 01:09:02 · 1115 阅读 · 0 评论 -
翻滚吧少年!(自定义css3动画过渡中的贝塞尔曲线)
翻滚吧少年!(自定义css3动画过渡中的贝塞尔曲线)一、翻滚吧少年二、背景介绍二、cubic-bezier 贝塞尔曲线介绍四、在线demo和源码一、翻滚吧少年我们先看看本文示例效果:–>在线演示地址以上效果没有应用js,只用到css3的贝塞尔曲线来实现各种缓动效果,是不是心动呢?那么应该怎么使用呢?二、背景介绍随着高级浏览器的普及,css3和html5也开始越来越流行了。现在很...原创 2019-10-14 23:37:03 · 721 阅读 · 0 评论 -
与时俱进,三栏弹性布局的5种方法(绝对定位、圣杯、双飞翼、flex、grid)
与时俱进,三栏弹性布局的5种方法(绝对定位、圣杯、双飞翼、flex、grid)一、前言二、需求三、具体代码3.1 绝对定位布局3.2 圣杯布局3.3 双飞翼布局3.4 flex布局3.5 grid布局四、总结一、前言本文以实用角度出发,直接列出三栏弹性布局的5种方法:绝对定位、圣杯、双飞翼、flex、grid 的具体代码,并简要分析其原理和优缺点。二、需求需求:用css实现三栏布局,htm...原创 2019-10-14 22:26:22 · 671 阅读 · 0 评论