【HTML、CSS】使用HTML、CSS实现动态爱心

Pixel0216

已于 2022-04-06 13:40:24 修改

阅读量4.6k

点赞数 5

分类专栏： CSS HTML 文章标签： css html sass 前端 html5

于 2022-02-26 18:57:59 首次发布

本文链接：https://blog.csdn.net/weixin_43797577/article/details/123154109

版权

CSS 同时被 2 个专栏收录

12 篇文章 1 订阅

订阅专栏

HTML

12 篇文章 0 订阅

订阅专栏

HTML部分源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态爱心</title>
</head>
<!-- 引入外部样式 -->
<link rel="stylesheet" href="../css/heart.css">

<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

CSS部分源码


body {
    /* 背景颜色为黑色 */
    background-color: black;
}

.box {
    /* 背景颜色为了定义爱心位置
    margin定位到中间
     animation: heard 1s linear infinite alternate
     让爱心1秒来回自动缩放一次
    */
    /* background-color: aqua; */
    height: 200px;
    width: 200px;
    margin: 100px auto;
    animation: heard 1s linear infinite alternate;
}
/* @keyframes 关键帧 
    在0%时为正常大小 
    在100%时为1.2倍大小
*/
@keyframes heard {
    0%{

        transform: scale(1);
        
        }
        
    100%{
        transform: scale(1.2);
        
        }
}
.left {
    /* 爱心背景颜色为红色 宽高为200 向左浮动 
    不然会每一个都是一整行 border-radius让爱心上边变圆角 
    transform: rotate(-45deg) translateX(20px) 旋转-45度并沿着X轴位移20像素 
    box-shadow: 2px 2px 20px 2px red; 阴影部分 为红色*/
    background-color: red;
    height: 200px;
    width: 100px;
    float: left;
    border-radius: 60px 60px 0px 0px ;
    transform: rotate(-45deg) translateX(20px);
    box-shadow: 3px 3px 20px 3px red;
}

.right {
      /* 爱心背景颜色为红色 宽高为200 向左浮动 
    不然会每一个都是一整行 border-radius让爱心上边变圆角 
    transform: rotate(-45deg) translateX(20px) 旋转-45度并沿着X轴位移20像素 
    box-shadow: 2px 2px 20px 2px red; 阴影部分 为红色*/
    background-color: red;
    height: 200px;
    width: 100px;
    float: left;
    border-radius: 60px 60px 0 0 ;
    transform: rotate(45deg) translateX(-20px);
    box-shadow: 3px 3px 20px 3px red;
}

运行效果如下（下图为截取的图片，实际效果可以跳动）：