HTML+CSS:实现心动的感觉！

最新推荐文章于 2024-08-02 20:34:24 发布

X-SL

最新推荐文章于 2024-08-02 20:34:24 发布

阅读量477

点赞数

分类专栏：炫酷特效文章标签： css html css3

本文链接：https://blog.csdn.net/qq_40924992/article/details/126651034

版权

炫酷特效专栏收录该内容

7 篇文章 1 订阅

订阅专栏

本文介绍如何利用HTML和CSS3制作一个由两个圆形和一个正方形拼接的心形图案，并为其添加跳动动画效果。通过figure标签、@keyframes动画及变换属性，实现了爱心的动态展示。同时解释了figure标签的作用以及为何在动画中设置特定的旋转角度来保持爱心形状。

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

实现效果：

心动

思路：
1、使用两个圆形和一个正方形拼凑出爱心图案。
2、使用CSS3中的动画效果，为我们的爱心图案添加跳动效果。
疑惑：
1.figure标签？
解答：figure标签，表示独立的流内容，可以是图像，图表等。并且移除其内容不会影响其他页面内容。
2.为什么在@keyframes move{}中需要旋转225度？
解答：在拼凑爱心时，我们已经对下面的正方形旋转45度，如果执行动画过程中不进行旋转225度，会破坏整个爱心图案。通过这两次的旋转可以使下面的正方形回到当初的位置。

HTML代码：

<body>
    <figure>
        <div class="active left"></div>
        <div class="active right"></div>
        <div class="active bottom"></div>
    </figure>
</body>

CSS代码：

 *{
            margin:0;
            padding:0;
        }
        body{
            background-color:pink;
        }
        /* 修饰最大容器 */
        figure{
            position:relative;
            left:200px;
            top:200px;
        }
        /* 修饰左右两个圆 */
        .left,.right{
            width:200px;
            height:200px;
            background-color:red;
            border-radius:50%;
            position:absolute;
        }
        .left{
            left:-3px;
        }
        .right{
           left:142px;
        }
        /* 修饰下面正方形 */
        .bottom{
            width:198px;
            height: 198px;
            background-color:red;
            position:absolute;
            transform:rotate(45deg);
            top:75px;
            left:70px;
            border-radius:8px;
            z-index:-1;
        }
        /* 实现跳动效果 */
        .active{
            box-shadow:0 0 15px red;
            animation:move 1s ease infinite;
        }
       @keyframes move{
        0%{
            transform:scale(1) rotate(225deg);
            box-shadow:0 0 20px red;
        }
        50%{
            transform:scale(1.2) rotate(225deg);    
        }
        100%{
            transform:scale(1) rotate(225deg);  
        }
       }