css3 绘图（跳动的心和太极图）

最新推荐文章于 2021-12-09 15:40:50 发布

z_l_ming

最新推荐文章于 2021-12-09 15:40:50 发布

阅读量1.5k

点赞数 2

分类专栏： # 前端文章标签： css3

本文链接：https://blog.csdn.net/z_l_ming/article/details/51566487

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

首先看效果图啦啦啦~~·

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>css draw</title>
    <style type="text/css">
    html,body{
        background: gray;
    }
    #heart{
        width: 100px;
        height: 90px;
        position:  fixed;
        top: 30%;
        left: 44%;
        -webkit-animation: pound 1s infinite;
        -ms-animation: pound 1s infinite;
        -moz-animation: pound 1s infinite;
        -o-animation: pound 1s infinite;
        animation: pound 1s infinite;
    }
    #heart:before,#heart:after{
        position: absolute; 
        content: ""; 
        left: 50px; 
        top: 0; 
        width: 50px; 
        height: 80px;
        background: red;
        border-radius: 50px 50px 0 0;
        -webkit-border-radius: 50px 50px 0 0;
        -ms-border-radius: 50px 50px 0 0;
        -moz-border-radius: 50px 50px 0 0;
        -o-border-radius: 50px 50px 0 0;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform-origin: 0 100%;
        -webkit-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        -o-transform-origin: 0 100%;
    }
    #heart:after{
        left: 0px; 
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform-origin: 100% 100%;
        -webkit-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        -moz-transform-origin: 100% 100%;
        -o-transform-origin: 100% 100%;
    }
    @keyframes pound {
        from { transform: none; }
        30% { transform: scale(1.2);}
        50% { transform: scale(1.6);}
        70% { transform: scale(1.2); }
        to { transform: none;}
    }

    #yinyang{
        width: 96px; 
        height: 48px; 
        background: black; 
        border-color: white; 
        border-style: solid; 
        border-width: 2px 2px 50px 2px; 
        border-radius: 100%; 
        position:  fixed;
        top: 60%;
        left: 44%;
    }
    #yinyang:before,#yinyang:after{
        content: ""; 
        position: absolute; 
        top: 50%; 
        left: 0; 
        width: 12px; 
        height: 12px; 
        background: black; 
        border: 18px solid white; 
        border-radius: 100%; 
    }
    #yinyang:after{
        left: 50%; 
        background: white; 
        border: 18px solid black; 
        border-radius:100%; 
    }
    </style>
</head>
<body>
<div id="heart"></div>
<div id="yinyang"></div>
</body>
</html>

z_l_ming

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3 绘图（跳动的心和太极图）

首先看效果图啦啦啦~~·<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>css draw</title> <style type="text/css"> html,body{ background: gray; } #heart{ width:
复制链接

扫一扫