有一些前沿的电商站点已经開始使用3D模型来展示商品并支持在线定制,而当中图书的展示是最为简单的一种,无需复杂的建模过程,使用图片和CSS3的一些变换就可以实现更好的展示效果,简洁而有用。书本的3D模型是全部商品中最为简单的。由于其本质上就是一个立方体(cube)。仅仅是带有封面/封底和左側封条。所以 ...
分类:
Web程序 时间:
2018-01-14 13:48:21
阅读次数:
220
水平垂直居中的布局解决方案有很多,本文仅仅列出三种。 在浏览器里的显示效果: 第一种:利用flex来布局,也是最常用的方式: 第二种:绝对定位加CSS3的2D转换的方式。 第三种:绝对定位并使四个方向上均为0加margin:auto;具体代码如下: 以上三种方案的HTML部分: ...
分类:
Web程序 时间:
2018-01-13 12:56:29
阅读次数:
222
CSS3transform属性详解 transform字面上就是变形,改变的意思。 在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。 2D Transform 方法 matrix() 和2D变换方法合并成 ...
分类:
Web程序 时间:
2018-01-11 01:11:08
阅读次数:
2373
在介绍有关transform相关的知识之前,先来讲一下transform-origin的用法以及关于<angle>角度的几种取值单位。另外,在使用时,为了兼容各个浏览器,可加上浏览器的私有前缀[-moz- -webkit -ms-]。 transform-origin 设置对象变换的原点,通常和ro ...
分类:
Web程序 时间:
2018-01-02 19:52:44
阅读次数:
16965
transition、animation和transform是CSS3中三个制作动画的重要属性,本篇文章主要对其进行学习了解。 一、transition transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画 ...
分类:
Web程序 时间:
2018-01-02 11:29:45
阅读次数:
499
头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main ...
分类:
Web程序 时间:
2018-01-01 16:53:41
阅读次数:
220
Flexbox,是一种CSS3的布局模式,也叫做弹性盒子模型,用来为盒装模型提供最大的灵活性。 ...
分类:
其他好文 时间:
2017-12-27 11:59:12
阅读次数:
111
怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY()属性,给需要动画的元素添加上一个动画class。 先上效果图: 1.蒙层的结构: 注意:三元运算符里的slideup和slidedown一定要加上引号 2.蒙层的其 ...
分类:
微信 时间:
2017-12-26 14:36:19
阅读次数:
978
box-sizing是CSS3的box属性之一。一说到CSS的盒模型(Box model)我想很多人都会比较烦,特别是对于新手,然而这个Box model又是我们CSS运用中比较重要的一个属性。那么CSS3的Box-sizing跟盒模型有什么关系呢?第一句话就说了,Box-sizing是CSS3的B ...
分类:
其他好文 时间:
2017-12-25 00:44:50
阅读次数:
200
ext-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及,这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor} ...
分类:
Web程序 时间:
2017-12-22 21:47:29
阅读次数:
272