css实现手机摇摆摇晃摇一摇动画效果代码-html代码-BFW代码库

css实现手机摇摆摇晃摇一摇动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现手机摇摆摇晃摇一摇动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta charset="utf-8">

    <style>
        * {
        box-sizing:border-box;
}
body {
        height:100vh;
        display:flex;
        justify-content:center;
        align-items:center;
        overflow:hidden;
        background:#EB4F5C;
}
.rock {
        font-family:'Montserrat',sans-serif;
        font-size:200px;
        margin:0;
        color:#D4304B;
        position:absolute;
        left:50%;
        top:50%;
        -webkit-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%);
}
.hand {
        position:relative;
        width:100px;
        height:100px;
        -webkit-animation:rockit .8s ease infinite alternate;
        animation:rockit .8s ease infinite alternate;
}
.palm {
        width:125px;
        height:140px;
        background:#FEDCCA;
        -webkit-transform:rotate(26deg);
        transform:rotate(26deg);
        box-shadow:inset 0 0 50px #E77F7B;
}
.palm:after {
        content:'';
        background:#F2ADA1;
        width:20px;
        height:30px;
        border-radius:0 0 0 100% / 50%;
        position:absolute;
        left:-20px;
        bottom:25px;
        z-index:5;
}
.palm:before {
        content:'';
        background-image:linear-gradient(-180deg,#E56C4C 0,#F68E60 100%);
        width:100%;
        height:30px;
        border-radius:50%;
        position:absolute;
        left:0;
        bottom:-15px;
}
.mobile {
        width:260px;
        height:135px;
        background:#FC617E;
        border:4px solid #705674;
        border-width:4px 10px 4px 10px;
        border-radius:20px;
        position:absolute;
        top:-80px;
        left:80%;
        -webkit-transform:rotate(-5deg) translatex(-50%);
        transform:rotate(-5deg) translatex(-50%);
        z-index:1;
        overflow:hidden;
}
.screensaver {
        width:30px;
        height:30px;
        background:transparent;
        border-radius:50%;
        position:absolute;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%);
        box-shadow:0 0 0 30px #eee,0 0 0 50px #D36868,0 0 0 70px #71D368,0 0 0 100px #68CFD3;
        -webkit-animation:screensaver .5s linear infinite;
        animation:screensaver .5s linear infinite;
}
.mobile-shadow {
        width:100px;
        height:50px;
        background:#C7656C;
        position:absolute;
        bottom:30px;
        left:50%;
        -webkit-transform:rotate(-5deg) translatex(-40%);
        transform:rotate(-5deg) translatex(-40%);
        -webkit-filter:blur(10px);
        filter:blur(10px);
}
.finger {
        position:absolute;
        width:45px;
        background:#FEDCCA;
        bor.........完整代码请登录后点击上方下载按钮下载查看