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

实现效果：

心动

思路：
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>
1
2
3
4
5
6
7

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);  
        }
       }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

相关阅读:
微信小程序实现同一页面左右滑动无限切换上/下一页结合后端请求数据，带滑动动画
企业安全不求人，一个小技巧就能搞定
网上花店网页代码 html静态花店网页设计制作 dw静态鲜花网页成品模板素材网页 web前端网页设计与制作 div静态网页设计
【Linux系统管理】10 Shell 编程进阶篇
项目实战：ES的增加数据和查询数据
webpack编译运行了两次
【CSS】React项目如何在CSS样式文件中使用变量
Avalonia常用小控件Slider
数据结构笔记01
hot100 盛水最多的组合(滑动窗口题)

原文地址：https://blog.csdn.net/qq_40924992/article/details/126651034