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

作者：繁依Fanyi0 | 2024-02-16 11:33:27

踩

html 跳动的心

一.主要思路是

二.完整参考代码：

三.附上部分参考注释

四.最终效果

一.主要思路是

构造一个大盒子，里面放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>

四.最终效果

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/92758