前端

CSS3吃豆人动画

上一章我们用一个div实现了太极图,这一章我们用一个div来实现吃豆人动画,首先看演示图
演示1.gif

这个看上去比较好分析,依旧是::after和::before这两兄弟实现上下颚(这么说好像也没什么不对)
首先写上我们的基本代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }

    body {
        background: black;
        overflow: hidden;
    }
</style>
<body>
    <div class="div">
    </div>
</body>

</html>

然后就是画两个半圆了,这里要注意了,圆的四个边框,是这样的
QQ截图20190612202030.png

所以我们在做半圆动画时要给一个初始角度,让他们横过来

    .div {
        width: 400px;
        height: 400px;
        margin: 400px auto;
        /* 一定要记得加上相对定位 */
        position: relative;
        left: 200px;
    }

    .div::before {
        content: '';
        display: block;
        width: 0px;
        height: 0px;
        border-radius: 50%;
        border: 50px solid yellow;
        border-right: 50px solid transparent;
        border-top: 50px solid transparent;
        position: relative;
        top: 10px;
        animation: changeb 1s linear 0s infinite;
    }

    .div::after {
        content: '';
        display: block;
        width: 0px;
        height: 0px;
        border-radius: 50%;
        border-top: 50px solid yellow;
        border-right: 50px solid yellow;
        border-left: 50px solid transparent;
        border-bottom: 50px solid transparent;
        position: absolute;
        top: 10px;
        animation: changea 1s linear 0s infinite;
    }

    @keyframes changea {
        0% {
            transform: rotate(-45deg)
        }
        50% {
            transform: rotate(-90deg)
        }
        100% {
            transform: rotate(-45deg)
        }
    }

    @keyframes changeb {
        0% {
            transform: rotate(-45deg)
        }
        50% {
            transform: rotate(0deg)
        }
        100% {
            transform: rotate(-45deg)
        }
    }

最后就是我们的豆豆了,这里我用一种投机取巧的方法来实现,那就是

添加背景图!


    .div {
        width: 400px;
        height: 400px;
        margin: 400px auto;
        background: url("dian.png") repeat-x;
        background-position-y: 45px;
        position: relative;
        left: 200px;
        animation: change 1s linear 0s infinite;
        overflow: hidden;
    }

    @keyframes change {
        0% {
            background-position-x: 0px;
        }
        100% {
            background-position-x: -30px;
        }
    }

我自己用ps做了个PNG的豆豆,然后循环移动背景图的位置,实现了这个效果。(突然觉得自己好机智)

咳......其实还有一种方法,那就是通过CSS3的边框阴影实现,这里就不演示了(嗯。。。懒得调数值了)

代码赠上,掰掰

附件:css3吃豆人.zip

微信扫一扫,向我赞赏

微信扫一扫,向我赞赏

微信扫一扫,向我赞赏

支付宝扫一扫,向我赞赏

回复

This is just a placeholder img.