CSS作为前端开发中经常使用的一种技术,有很多强大的功能和特性。今天我们来学习如何使用CSS上机制作出花样链接卡。.card { width: 200px; height: 200px; border
CSS作为前端开发中经常使用的一种技术,有很多强大的功能和特性。今天我们来学习如何使用CSS上机制作出花样链接卡。
.card { width: 200px; height: 200px; border: 1px solid #ccc; border-radius: 10px; overflow: hidden; position: relative; } .card .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(https://picsum.photos/200) center center no-repeat; background-size: cover; transition: transform 0.5s; transform: scale(1); } .card:hover .image { transform: scale(1.2); } .card .content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 15px; box-sizing: border-box; background: rgba(0, 0, 0, 0.7); color: #fff; opacity: 0.7; transition: opacity 0.5s; } .card:hover .content { opacity: 1; }
如上所示,我们首先创建一个.card类用来表示链接卡片,设置卡片的宽度、高度、边框、边框圆角和溢出隐藏。其中用到了CSS3的transition属性和transform属性,通过鼠标悬停来平滑过渡图片的缩放和模糊。
接下来为卡片添加图片和文字信息。我们使用.position: absolute;设置元素相对于父级元素的绝对定位。并使用.box-sizing: border-box;盒模型来计算高宽,使内边距和边框不影响元素的实际尺寸。我们还可以使用rgba()函数来设置颜色和透明度。
最后,在卡片上设置:hover属性来触发鼠标悬停事件。我们将图片的缩放和文字信息的透明度设置为0.5s,通过这些设置,用户可以得到自然和优美的用户体验。
粉丝
0
关注
0
收藏
0