.lunbo{ height: 640px; width: 100%; background-position: -280px; margin-top: 103px; -webkit-animation: lunbo 5s infinite alternate; } @-webkit-keyfram... ...
分类:
Web程序 时间:
2019-05-19 23:12:52
阅读次数:
213
和2D一样也是transform 即变形 1)rotateX rotateY rotateZ(也可以用transform-origin来设置旋转中心点) 2)透视(perspective) 给父亲加透视,透视就是模拟眼睛到物体的距离,近大远小,即数值越小,3D越明显 理解透视就是把眼睛放在离物体多远 ...
分类:
Web程序 时间:
2019-05-19 10:24:58
阅读次数:
145
1. 宽高百分比,不要固定死; 2. 弹性盒flex css3; 3. 单位(em、rem)px; 4. 媒体查询 利器 @media switch 960 1200; 5. gtid布局 网格布局; 6. view port 手机布局利器; 7. 框架布局 bootstrap、amazeUI、pu ...
分类:
其他好文 时间:
2019-05-18 15:47:48
阅读次数:
105
弹性盒子容器的属性与应用 display:flex/inline-flex flex-direction flex-wrap justify-content align-items align-content flex-flow 弹性盒子子项的属性与应用 order align-self flex ...
分类:
Web程序 时间:
2019-05-15 12:40:51
阅读次数:
200
前端之HTML5,CSS3(七) 背景缩放 CSS3中背景用于手机端需要分系统:ios系统和android系统。对于iso系统,需要背景是2倍宽高像素的背景图,然后背景缩放,如此在ios系统中打开才会不导致图片失真。简单来说,就是ios系统自带背景放大功能,当设置背景为原图大小时,ios系统打开会对 ...
分类:
Web程序 时间:
2019-05-15 00:38:42
阅读次数:
172
设定弹性盒子模型(display:flex)让子元素反向排列 示例说明:display: flex; 声明了盒子为flex弹性盒子布局,flex: 1; 声明了子元素占1份, flex-direction: row-reverse; /*这个属性就是在水平方向上反转*/<!DOCTYPE html> ...
分类:
Web程序 时间:
2019-05-14 09:30:17
阅读次数:
1449
一、CSS3弹性盒子 弹性盒子是CSS3的一种新布局模式。 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分 ...
分类:
Web程序 时间:
2019-05-13 19:05:55
阅读次数:
138
盒模型:标准盒模型、混杂盒模型 什么时候会触发混杂模式? 为什么要混杂模式渲染规则盒模型? box-sizing:content-box、border-box 关于盒模型的一些其他样式和属性值 盒模型:标准盒模型、混杂盒模型 一、盒模型:标准渲染规则盒模型、混杂模式渲染规则盒模型 标准渲染模式盒模型 ...
分类:
Web程序 时间:
2019-05-11 09:29:47
阅读次数:
193
目录 1. border radius 2. box shadow 3. text shadow 4. gradients linear gradient radial gradient 5. transition 6. animation 7. multi columns 8. flex box ...
分类:
Web程序 时间:
2019-05-10 16:19:31
阅读次数:
215
当我们需要给页面加icon的时候,肯定会遇到给icon设置颜色的需求,很多人可能会选择抠出icon,对icon设置颜色,然后将icon周边透明。 如果我们逆转思路,将icon形状区域透明,通过改变icon的背景颜色达到改变icon颜色的效果,四周设置为纯色,这两种思路实现的效果是一致的。 第二种镂空 ...
分类:
其他好文 时间:
2019-05-09 12:09:48
阅读次数:
120