爱心日蚀

最新推荐文章于 2025-03-16 15:09:47 发布

allWords

最新推荐文章于 2025-03-16 15:09:47 发布

阅读量636

点赞数

分类专栏： html 文章标签： html 伪元素 css动画

本文链接：https://blog.youkuaiyun.com/allWords/article/details/79382688

版权

html 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用HTML和CSS实现的简单爱心动画案例。通过灵活运用CSS3的动画属性及伪元素，实现了动态变换背景颜色的效果，并让爱心图案进行左右移动。文章详细展示了如何通过CSS定位和变形属性来构造爱心形状。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
    <head>        
        <meta charset='utf-8'>
        <meta name='keywords' content=','>
        <meta name='description' content=''>
        <title>HTML模板</title>
        
        <style>
            *{
                margin:0;
            }
            html{
                height:100%;
            }
            body{
                display:flex; /*弹性盒模型和margin:auto居中*/
                height:100%;
                background:#369;
                animation:change 6s linear infinite;
            }
            #content{
                margin:auto; /*可以和弹性盒模型一起居中*/
                width:300px;
                height:300px;
            }
            #content .love{
                position:relative;
                width:200px;
                height:180px;
            }
            .love::before,
            .love::after{
                display:block; /*展示为块级元素*/
                content:'';
                width:100px;
                height:150px;
                background-color:black;                
                border-radius:100px 100px 0 0;
            }
            .love::before{
                /*css 形变 旋转*/
                transform:rotate(-50deg) translateY(27px) translateX(11px);
            }
            .love::after{    
                /*css 形变 旋转*/
                transform:rotate(50deg) translateY(-149px) translateX(-59px);        
            }            
            .love:nth-of-type(2){            
                top:-178px;
                left:92px;            
            }
            .love:nth-of-type(2):before,.love:nth-of-type(2):after{
                background-color:red;
            }
            /*选中其中一个*/
            .love:nth-of-type(1){
                z-index:999;
                left:300px;            
                /*                匀速 无限运动*/
                animation:move 6s linear infinite;
            }
            @keyframes move{
                0%{left:300px}
                50%{left:50px}
                100%{left:-100px}
            }            
            @keyframes change{
                0%{background-color:#368;}
                50%{background-color:#000;}
                100%{background-color:#368;}
            }
            
        </style>
        
    </head>
<body>
    <!--
        要避免空标签
        为什么呢?
        若是需要流量(人流量),则需要标签的权重
        为什么不能空标签呢,爬虫在爬取的时候,会从最外面的标签开始爬取,若这个里面是无意义的标签,
        则浪费了爬虫爬取的权重,爬虫根据所有的标签得到权重,若有空标签,则降低一些,则排名就降低一些

    -->
    <div id='content'>
        <div class='love'></div>
        <div class='love'></div>
    </div>
    
</body>
</html>

<!--
    伪元素: hover link active
-->