这篇博客详细介绍了如何利用CSS实现产品展示的悬停效果。通过@import引入谷歌字体库，设置body和产品元素的样式，以及利用过渡、动画和伪类选择器，创建了当鼠标悬停在产品上时，出现的透明渐变背景和旋转条纹效果。同时，还定义了产品信息和价格的显示方式。
CSS
语言：
CSSSCSS
确定
@import url(https://fonts.googleapis.com/css?family=Ropa+Sans);
body {
padding: 20px;
font-family: 'Ropa Sans', sans-serif;
}
.product {
width: 376px;
padding: 15px;
position: relative;
float: left;
margin: 0 20px 0 0;
}
.product > img {
display: block;
position: relative;
}
.product:hover .product-hover,
.product:active .product-hover {
opacity: 1;
}
.product-hover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
transition: opacity 0.3s ease;
background-size: 30px 30px;
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent);
animation: barberpole 0.5s linear infinite;
}
@keyframes barberpole {
from {
background-position: 0 0;
}
to {
background-position: 60px 30px;
}
}
.product-info {
position: absolute;
bottom: 30px;
right: 30px;
background: white;
width: 150px;
padding: 10px 10px 50px 10px;
}
.subhead {
color: #f00;
text-transform: uppercase;
font-weight: bold;
}
.product-name {
color: #990033;
text-transform: uppercase;
font-weight: bold;
margin: 0;
letter-spacing: -1px;
}
.price {
position: absolute;
bottom: 10px;
right: 10px;
}
.amount {
color: red;
font-size: 150%;
}
.amount > span {
font-size: 75%;
}
h1 {
font-size: 72px;
margin: 2px 0 0 0;
}
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
