当前第2页 返回上一页
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .card {
width : 400px ;
margin : 0px auto ;
background-color : white ;
box-shadow: 0px 5px 20px #999 ;
}
.card a {
color : #333 ;
text-decoration : none ;
}
.card:hover .card-image img {
width : 160% ;
filter:grayscale( 0 );
}
|
将 .card 设置为固定大小。
居中方式为 margin:0px auto;
为了在稍暗的背景中便于区分,将块元素设置为白色。
增加了一个小阴影产生叠加效应。
定义元素 a 标签的颜色与下划线修饰。
定义鼠标移上时放大元素并将滤镜灰度设置为“0”。
.card-image
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .card-image {
height : 250px ;
position : relative ;
overflow : hidden ;
}
.card-image img {
width : 150% ;
position : absolute ;
top : 50% ;
left : 50% ;
transform:translate( -50% , -50% );
filter:grayscale( 1 );
transition-property:filter width;
transition-duration:. 3 s;
transition-timing-function:ease;
}
|
固定块元素的大小,其中包含我们的图片,这使我们能够在满足尺寸要求的情况下,任何图片都可用于制作成卡片。
设置相对的定位方式,因为它里面包含了绝对定位的元素。
定义内容溢出元素框时裁剪并隐藏。
我们可以根据需要在固定大小的100%基础上增加图像的默认大小,但是不要添加小于400px的图像,也不要忘记遵守其宽度/高度比,以免出现空白。
为了将图像在父元素中完全显示及将 .card-image 的中心作为起点 ,我们需要同时设置定位方式为 absolute 。top 、left 为50% , 然后能过 transform:translate(-50%, -50%) 设置位移,使 .card-image
的中心点作为起点 。
定义元素为 100% 灰度。
使元素在鼠标移上时在300毫秒内慢速开始,然后变快,然后慢速结束的过渡方式放大。
.card-body
1 2 3 4 5 | .card-body {
text-align : center ;
padding : 15px 20px ;
box-sizing: border-box;
}
|
定义 .card-bady 元素的文本对齐方式为居中对齐。
设置元素的内边距。
元素 box-sizing 属性值为 border-box。
字体及其他
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .card-date {
font-family : 'Source Sans Pro' , sans-serif ;
}
.card-title, .card-excerpt {
font-family : 'Playfair Display' , serif ;
}
.card-date, .card-title {
text-align : center ;
text-transform : uppercase ;
font-weight : bold ;
}
.card-date, .card-excerpt {
color : #777 ;
}
|
推荐教程:《CSS教程》
以上就是CSS3实现卡片效果的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
css怎么让一段缩进
谈谈css中的混合模式
css如何改变文本框颜色
css如何实现波浪效果
css counter-increment属性怎么用
css中什么叫浮动
background-position属性怎么用
css hover怎么设置
值得收藏的css性能优化方法
css给图片添加水印
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » CSS3实现卡片效果