当前位置: 首页 > Web前端 > CSS

使用Css制作漂亮的卡片UI

时间:2023-03-30 14:47:44 CSS

本教程将告诉你如何使用Html和Css实现卡片界面。本教程将重点介绍如何使用CSS滤镜属性来处理图像,从而为其添加一些过渡效果。第1步:识别HTML代码结构在创建HTML代码之前,您应该首先可视化它的结构。当你有了一个好的模型,你应该第一时间把你想象的页面结构或者你的CSS模块列在纸上。一个设计良好、结构合理的HTML页面将使您的后续工作变得异常轻松。电影css电影卡片UI--墨丶水瓶

LoremIpsum

LoremIpsum很重要,后面会讲由adipisicing精英。但有些乐趣可以愉快地完成,但让每个人都对选择的责任感到高兴!Animimodiharumenimquiaveniamconsecteturundeauteminventore。

第二步:定义Css规则一旦Html结构建立好了,我们就要开始创建它写的Css样式了。下面我会分别贴出每个部分的css代码。.card.card{宽度:400px;保证金:0px自动;背景颜色:白色;box-shadow:0px5px20px#999;}.carda{color:#333;text-decoration:none;}.card:hover.card-imageimg{width:160%;filter:grayscale(0);}将.card设置为固定大小。居中方式为margin:0pxauto;为了在较暗的背景下容易区分,将块元素设置为白色。添加了一个小阴影以创建叠加效果。定义元素标签的颜色和下划线装饰。定义当鼠标向上移动时元素将被放大,滤镜的灰度将被设置为“0”。.card-image.card-image{高度:250px;职位:相对;溢出:隐藏;}.card-imageimg{宽度:150%;位置:绝对;顶部:50%;左:50%;变换:翻译(-50%,-50%);过滤器:灰度(1);过渡属性:过滤器宽度;过渡持续时间:.3s;transition-timing-function:ease;}块元素的固定大小,其中包含我们的图像,它允许我们使用任何图像来制作卡片,只要它满足尺寸要求。设置相对定位,因为它包含绝对定位的元素。当定义的内容溢出元素的框时裁剪并隐藏。如果需要,我们可以将图像的默认大小从固定大小的100%增加,但不要添加小于400像素的图像,并且不要忘记遵守它们的宽/高比以避免间隙。为了在父元素中完整显示图片,以.card-image的中心为起点,我们需要同时将定位方式设置为absolute。top和left为50%,然后可以通过transform:translate(-50%,-50%)设置位移,这样就以.card-image的中心点为起点。将元素定义为100%灰度。使元素放大,鼠标悬停时开始缓慢300毫秒,然后变得更快,然后缓慢结束。.card-body.card-body{文本对齐:居中;填充:15px20px;box-sizing:border-box;}将.card-bady元素的文本对齐定义为居中对齐。设置元素的填充。元素box-sizing属性值为border-box。字体和其他.card-date{font-family:'SourceSansPro',sans-serif;}.card-title,.card-excerpt{font-family:'PlayfairDisplay',serif;}.card-date,.card-title{text-align:center;文本转换:大写;font-weight:bold;}.card-date,.card-excerpt{color:#777;}博文链接:使用Css制作漂亮的卡片UI源码链接:使用Css制作漂亮的卡片UI