0
点赞
收藏
分享

微信扫一扫

css这么强大吗?

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

思路如下:

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

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

<div class="box">
<div class="box-img">
<img src="img/1.png" width="300px" height="300px"/>
</div>
<div class="box-bottom">
<a href="#">我是c3图片放大,我是c3图片放大</a>
<div class="box-button">点我放大</div>
</div>
</div>

然后把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;

}


举报

相关推荐

0 条评论