CSS信封效果的展现

原创 yaohui 随笔 CSS3 156阅读 15 天前 举报

信封效果的展现

在以前的网站上看到信封类似的效果 今天就是来看看这个效果的实现.
其实很简单 掌握了linear-gradient就能实现.

第一步: 基础的HTML构建出来

第二步: 定义letter-box类的样式

第三步:该效果实现的核心部分

第四步: 定义letter-container类样式


现在效果不是我们想要的结果 只要对letter-container进行水平垂直居中就可以了
水平垂直居中的解决方案很多种 我这里用比较简单的弹性flex解决的 也可以使用其他方案

效果图:

其实信封的基本效果就好了,我还添加了一些点缀的东西,在此奉献全部代码.

后续更新 信封效果的另外的实现方式,代码附上:

比之前要减少了一个DOM元素.

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复