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.org/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.org" 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>这款卡片没有使用图片背景，由颜色填充，让网页加载更快，扁平化设计，更有鼠标经过动画，很不错的哟。
详见本站更多服务页面。
评论 （0）