html+css编写简单构造跳动爱心

树下一少年

已于 2023-09-21 22:31:28 修改

阅读量1.9k

点赞数 1

分类专栏： Web前端文章标签： css html css3 html5 前端

于 2023-02-07 04:00:00 首次发布

本文链接：https://blog.csdn.net/weixin_64334766/article/details/128909975

版权

Web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

该文章介绍了一种利用HTML和CSS构建一个由三个部分组成的爱心形状的方法，通过设置不同盒子的边框弧度、背景色、阴影以及使用关键帧动画实现爱心的跳动效果。代码中包括了left、right和bottom三个盒子的样式定义，以及一个名为myanimation的关键帧动画。

摘要由CSDN通过智能技术生成

一.主要思路是

构造一个大盒子，里面放left、right、bottom三个小盒子，并将三个盒子设置好边框宽度、高度、弧度达到想要的形状（大致为上面两个圆下面一个矩形），为三个小盒子设置好背景色和阴影效果，最后为其设置动画效果

二.完整参考代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>简易跳动爱心</title>
    <style>
		@keyframes myanimation {   
		    0%{
		        transform: scale(1) rotate(225deg);
		    }
		    50%{
		        transform: scale(1.2) rotate(225deg);
		    }
		    100%{
		        transform: scale(1) rotate(225deg);
		    }
		}
        .all{
            width: 400px;
            height: 300px;
			top: 50px;                           
			position: relative;                  
        }
        .left{
            left: 30px;
			width: 200px;
			height: 200px;
			border-radius: 65%;        
        }
        .right{
            right: 30px;
			width: 200px;
			height: 200px;
			border-radius: 65%;          
        }
        .bottom{
            bottom: 30px;
            left: 100px;
            width: 200px;
            height: 200px;
            transform: rotate(45deg);
			border-radius: 8%;            
        }
        .left,.right,.bottom{
            position: absolute;        
            box-shadow:0 0 40px orangered;     
            animation: myanimation 1.5s ease infinite normal;     
            background: linear-gradient(-90deg, orangered 0%, orangered 100%);   
        }
    </style>
</head>
<body>
    <div class="all">
        <div class="left"></div>
        <div class="right"></div>
        <div class="bottom"></div>
    </div>
</body>
</html>

三.附上部分参考注释

当然也可以尝试用用z-index属性来设置重叠效果是否满意

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跳动爱心</title>
<style>
@keyframes myanimation {

                /*这里要达到的效果主要是控制bottom盒子旋转缩放后位置通过角度计算达到重合*/
       0%{
       transform: scale(1) rotate(225deg);
       }
       50%{
       transform: scale(1.2) rotate(225deg);
       }
       100%{
       transform: scale(1) rotate(225deg);
       }
           /*变换效果：
           scale()表示对标签进行缩放可以写两个参数，第一个参数控制水平方向缩放，第二个控制垂直方向缩放
           rotate()表示对标签进行旋转，括号内写需要旋转度数*/
       }
.all{
width: 400px;
height: 300px;
           top: 50px; /*图像上下左右位置参数可根据自身需求调整*/
           position: relative; /*.all作为父元素，需为其设置相对位置，“子绝父相”*/
}
.left{
left: 30px;
           width: 200px;
           height: 200px;
           border-radius: 65%; /*调整左上盒子的弧度*/
}
.right{
right: 30px;
           width: 200px;
           height: 200px;
           border-radius: 65%; /*调整右上盒子的弧度*/
}
.bottom{
bottom: 30px;
left: 100px;
width: 200px;
height: 200px;

transform: rotate(45deg); /*将下面的盒子旋转45度达到目标图形*/
border-radius: 8%; /*调整下方盒子的弧度*/
}
.left,.right,.bottom{
position: absolute; /*三个子元素设置绝对位置属性*/
box-shadow:0 0 40px orangered;

/*设置盒子阴影效果，四个参数含义：x轴偏移值，y轴偏移值，模糊度，颜色*/
animation: myanimation 1.5s ease infinite normal;

/*调用animation属性为跳动激活属性，以常规动画方向无限循环跳动，每次跳动1.5秒*/
background: linear-gradient(-90deg, orangered 0%, orangered 100%);

/*为三个子元素的背景设置渐变颜色，表示的意思是以负90度为渐变轴，从开始橘红色渐变到最后为橘红色，颜色建议选择相近色或相同色*/
}
</style>
</head>
<body>
<div class="all">
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
</body>
</html>