CSS2D--吃豆子游戏

来源：互联网发布：java md5 api 编辑：程序博客网时间：2024/05/17 08:18
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .con{width:300px;height:100px;position: relative;}        .con .up,.con .down{position:absolute;width:0;height:0;border-radius:50%;border:50px solid darkcyan;border-top:50px solid transparent;}        .con .up{animation: updhua 1s infinite alternate;}        .con .down{border-top:50px solid darkcyan;border-bottom:50px solid transparent;animation: downdhua 1s infinite alternate;}        .con .red{width:20px;height:20px;border-radius: 50%;background:red;position: absolute;left:350px;top:40px;animation: reddhua 2s infinite;}        @keyframes updhua {            from{                transform: rotate(0deg);            }            to{                transform: rotate(90deg);            }        }        @keyframes downdhua {            from{                transform: rotate(0deg);            }            to{                transform: rotate(-90deg);            }        }        @keyframes reddhua {            from{                left:350px;               opacity: 1;            }            to{                left:40px;                opacity: 0;            }        }    </style></head><body><div class="con">    <div class="up"></div>    <div class="down"></div>    <div class="red"></div></div></body></html>
1 0