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="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>
这款卡片没有使用图片背景,由颜色填充,让网页加载更快,扁平化设计,更有鼠标经过动画,很不错的哟。
版权声明:本文由“憨小猪”发布,如需转载请注明出处。