用html和css 来做一个为情人节的跳动的心

最新推荐文章于 2023-02-07 04:00:00 发布

小七在前端

最新推荐文章于 2023-02-07 04:00:00 发布

阅读量913

点赞数 2

分类专栏：前端学习文章标签： html

本文链接：https://blog.csdn.net/zhangpythonqi/article/details/119647565

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用html和css 来做一个为情人节的跳动的心

前端基础学习

首先，我们应该明白学习前端是重要的一点就是对ｈｔｍｌ网页的设计和布局，因为我们所有呈现的内容都是基于HTML网页的。但又不知是对网页布局上的一个美观体现，更重要的是去实现视觉和交互功能，让一个ｈｔｍｌ网页动起来！

一、实现效果

在这里插入图片描述

二：部分代码描述

代码很简单，这里就不细讲了！主要就是２个ｄｉｖ代码和２个特效动画，一个是跳动的心的ｄｉｖ盒子ｂｏｘ，用一左（．ｌｅｆｔ）一右（．ｒｉｇｈｔ）的叠加，给其添加border-radius圆角边框，实现爱心。周围的渲染 box-shadow的模糊半径。

  .left{
        position:absolute;
        top: 20px;
        width: 200px;
        height: 300px;
        border-radius: 300px 300px 0 0; /*左上角  右上角  右下角  左下角*/
        transform: rotate(-45deg);
        background-color: red;
        box-shadow: -30px  -20px 20px  20px pink;  /*X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。*/
        
    }
    .right{
        position:absolute;
        top: 20px;
        left: 70px;
        width: 200px;
        height: 300px;
        border-radius: 300px 300px 0 0; /*左上角  右上角  右下角  左下角*/
        transform: rotate(45deg);
        background-color: red;
        box-shadow: 30px -20px 20px 20px pink;
    }

在这里插入图片描述
最后一个就是流星特效，定义一个流星ｄｉｖ标签和动画，用渐变的方式来改变他的形状（从长方体到流星图）然后就是根据子代选择器来创建多个流星，只要在子代选择器下来改变流星的初始位置即可。需要注意的是流星特效不能覆盖爱心特效，所以在流星的堆叠顺序要小于爱心（ z-index: 999;）。

