CSS 制作爱心
- 2019 年 11 月 13 日
- 笔记
方案1 纯CSS+HTML
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .wrap { margin: 100px 100px; /* border: 1px solid green; */ /* overflow: hidden; */ } .wrap .heart { width: 200px; height: 300px; /* margin: 100px auto; */ position: relative; transition: all .3; animation: live 2s infinite alternate ease-in-out; } .wrap .heart::before, .wrap .heart::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 100px 100px 0 0; background: red; transform: rotate(-45deg); } .wrap .heart::after { left: 71px; transform: rotate(45deg); } @keyframes live { 0% { transform: scale(1.0); } 100% { transform: scale(1.3); } } </style> </head> <body> <div class="wrap"> <div class="heart"></div> </div> </body> </html>
此方法特点：纯CSS3+HTML，但比例需要修改像素来调。练习CSS可以采取此措施。 若实际使用，则最好使用方法2
效果
方法2 使用font-awesome
简介：font-awesome 是一个图标字体库和CSS框架 里面便有爱心图标。 可自定义颜色(color: red;)以及大小(font-size: 100px;)
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link href="https://cdn.bootcss.com/font-awesome/5.8.1/css/all.min.css" rel="stylesheet"> <style> .wrap { height: 500px; width: 500px; margin: 100px auto; } .heart { color: red; font-size: 200px; animation: live 1s infinite alternate ease-in-out; } @keyframes live { 0% { transform: scale(1.0); } 100% { transform: scale(1.3); } } </style> </head> <body> <div class="wrap"> <div class="heart"> <i class="fa fa-heart" aria-hidden="true"></i> </div> </div> </body> </html>
只需引入cdn即可：
<link href="https://cdn.bootcss.com/font-awesome/5.8.1/css/all.min.css" rel="stylesheet">
结果
