当前位置:首页 > 技术 > 前端 > HTML+CSS实现卡片信息

HTML+CSS实现卡片信息

DChen3年前 (2021-05-31)前端2 K0

看到一个朋友的网站中友情链接的卡片很好看,于是,嘿嘿……仿制一款,准备用一用,下面是实现代码,部分为网友分享,另一部分是自己写的,这款卡片是带动画的哟!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>卡片效果</title>
    <style type="text/css">
        .card {
            cursor: pointer;
            margin-top: 10px;
            width: 350px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            text-align: center;
            transition: all 0.25s;
        }

        .card:hover {
            margin-top: 0px;
            box-shadow: 5px 8px 5px #778899;
        }

        .header {
            background-color: #4caf50;
            margin: 0 auto;
            padding: 40px;
        }

        .body {
            padding: 10px;
        }

        .card img {
            width: 100%;
        }
    </style>
</head>
<body>
<div>
    <div class="card" onclick="links()">
        <div class="header">
            <img src="https://www.phper.red/favicon.ico" style="width:40px;height:40px;padding-bottom:20px;">
            <a id="links" style="text-decoration:none;font-size: 30px;color: #fff;display:block;"
               href="https://www.PHPer.red" target="_back" title="憨小猪博客">憨小猪</a>
        </div>
        <div class="body">
            <p>分享代码,交流经验</p>
        </div>
    </div>
</div>
<script type="text/javascript">
    function links() {
        var url = document.getElementById('links').href;
        window.location.href = url;
    }
</script>
</body>
</html>

这款卡片没有使用图片背景,由颜色填充,让网页加载更快,扁平化设计,更有鼠标经过动画,很不错的哟。

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

版权声明:本文由“憨小猪”发布,如需转载请注明出处。

本文链接:https://www.phper.red/post/98.html

标签: 卡片htmlcssjs
返回列表

没有更早的文章了...

下一篇:css实现的对联广告代码

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。