祝所有码农七夕快乐~

激进的韭菜

已于 2022-08-04 19:48:39 修改

阅读量190

点赞数 2

分类专栏： JavaSE学习笔记文章标签： css css3 html

于 2022-08-04 18:38:11 首次发布

本文链接：https://blog.csdn.net/weixin_56090951/article/details/126160588

版权

CSS HTML 程序员表白创意代码前端技术

关键词由CSDN通过智能技术生成

JavaSE学习笔记专栏收录该内容

26 篇文章 1 订阅

订阅专栏

创意代码表白

以程序员的方式撒狗粮，专业浪漫，值得拥有！


<!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>Document</title>
    <style>
 
        
        /* 跳动 */
        @keyframes beat {
                from {
                    transform: rotate(45deg) scale(2);
                }
            
                to {
                    transform: rotate(45deg) scale(2.3);
                }
            }   
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f7f1e3;
        }
     
        .love {
            width: 100px;
            height: 100px;  
            background-color: #e74c3c;
            transform: rotate(45deg) scale(2);
            animation: beat 800ms ease infinite alternate forwards; 
			position: relative;
          
        }
 
        .score {
            width: 80px;
            height: 80px;  
            background-color: #e74c3c;
            position: absolute;
            top: 10px;
            left: 10px; 
			z-index: 100;
			

        }

		.content {
			transform: rotate(-45deg);
			position: absolute;
			top: 12px;
			left: -19px;
			font-size: 20px;
			
		}
 
        .love,
        .love::before,
        .love::after {
            box-shadow: -5px 16px 12px -3px rgba(0,0,0,0.4) inset;
        }
 
        .love::before, 
        .love::after {
            content: "";
            display: block;
            width: 100px;
            height: 100px;
            background-color: rgba(231, 76, 60,1.0);
            border-radius: 50%;
            position: absolute;
        }
        
        .love::before {
            right: 50%;
        }
        .love::after {
            bottom: 50%;
        }
     
    </style>
</head>
<body>
    <div class="love"><div class="score"><div class="content">七夕快乐~</div></div></div>
</body>
</html>