• 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
  • 相关阅读:
    基于开源的BPM流程引擎VS天翎自研BPM流程引擎
    IDS与防火墙的区别
    webpack构建01-vue项目之 手动webpack打包
    牛客网SQL中等难度
    springboo集成activiti5.22在线设计器
    软件开发程序员的“九阳神功”——设计模式
    vue3怎么获取el-form的元素节点
    CVE-2021-3560 Linux Polkit 权限提升漏洞
    Python教程之深度比较Python移动应用框架
    JavaSE入门---认识方法
  • 原文地址：https://blog.csdn.net/qq_40924992/article/details/126651034