css3
文章平均质量分 84
七夕小娜
技术 素养 人生
展开
-
CSS3实现翻转(Flip)效果
动画效果 效果分析 当鼠标滑过包含块时,元素整体翻转180度,以实现“正”“反”面的切换。 HTML分析 分析:.container,.flip为了实现动画效果做准备。.front,.back各包裹一张图片。 实现该效果的HTML如下: div class="container"> div class="flip"> di原创 2016-03-21 17:26:27 · 9618 阅读 · 2 评论 -
CSS3阴影 box-shadow的使用和技巧总结
text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及,这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor} 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径原创 2016-04-20 18:14:52 · 1291 阅读 · 0 评论 -
CSS3的calc()使用
calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分。因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性能实现自适应的布局,首先让我想到的是box-sizing,但跟我说还可以计算,这让我不得不想起calc()。因为早先在官网和一些blog上看到相关的介绍,但一直没有深入,也没有自己去测试过。今天花了一转载 2016-06-16 14:43:38 · 489 阅读 · 0 评论