<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title> Card</title>
<link rel="stylesheet" href="css/reset.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="card-list">
<article class="card">
<figure class="card-image">
<img src="img/gfd.jpg" alt="An orange painted blue, cut in half laying on a blue background" />
</figure>
<div class="card-header">
<a href="#">当生活给你个橘子</a>
<button class="icon-button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" display="block" id="Heart">
<path d="M7 3C4.239 3 2 5.216 2 7.95c0 2.207.875 7.445 9.488 12.74a.985.985 0 0 0 1.024 0C21.125 15.395 22 10.157 22 7.95 22 5.216 19.761 3 17 3s-5 3-5 3-2.239-3-5-3z" />
</svg>
</button>
</div>
<div class="card-footer">
<div class="card-meta card-meta--views">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" display="block" id="EyeOpen">
<path d="M21.257 10.962c.474.62.474 1.457 0 2.076C19.764 14.987 16.182 19 12 19c-4.182 0-7.764-4.013-9.257-5.962a1.692 1.692 0 0 1 0-2.076C4.236 9.013 7.818 5 12 5c4.182 0 7.764 4.013 9.257 5.962z" />
<circle cx="12" cy="12" r="3" />
</svg>
2,465
</div>
<div class="card-meta card-meta--date">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" display="block" id="Calendar">
<rect x="2" y="4" width="20" height="18" rx="4" />
<path d="M8 2v4" />
<path d="M16 2v4" />
<path d="M2 10h20" />
</svg>
2021,7月26
</div>
</div>
</article>
</div>
</body>
</html>
鼠标悬停hover样式，简洁漂亮的css3鼠标悬停鼠标悬停hover样式边框和爱心点赞特效
5星 · 超过95%的资源 需积分: 35 34 浏览量
2022-12-07
16:36:42
上传
评论
收藏 8KB ZIP 举报 
简洁漂亮的css3鼠标悬停鼠标悬停hover样式边框和爱心点赞特效.zip （4个子文件） 
css 
reset.min.css 773B style.css 2KB img 
gfd.jpg 6KB
index.html 2KB
- 1
- 2
前往页