动画

来源：互联网发布：js表单验证表示时间编辑：程序博客网时间：2024/06/08 04:28
写着玩
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>text</title></head><style>    body,    html {        background-color: #171717;    }    .box2 {        width: 200px;        height: 200px;        background-image: url("../../image/736x414.jpg");        position: relative;        border-radius: 100%;        background-repeat: no-repeat;        background-position: center;    }    .box2:hover {        background-image: none;    }    .box2:hover .body2 {        width: 200px;        height: 200px;        background-image: url("../../image/568x320.jpg");    }    .body2 {        width: 0;        height: 0;        position: absolute;        top: 50%;        left: 50%;        transform: translate(-50%, -50%);        transition: .6s;        background-size: 100px;        background-color: #ccc;        background-repeat: no-repeat;        background-position: center;        border-radius: 100%;    }    .box3 {        width: 200px;        height: 200px;        background-color: #ccc;        border-radius: 50%;        transition: .6s;        animation: mymove 2s infinite;    }    @keyframes mymove {        0% {            transform: scale(0);        }        100% {            transform: scale(1);        }    }    @keyframes animation {        0% {            transform: scale(0) translate(-100px, -100px);        }        100% {            transform: scale(1) translate(0, 0);        }    }    /*出现后身体晃动*/    @keyframes fock {        0% {            transform: rotate(1deg) translate(5px, 5px);        }        25% {            transform: rotate(0deg) translate(0px, 0px);        }        50% {            transform: rotate(-1deg) translate(-5px, -5px);        }        75% {            transform: rotate(0deg) translate(0px, 0px);        }        100% {            transform: rotate(1deg) translate(5px, 5px);        }    }    /*眨眼睛*/    @keyframes eye {        0% {        }        5% {            height: 0;        }        6% {            height: 23px;        }        100% {        }    }    /*嘴动*/    @keyframes mouth1 {        0% {            border-radius: 0 0 0 50px;        }        50% {            border-radius: 0 0 0 25px;        }        100% {            border-radius: 0 0 0 5px;        }    }    @keyframes mouth2 {        0% {            border-radius: 0 0 50px 0;        }        50% {            border-radius: 0 0 25px 0;        }        100% {            border-radius: 0 0 5px 0;        }    }    .box {        background-color: #0098bb;        height: 150px;        width: 200px;        margin: 30px auto;        border-radius: 60% 60% 70% 70%;        position: relative;        transform-style: preserve-3d;        animation: animation 1.4s linear, fock 1s 1.6s linear infinite;    }    .box .bbq {        width: 20px;        height: 23px;        background-color: #171717;        position: absolute;        top: 35%;        border-radius: 60%;        animation: eye 6s 3s linear infinite;    }    .box .eye-Fl {        left: 20%;        transform: rotate(-30deg);    }    .box .eye-Fr {        right: 20%;        transform: rotate(30deg);    }    .box .mouth {        width: 40px;        height: 2px;        margin: 0 auto;        position: absolute;        bottom: 19%;        left: 40%;    }    .box .mouth:before, .box .mouth:after {        position: absolute;        content: '';        border-bottom: 5px solid #0A0A0A;        bottom: 19%;        width: 50px;        height: 17px;    }    .box .mouth:before {        border-radius: 0 0 0 50px;        left: -18px;        animation: mouth1 3s 1s linear infinite;    }    .box .mouth:after {        border-radius: 0 0 50px 0;        right: -18px;        animation: mouth2 3s 1s linear infinite;    }    /*苹果*/    .apple {        width: 200px;        height: 100px;        border-radius: 20px;        background: #669;        position: relative;    }    .apple:after {        content: "";        border-bottom: 30px solid #669;        border-radius: 0 0 0 200px;        width: 50px;        height: 50px;        margin-top: 20px;        transform: rotate(-90deg);        position: absolute;        top: 50px;    }    .heart {        width: 160px;        height: 200px;        position: relative    }    .heart:before {        content: " ";        border: 0 solid transparent;        -moz-border-radius: 100px;        -webkit-border-radius: 100px;        border-radius: 100px 100px 0 0;        width: 80px;        height: 120px;        background: #669;        -moz-transform: rotate(-45deg);        -ms-transform: rotate(-45deg);        -o-transform: rotate(-45deg);        -webkit-transform: rotate(-45deg);        position: absolute;        left: 20px;    }    .heart:after {        content: " ";        border: 0 solid transparent;        -moz-border-radius: 100px;        -webkit-border-radius: 100px;        border-radius: 100px 100px 0 0;        width: 80px;        height: 120px;        background: #669;        -moz-transform: rotate(45deg);        -ms-transform: rotate(45deg);        -o-transform: rotate(45deg);        -webkit-transform: rotate(45deg);        position: absolute;        left: 48px;        top: 0px;    }</style><body><div class="apple"></div><div class="heart"></div><div class="box">    <!--眼睛-->    <div class="eye-Fl bbq"></div>    <div class="eye-Fr bbq"></div>    <!--嘴-->    <div class="mouth"></div></div><div class="box2">    <div class="body2"></div></div><div class="box3">    <div class="body3"></div></div></body></html>
0 0