TweenMax+snap.svg实现卡通学生看书翻书动画效果代码-html代码-BFW代码库

TweenMax+snap.svg实现卡通学生看书翻书动画效果代码

代码语言：html

所属分类：动画

代码描述：TweenMax+snap.svg实现卡通学生看书翻书动画效果代码

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

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

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

<style>
    body{
    background-color: #192b40;
}
.student{
    width: 400px;
    margin: 4% auto;
    position: relative;
}
.srvc_icon{
    width: 29px;
    position: absolute;
}
.openBookIcon{
    top: 20%;
    right: 0;
}
</style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <div class="student">
        <svg id="student" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 385">
    <circle class="circle" style="display:none;" id="BG" opacity="0.2" cx="200.011" cy="208" r="157.657"/>
    <circle class="circle" style="display:none;" id="dashed" opacity="0.15" fill="none" stroke="#FFFFFF" stroke-width="1.9028" stroke-miterlimit="10" stroke-dasharray="6.5548" cx="200.333" cy="208" r="176.666"/>
    <g id="stud_whole" style="display:none;">
      <g id="stud_body">
        <path fill="#FFFFFF" d="M300,323v-9.401C300,268.536,255.131,232,200.241,232h-1.482
                                C143.869,232,99,268.536,99,313.599V323H300z"/>
        <path fill="#C99877" d="M251.2,240.3l-46.504,46.501c-2.868,2.869-7.521,2.869-10.391,0
                                L147.803,240.3C115.768,254.945,94,282.958,94,315.111V326h211v-10.889C305,282.958,283.232,254.945,251.2,240.3z"/>
        <path opacity="0.2" d="M251.2,240.3l-46.504,46.501c-2.868,2.869-7.521,2.869-10.391,0
                               L147.803,240.3C115.768,254.945,94,282.958,94,315.111V326l0,0c0-31.997,21.801-60.071,53.8-74.7l46.503,46.498
                               c2.869,2.872,7.522,2.872,10.392,0.001l46.505-46.499C283.197,265.93,305,294.003,305,326l0,0v-10.889
                               C305,282.958,283.232,254.945,251.2,240.3z"/>
      </g>
      <g id="stud_head">
        <path fill="#DDA37C" d="M135.934,194.953c-5.481,0-9.926-5.162-9.926-11.53s4.444-11.529,9.926-11.529"/>
        <path opacity="0.1" .........完整代码请登录后点击上方下载按钮下载查看