HTML+CSS实现——响应式卡片页面

简介: 本篇文章,主要讲解一下如何创建一个响应式卡片页面

本篇文章,主要讲解一下如何创建一个响应式卡片页面


响应式卡片效果图

292e13c427cbed830ae5fdd7ab30b9b.png


HTML部分(index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
    <title>响应式卡片</title>
</head>
<link href="http://175.178.184.206/usr/uploads/2022/05/2356336909.png" mce_href="favicon.ico" rel="icon" type="image/x-icon"/>
<body>
    <div class="container">
        <!-- 01 card -->
        <div class="card">
            <div class="circle">
                <h2>Email</h2>
            </div>
            <div class="content">
                <p>Welcome To Mango Diary<br></p>
                <p>Click the button below to tell you what you want to whisper to me</p>
                <a href="#">Post Here</a>
            </div>
        </div>
        <!-- 02 card -->
        <div class="card">
            <div class="circle">
                <h2>Photo</h2>
            </div>
            <div class="content">
                <p>Welcome To Photo Waterfall<br></p>
                <p>Through the days when no one cares, there is poetry and distance</p>
                <a href="#">Read More</a>
            </div>
        </div>
        <!-- 03 card  -->
        <div class="card">
            <div class="circle">
                <h2>Moon</h2>
            </div>
            <div class="content">
                <p>I've always wanted to see the moon from your window. You can see it more clearly in this room than in that one</p>
                <a href="#">Read More</a>
            </div>
        </div>
    </div>
</body>
</html>

CSS部分(style.css)

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap');
* {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(45deg,#ffaf00, #bb02ff);
    background-attachment: fixed;
}
.container {
    position: relative;
    width: 1150px;
    padding:20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.container .card {
    position: relative;
    width: 300px;
    height: 480px;
    background: #fff;
    margin: 20px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 25px rgba(0, 0 ,0 , .2);
    transition: 0.5s;
}
.container:hover .card{
    filter: blur(20px);
    transform: scale(0.9);
    opacity: .5;
}
.container .card:hover{
    filter: blur(0px);
    transform: scale(1.1);
    opacity: 1;
}
.container .card .circle {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    clip-path: circle(180px at center 0);
    text-align: center;
}
.container .card .circle h2{
    color: #fff;
    font-size: 4.5em;
    padding: 30px 0;
}
.container .card .content {
    position: absolute;
    bottom: 10px;
    padding: 20px;
    text-align: center;
} 
.container .card .content p {
    color: #666;
}
.container .card .content a {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    background: #000;
    border-radius: 40px;
    text-decoration: none;
    margin-top: 20px;
    color: #fff;
}
.container .card:nth-child(1) .circle,
.container .card:nth-child(1) .content a{
    background: #ffaf00;
}
.container .card:nth-child(2) .circle,
.container .card:nth-child(2) .content a{
    background: #da2268;
}
.container .card:nth-child(3) .circle,
.container .card:nth-child(3) .content a{
    background: #bb02ff;
}
.container .card:nth-child(4) .circle,
.container .card:nth-child(4) .content a{
    background: #bb02ff;
}
.container .card:nth-child(5) .circle,
.container .card:nth-child(5) .content a{
    background: #bb02ff;
}

注意事项

以上两个文件须使用括号内的名字命名并且放在同一目录下才可

目录
相关文章
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
5天前
|
前端开发 JavaScript
如何使用CSS过渡实现页面元素的淡入淡出效果?
如何使用CSS过渡实现页面元素的淡入淡出效果?
30 20
|
29天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
53 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
28天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
64 34
|
1月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
123 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
3月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
222 1
|
3月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
73 3
|
3月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
180 6
|
5月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
6月前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
221 0

热门文章

最新文章