可穿插PC端浏览器任何位置的爱心分割

举报
红目香薰 发表于 2022/02/21 11:39:50 2022/02/21
【摘要】 ​ 先看效果：​会跳跃的哦。gif麻烦我就没弄。 完整代码：<!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...

​

 先看效果：

​

会跳跃的哦。gif麻烦我就没弄。 

完整代码：

<!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>完整的❤心❤</title>
</head>

<body>
    <style>
        .herart_box {
            width: 100%;
            height: 30vh;
            margin: 0px 0px 0px 0px;
            border: 1px solid blanchedalmond;
        }
        
        .box {
            width: 33.3%;
            height: 30vh;
            background-color: blanchedalmond;
            margin: 0px;
            padding: 0px;
            position: relative;
            left: 33.3%;
        }
        
        .BigShowDiv {
            width: 40%;
            height: 20vh;
            background-color: blanchedalmond;
            margin: 0px;
            padding: 0px;
            position: relative;
            top: 10%;
            left: 20%;
            vertical-align: middle;
            animation: BigShow 1.5s infinite;
        }
        
        .heart_left,
        .heart_right {
            width: 35%;
            height: 80%;
            background-color: red;
            float: left;
            position: relative;
            top: 10%;
        }
        
        .heart_left {
            background: linear-gradient(red, hotpink, pink);
            transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            /* IE 9 */
            -moz-transform: rotate(45deg);
            /* Firefox */
            -webkit-transform: rotate(45deg);
            /* Safari 和 Chrome */
            -o-transform: rotate(45deg);
            /* Opera */
            position: relative;
            left: 66%;
            border-radius: 45px 60px 5px 15px;
            will-change: rotate;
            /*阴影部分*/
            box-shadow: 2px 0px 3px #7e7e7e, 0px -1px 3px pink;
        }
        
        .heart_right {
            background: linear-gradient(red, hotpink, pink);
            transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            /* IE 9 */
            -moz-transform: rotate(-45deg);
            /* Firefox */
            -webkit-transform: rotate(-45deg);
            /* Safari 和 Chrome */
            -o-transform: rotate(-45deg);
            /* Opera */
            position: relative;
            left: 15%;
            border-radius: 60px 45px 15px 5px;
            will-change: rotate;
        }
        
        @keyframes BigShow {
            90% {
                transform-origin: center;
                transform: scale(1.1, 1.1);
            }
            70% {
                transform-origin: center;
                transform: scale(1.2, 1.2);
            }
        }
    </style>
    <div style="clear: both;"></div>
    <div class="herart_box">
        <div class='box'>
            <div class="BigShowDiv">
                <div class="heart_left"></div>
                <div class="heart_right"></div>
            </div>
        </div>
    </div>
    <div style="clear: both;"></div>
</body>

</html>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入