首页生成一个米白底背景，粉色小心形成一个大的心形图案的HTML网页

生成一个米白底背景，粉色小心形成一个大的心形图案的HTML网页

时间: 2023-06-03 10:05:10 浏览: 198

很高兴为您解答问题。对于您的问题，我可以提供一些指导。为了生成一个米白底背景、粉色小心形成一个大的心形图案的HTML网页，您可以使用HTML和CSS。您可以使用以下代码： HTML部分： <!DOCTYPE html> <html> <head> <title>Heart Shape</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="container"> <div id="heart"></div> </div> </body> </html> CSS部分： #container{ background-color: #f5f5dc; height: 100vh; display: flex; align-items: center; justify-content: center; } #heart:before, #heart:after{ position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: #fc5185; border-radius: 50px 50px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; } #heart:after{ left: 0; transform: rotate(45deg); transform-origin: 100% 100%; } #heart{ position: relative; width: 100px; height: 100px; margin: 0 auto; transform: translateZ(0); animation: heart 1s infinite linear; } @keyframes heart{ 0%{transform: scale(0.95);} 5%{transform: scale(1);} 10%{transform: scale(0.95);} 15%{transform: scale(1);} 25%{transform: scale(1.2);} 35%{transform: scale(0.95);} 45%{transform: scale(1);} 55%{transform: scale(1.2);} 65%{transform: scale(0.95);} 75%{transform: scale(1);} 100%{transform: scale(0.95);} } 您可以将上述代码复制到一个HTML文件和一个CSS文件中，并保存为相应的文件名，然后运行HTML文件。您将看到一个米白色背景，粉色的心形在其中心跳闪烁。希望这可以帮助您生成您所需要的HTML网页！

阅读全文