css这么强大吗？

css这么强大吗？

老早之前就想写这篇文章了，每天学会一个小技巧，短时间内不会有什么惊艳的地方，我相信，只要坚持，一定会有一个质的飞越。今天我们说的是利用c3里面的特效，将图片规律放大，规律缩小，实现这个效果之前，我们应该整理一下思路。

思路如下：

我们常常在网页上看到那种图文混排的块元素，商品类居多，上面是图片，下面是介绍，最下面是价格和购买。

我们先大致把这个块元素打好（注意里面的嵌套关系）

我是c3图片放大，我是c3图片放大

点我放大

然后把body变黑，box这个块在浏览器水平居中。

body{ background-color: black; overflow: hidden; } .box{ width: 300px; height: 600px; background-color: cornflowerblue; margin: 100px auto; }

给上面图片那个块和下面得块一个宽高

.box .box-img{ width: 300px; height: 300px; float: left; overflow: hidden; } .box .box-bottom{ width: 300px; height: 300px; float: left; }

这样就修饰一下文字，还有按钮，再给img添加一个动画就可以了。

.box .box-img img{ transition: all 3s; } .box .box-img img:hover{ transform: scale(1.2); transition: all 3s; }

上面那个也就是当鼠标悬停到这张图片的时候，图片发生变化，那个扩大，但是有一点，就是图片扩大会超出那个块，所以我们用overflow：hidden；也就是当图片超出块元素的部分被隐藏。

在CSS3中，我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放，指的是“缩小”和“放大”的意思。

然后修饰文字用了一个文字阴影，那个按钮用了一个圆角和盒子阴影。

text-shadow

box-shadow

border-radius

圆角边框我给大家总结过原理：

.box .box-bottom a{ display: block; width: 260px; height: 100px; padding: 20px; color: aliceblue; text-decoration: none; text-shadow: 5px 5px 5px #5500ff; } .box .box-bottom .box-button{ width: 100px; height: 100px; margin: 0 auto; background-color: coral; text-align: center; line-height: 100px; border-radius: 50px; font-size: 20px; color: #2cff29; box-shadow: 3px 3px 3px #2CFF29; text-shadow: 5px 5px 5px #5500ff; }

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。