当前位置:代码狗 > 开发教程 > WEB开发教程 > 正文

HTML+CSS实现卡片信息

HTML+CSS卡片信息教程

HTML+CSS卡片信息

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

<!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="tzlinks()">
        <div class="header">
<img src="https://www.daimadog.com/favicon.ico" style="width:40px;height:40px;padding-bottom:20px;"></img>
            <a id="frelinks" style="text-decoration:none;font-size: 30px;color: #fff;display:block;" href="https://www.daimadog.com" target="_back" title="代码狗博客">代码狗</a>
        </div>
        <div class="body">
           <p>分享代码,交流经验</p>
        </div>
    </div>
    </div>
<script type="text/javascript">
function tzlinks(){
var url=document.getElementById('frelinks').href;
window.location.href=url;
}
</script>
</body>
</html>

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

详见本站更多服务页面。

感觉很棒!可以赞赏支持我哟~

赞(2) 打赏

评论 抢沙发

×

请作者吃根烤肠!

支付宝