爱心跳动的源码html

最新推荐文章于 2024-06-08 09:00:00 发布

软件巨匠

最新推荐文章于 2024-06-08 09:00:00 发布

阅读量212

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/2401_84292256/article/details/137698847

版权

这段代码定义了一个简单的爱心形状，并通过CSS的@keyframes动画创建了一个向外扩散的涟漪效果，使爱心看起来有流光溢彩的感觉。动画的box-shadow属性随时间逐渐增大，并在达到最大值后逐渐减小，形成波动效果。


<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>流光溢彩的爱心</title>  
<style>  
  body {  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    height: 100vh;  
    margin: 0;  
    background: #000;  
    overflow: hidden;  
  }  
  
  .heart {  
    position: relative;  
    width: 100px;  
    height: 90px;  
  }  
  
  .heart::before,  
  .heart::after {  
    position: absolute;  
    content: "";  
    top: 40px;  
    width: 52px;  
    height: 80px;  
    border-radius: 50px 50px 0 0;  
    background: red;  
  }  
  
  .heart::before {  
    left: 50px;  
    transform: rotate(-45deg);  
    transform-origin: 0 100%;  
  }  
  
  .heart::after {  
    left: 0;  
    transform: rotate(45deg);  
    transform-origin: 100% 100%;  
  }  
  
  @keyframes ripple {  
    0% {  
      box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.5);  
    }  
    70% {  
      box-shadow: 0 0 0 50px rgba(255, 0, 0, 0);  
    }  
    100% {  
      box-shadow: 0 0 0 100px rgba(255, 0, 0, 0);  
    }  
  }  
  
  .heart {  
    animation: ripple 3s infinite;  
  }  
</style>  
</head>  
<body>  
  <div class="heart"></div>  
</body>  
</html>

软件巨匠

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
爱心跳动的源码html

这段代码定义了一个简单的爱心形状，并通过CSS的@keyframes动画创建了一个向外扩散的涟漪效果，使爱心看起来有流光溢彩的感觉。动画的box-shadow属性随时间逐渐增大，并在达到最大值后逐渐减小，形成波动效果。
复制链接

扫一扫