HTML+CSS制作七夕跳动的红心动画效果
效果图如下：
HTML部分源代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>七夕</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box"></div> <p>帮我买张票！去哪里？去你心里。</p> </body> </html>
CSS部分源代码如下：
:root { --background-color: #2c3e50; --border-color: #7591AD; --text-color: #34495e; --color1: #EC3E27; --color2: #fd79a8; --color3: #0984e3; --color4: #00b894; --color5: #fdcb6e; --color6: #e056fd; --color7: #F97F51; --color8: #BDC581; } * { margin: 0; padding: 0; } html { font-size: 14px; } body { width: 100vw; height: 100vh; background-color: var(--background-color); display: flex; justify-content: center; align-items: center; flex-direction: column; } .box { position: relative; width: 180px; height: 180px; background-color: var(--color1); transform: rotate(45deg); animation: animate 0.7s ease-in-out infinite } .box::before, .box::after { content: ''; position: absolute; width: 180px; height: 180px; border-radius: 100%; background-color: var(--color1); } .box::before { transform: translate(-50%, 0); } .box::after { transform: translate(0, -50%); } p { margin-top: 100px; font-size: 40px; color: #FFF; } @keyframes animate { 0% { transform: scale(1) rotate(45deg); } 100% { transform: scale(0.8) rotate(45deg); } }