.liuxin{
        position: absolute;
        width: 3px;
        height: 200px;
        background-image: -webkit-linear-gradient(rgba(0,0,0,0), #fff);   /*背景色渐变 由黑到白    注意不同浏览器有兼容问题*/
        transform: rotate(-45deg);
        animation: liu 3s linear infinite ; 
        z-index: 999;
    }

三：代码

```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>Document</title>
</head>
<style>
    body{
        margin: 0;
        padding: 0;
        background-color: black;
        overflow:hidden;                /*超出边框隐藏*/ 
    }
    
    .liuxin{
        position: absolute;
        width: 3px;
        height: 200px;
        background-image: -webkit-linear-gradient(rgba(0,0,0,0), #fff);   /*背景色渐变 由黑到白    注意不同浏览器有兼容问题*/
        transform: rotate(-45deg);
        animation: liu 3s linear infinite ; 
        z-index: 999;
    }
    .liuxin:nth-child(1){              /*子代选择器*/
        animation-delay:1s;
        top: 10px;
        left: 100px;
        
    }
    .liuxin:nth-child(2){
        animation-delay:2s;
        top: 200px;
        left: 300px;
        
    }
    .liuxin:nth-child(3){
        animation-delay:1.5s;
        top: 200px;
        left: 800px;
    }
    .liuxin:nth-child(4){
        top: 100px;
        left: 500px;
    }
    .liuxin:nth-child(5){
        animation: delay 1em; 
        top: 300px;
        left: 600px;
    }
    .liuxin:nth-child(6){
        animation-delay:2.5s;
        top: 50px;
        left: 800px;
    }
    .liuxin:nth-child(7){
        top: 20px;
        right: 900px;
    }
    .liuxin:nth-child(8){
        animation-delay:1s;
        top: 50px;
        left: 600px;
    }
    .liuxin:nth-child(9){
        animation-delay:0.5s;
        top: 200px;
        left: 100px;
    }
    .liuxin:nth-child(10){
        animation-delay:1.5s;
        top: 20px;
        left: 500px;
    }
    .liuxin:nth-child(11){
        top: 150px;
        left: 200px;
    }
    .liuxin:nth-child(12){
        animation-delay:1.2s;
        top: 200px;
        right: 400px;
    }
    .liuxin:nth-child(12){
        top: 100px;
        left: 350px;
    }
    .box{
        position: absolute;
        top: 50px;
        left:800px;
        width: 400px;
        height: 400px;
        margin: 50px auto;
      /*   background-color: brown; */
        animation: heat 2s infinite alternate;
        z-index:9999;
        overflow:visible;               /*恢复 超出边框隐藏*/ 
    }
    .left{
        position:absolute;
        top: 20px;
        width: 200px;
        height: 300px;
        border-radius: 300px 300px 0 0; /*左上角  右上角  右下角  左下角*/
        transform: rotate(-45deg);
        background-color: red;
        box-shadow: -30px  -20px 20px  20px pink;  /*X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。*/
        
    }
    .right{
        position:absolute;
        top: 20px;
        left: 70px;
        width: 200px;
        height: 300px;
        border-radius: 300px 300px 0 0; /*左上角  右上角  右下角  左下角*/
        transform: rotate(45deg);
        background-color: red;
        box-shadow: 30px -20px 20px 20px pink;
    }

    .box .p1 {
                position: absolute;
                right: 160px;
                bottom: 200px;
                background-color: red;
                width: 200px;
                height: 30px;
                font: bold 25px/30px"";
                text-align: center;
                color: #fff;
            }
    .box .p2{
                position: absolute;
                right: 160px;
                bottom: 240px;
                background-color: red;
                width: 200px;
                height: 30px;
                font: bold 25px/30px"";
                text-align: center;
                color: #fff;
    }    

        
        /*爱心跳动动画*/
    @keyframes heat{
        0%{
            transform: scale(1);    /*transform:scale（）  缩放;*/ 
        }
        50%{
            transform: scale(1.2);
        }
        100%{
            transform: scale(1);
        }
    }
        /*流星动画*/
    @keyframes liu{
        0%{
            transform: translate(0px ,0px)  rotate(-45deg);
            height: 0;
            
        }
        50%{
            transform: translate(350px ,350px)  rotate(-45deg);
            height: 200px;
        }
        100%{
            transform: translate(700px ,700px)  rotate(-45deg);
            height: 0;
        }
    }
  
</style>
<body>
    <div class="liuxin"></div>
    <div class="liuxin"></div>
    <div class="liuxin"></div>
    <div class="liuxin"></div>
    <div class="liuxin"></div>
    <div class="liuxin"></div>
    <div class="liuxin"></div>
    <div class="liuxin"></div>
    <div class="liuxin"></div>
    <div class="liuxin"></div>
    <div class="liuxin"></div>
    <div class="liuxin"></div>
    <div class="liuxin"></div>
    <div class="liuxin"></div>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <p class="p1">情人节快乐</p>
        <p class="p2">I Love You</p>
    </div>
</body>
</html>

四：总结

新手上路，自己做的很烂，没啥可说的，刚开始学习前端，刚好马上又是七夕节，记录一下自己的理解和学习过程吧！欢迎各位莅临指正。。
　　我觉得，学习ｈｔｍｌ和ｃｓｓ主要是对页面的布局有一个整体的分析和理解，对页面的设计有个大体思路，在开始做比较好，思考那些地方应该用定位和ｆｌｏａｔ：ｌｅｆｔ等等，写到一半改代码好烦的！