七夕来临，程序员该如何花式表白？html+css实现简单七夕表白

教程管理员发布于2023-09-25 20:01 HTML教程 128

简介： 文章目录 1 效果展示 2 源码及环境 3 浅谈七夕 3.1 七夕由来 3.2 七夕风俗

1 效果展示

2 源码及环境

使用Hbuilder X进行编码。

new_file.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>七夕练习</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body{
                background: pink;
            }
            .box{
                width: 120px;
                height:  120px;
                background: #ff0000;
                /* 使盒子旋转45度, 并设置边距 */
                transform: rotate(45deg);
                margin: 200px auto;
                animation: love 1s infinite;  /* 动画绑定 */
                box-shadow: 0 0 20px #ff5500;
            }
            /* 爱心形状绘制 */
            .box::before,
            .box::after{
                content: "";
                /* 给插入的盒子进行定位 */
                position: absolute;
                width: 120px;
                height: 120px;
                background: #ff0000;
                border-radius: 50%;
            }
            .box::before{
                left: -68px;
            }
            .box::after{
                top: -68px;
            }
            /* 动画绘制 */
            @keyframes love{
                0%{
                    transform: rotate(45deg)scale(0.85);
                }
                50%{
                    transform: rotate(45deg)scale(1);
                }
                100%{
                    transform: rotate(45deg)scale(0.85);
                }
            }
            p{
                text-align: center;
                font-size: 30px;
                font-weight: 520;
                color: #ffaa00;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
        <p>Wish all the lovers a happy Chinese Valentine's Day!!!</p>
    </body>
</html>

标签：#阿里 #该如何 #开发者 #程序员 #简单 #社区

上一篇：log4j每天生成一份html格式的日志
下一篇：HTML代码应该如何优化才能达到性能最高？

七夕来临，程序员该如何花式表白？html+css实现简单七夕表白

1 效果展示

2 源码及环境

相关推荐

会员中心

下载中心

图片素材

关注微信

关于我们

QQ在线客服

关注微信领优惠