展示效果：
dong
截图展示：
部分代码：（主要是太多了，贴下去读者看不下去了）
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1, initial-scale=1.0" /> <title>川川动态图片生成</title> <meta name="description" content="让你的照片动起来" /> <meta property="og:type" content="website" /> <meta property="og:title" content="让你的照片动起来" /> <meta property="og:description" content="来试试吧" /> <link rel="stylesheet" media="all" href="static/css/main.css"/> <script type="text/javascript" src="static/js/jquery.min.js"></script> <script type="text/javascript" src="static/js/jquery-ui.min.js"></script> <script type="text/javascript" src="static/js/exif.min.js"></script> <script type="text/javascript" src="static/js/make.js"></script> <script type="text/javascript" src="static/js/nod.js"></script> <script async src="static/js/f241c62b799d461fb473e84db951ea21.js"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-112287779-1'); </script> </head> <body> <div id="main-wrap"> <div id="page-01-instructions"> <div class="label--make_instruction"></div> <a class="button select-image" href="#"><img src="static/picture/icon-camera.svg" alt="Camera icon"> <span class="label--take_photo"></span></a> </div> <form class="hidden"> <input id="import-image" type="file" accept="image/*" /> </form> <img id="face-image" src="" style="display: none;" /> <div id="page-02-03-make"> <canvas id="make-canvas" width="768" height="1024"> </canvas> <div id="page-02-transform-image"> <div class="guides"> <div class="instruction" id="instruction-2"> <span class="label--head_width"></span> </div> <div class="instruction" id="instruction-3"> <span class="label--jawline"></span> </div> </div> <div id="scale-and-rotate-desktop"> <span class="label--scale_and_rotate"></span> </div> <form> <input type="submit" class="label--switch_image select-image"><input type="submit" class="label--next next"> </form> </div> <div id="page-03-mark-image"> <div class="zoomed"> <canvas id="zoomed-canvas" width="768" height="1024"> </canvas> <div class="marker"> </div> </div> <div class="markers"> <div class="eye left"> </div> <div class="eye right"> </div> <div class="mouth left"> </div> <div class="mouth center"> </div> <div class="mouth right"> </div> </div> <form> <input type="submit" class="label--transform_image back"><input type="submit" class="label--go next"> </form> </div> <div class="instruction" id="instruction-1"> </div> <span id="output"></span> </div> <div id="page-04-nod"> <div class="dialog name-dialog"> <a href="#" class="close"><img src="static/picture/icon-close.svg" alt="Close icon"></a> <h2 class="label--name_of_person"></h2> <input id="name-input" name="name-input" value> <input type="submit" class="label--save_and_share next-2"> </div> <canvas id="nod-canvas" width="768" height="1024"> </canvas> <audio id="the-song" loop> <source id="the-song-source" src="nod-to-the-rhythm.mp3"> </audio> <form> <input type="submit" class="label--edit back"><input type="submit" class="label--save_and_share next" disabled="disabled"> </form> </div> </div> </body> </html> <!--需要完整文件加群970353786自行到前端文件价下载即可-->
main.css:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, form, label, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; }
recet.css
@import url("reset.css");.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}.heading-font,h1,h2,h3,h4,h5{font-size:inherit}div{box-sizing:border-box}a{color:#ff0078}.hidden{display:none}input[type=submit],.button,#page-02-transform-image #scale-and-rotate-desktop{background-color:#ff0078;border:none;height:38px;padding:2px 0 0;font-size:12px;letter-spacing:.02em;width:50%;border-radius:0;cursor:pointer;font-family:"Palatino Linotype", "Book Antiqua", "Palatino", serif;text-transform:uppercase;color:white}input[type=submit]:not(.spotify),.button:not(.spotify),#page-02-transform-image #scale-and-rotate-desktop:not(.spotify){background:radial-gradient(#6c7a9c 50%, #3a4e77 100%)}input[type=submit]:not(.spotify):not(.share),.button:not(.spotify):not(.share),#page-02-transform-image #scale-and-rotate-desktop:not(.spotify):not(.share){-webkit-animation:filter-animation 15s infinite;animation:filter-animation 15s infinite}input[type=submit].spotify,.button.spotify,#page-02-transform-image .spotify#scale-and-rotate-desktop{background:radial-gradient(#1db954 40%, #3e5847 100%)}input[type=submit].spotify img,.button.spotify img,#page-02-transform-image .spotify#scale-and-rotate-desktop img{width:19px;height:19px;vertical-align:-5px}input[type=submit].share img,.button.share img,#page-02-transform-image .share#scale-and-rotate-desktop img{vertical-align:-2px}input[type=submit]:last-child:not(.share),.button:last-child:not(.share),#page-02-transform-image #scale-and-rotate-desktop:last-child:not(.share){background:radial-gradient(#e15e9c 50%, #ff0078 100%)}input[type=submit]:hover,.button:hover,#page-02-transform-image #scale-and-rotate-desktop:hover{color:black;background:radial-gradient(#f4e5d4 20%, #ea6 100%) !important}input[type=submit]:hover img,.button:hover img,#page-02-transform-image #scale-and-rotate-desktop:hover img{-webkit-filter:brightness(0);filter:brightness(0)}.button,#page-02-transform-image #scale-and-rotate-desktop{display:inline-block;box-sizing:border-box;line-height:22px;padding:9px 0 0;text-decoration:none}.button img,#page-02-transform-image #scale-and-rotate-desktop img{vertical-align:-1px}.buttons .button,.buttons #page-02-transform-image #scale-and-rotate-desktop,#page-02-transform-image .buttons #scale-and-rotate-desktop{width:45%}.buttons .button:last-child,.buttons #page-02-transform-image #scale-and-rotate-desktop:last-child,#page-02-transform-image .buttons #scale-and-rotate-desktop:last-child{width:10%}body{text-align:center;background-color:#1a001a}#main-wrap{width:360px;height:518px;display:inline-block;background-color:#1a001a}#make-canvas,#nod-canvas{display:block;width:100%;height:calc(100% - 38px);background:#1a001a}.dialog{display:none;position:absolute;margin:10%;top:0;left:0;width:80%;background-color:rgba(20,0,20,0.9);padding:10px 10px 20px 10px;color:white}.dialog a.close{float:right}.dialog a.close img{width:30px;height:30px}.dialog h2{clear:both;text-transform:uppercase}.dialog p{text-align:left;font-size:17px;line-height:1.3em;margin:18px 8%}.dialog a.button,.dialog #page-02-transform-image a#scale-and-rotate-desktop,#page-02-transform-image .dialog a#scale-and-rotate-desktop{margin-bottom:10px}.dialog input,.dialog a.button,.dialog #page-02-transform-image a#scale-and-rotate-desktop,#page-02-transform-image .dialog a#scale-and-rotate-desktop{width:84%;max-width:280px}.dialog input{background-color:transparent;color:white;border:1px solid #888;font-size:12px;font-family:"Palatino Linotype", "Book Antiqua", "Palatino", serif;padding:5px 11px;font-weight:normal !important;text-align:center;box-sizing:border-box;margin-bottom:10px}.dialog hr{margin:10px 8% 20px;border:none;background-color:#aaa;height:1px}#page-00-nod{position:relative}#page-00-nod a.info{position:absolute;top:5px;left:5px;padding:10px;-webkit-tap-highlight-color:rgba(255,255,255,0)}#page-00-nod a.info img{width:20px;height:20px}#page-00-nod div.play{position:absolute;left:50%;top:50%;margin-top:-50px;margin-left:-50px;opacity:0;pointer-events:none}#page-00-nod div.swipe{display:none;position:absolute;width:100%;left:0;bottom:50px;margin-top:-50px;pointer-events:none;font-family:sans-serif;font-size:1.6vh;color:white;text-align:center;text-shadow:0 0 2px #000;text-transform:uppercase}#page-00-nod div.swipe img{width:30px;height:30px;vertical-align:-8px}#page-00-nod .info-dialog p img{float:right;border-radius:50%;width:120px;height:120px;margin:15px 0 15px 15px}@media (max-width: 480px){#page-00-nod .info-dialog{margin:5%;width:90%}#page-00-nod .info-dialog p{font-size:13px;line-height:1.5em;margin:10px 5%}#page-00-nod .info-dialog hr{margin:20px 5%}#page-00-nod .info-dialog p img{width:80px;height:80px}}@media (max-width: 360px){#page-00-nod .info-dialog p{font-size:12px}}.lyrics{display:none;position:absolute;margin-top:-2.5vh;top:87%;left:45%;color:#ffffff;text-transform:uppercase;font-family:sans-serif;font-weight:bold;font-size:5vh;opacity:.6}#page-01-instructions{position:relative;width:100%;height:100%;background-color:#303030;background-image:url(../images/example.jpg);background-size:contain;background-position:center bottom}#page-01-instructions img.title{max-width:90%;margin:24px 0 40px;-webkit-animation:filter-animation 15s infinite;animation:filter-animation 15s infinite}#page-01-instructions p,#page-01-instructions li{padding:14px;font-size:18px;color:white;line-height:1.3em;text-shadow:0 0 4px #000}#page-01-instructions li::before{content:'○';color:#ff0078;margin-right:14px;-webkit-animation:filter-animation 15s infinite;animation:filter-animation 15s infinite}#page-01-instructions ul{margin-top:20px;margin-bottom:40px}#page-01-instructions .button,#page-01-instructions #page-02-transform-image #scale-and-rotate-desktop,#page-02-transform-image #page-01-instructions #scale-and-rotate-desktop{display:inline-block;width:auto;font-size:18px;padding:14px 22px;height:auto;letter-spacing:0}#page-01-instructions .button img,#page-01-instructions #page-02-transform-image #scale-and-rotate-desktop img,#page-02-transform-image #page-01-instructions #scale-and-rotate-desktop img{width:18px;height:18px;vertical-align:-2.5px}@-webkit-keyframes filter-animation{0%{-webkit-filter:hue-rotate(360deg)}100%{-webkit-filter:hue-rotate(0deg)}}@keyframes filter-animation{0%{filter:hue-rotate(360deg)}100%{filter:hue-rotate(0deg)}}@media (min-height: 590px){#page-01-instructions img.title{margin-bottom:calc(100vh - 550px)}}#page-02-03-make{display:none;position:relative;width:100%;height:100%}#page-02-03-make #make-canvas{width:100%;height:calc(100% - 38px);cursor:move}#page-02-03-make .instruction{font-family:sans-serif;font-size:1.8vh;position:absolute;width:100%;top:3%;text-transform:uppercase;text-align:center;color:white;text-shadow:0 0 2px #d80e0e;padding:0 21%}#page-02-03-make .instruction#instruction-2{top:20.5%}#page-02-03-make .instruction#instruction-3{top:86%}#page-02-transform-image .guides{position:absolute;left:0px;top:0px;width:100%;height:calc(100% - 38px);background-image:url(../images/guide.png);background-size:100% 100%;opacity:1;pointer-events:none}#page-02-transform-image #scale-and-rotate-desktop{position:absolute;left:62%;top:79%;width:180px;cursor:move}#page-03-mark-image{display:none}#page-03-mark-image .markers{position:absolute;left:0px;top:0px;width:100%;height:calc(100% - 38px)}#page-03-mark-image .markers div{position:absolute;background-size:100% 100%;cursor:move;opacity:.66}#page-03-mark-image .markers div.eye{background-image:url(../images/handle-eye.png);width:14%;margin-left:-7%;height:5.25%;margin-top:-3.5%;top:43%}#page-03-mark-image .markers div.eye.left{left:35%}#page-03-mark-image .markers div.eye.right{left:65%}#page-03-mark-image .markers div.mouth{background-image:url(../images/handle.png);background-size:50% 50%;background-repeat:no-repeat;background-position:center center;top:65%}#page-03-mark-image .markers div.mouth.left,#page-03-mark-image .markers div.mouth.right{width:10%;margin-left:-5%;height:7.5%;margin-top:-5%}#page-03-mark-image .markers div.mouth.left{left:40%}#page-03-mark-image .markers div.mouth.center{width:12%;margin-left:-6%;height:9%;margin-top:-6%;left:50%}#page-03-mark-image .markers div.mouth.right{left:60%}#page-03-mark-image .zoomed{position:absolute;width:80%;margin-left:-40%;height:38%;border-radius:50%;left:50%;top:-10%;overflow:hidden;box-shadow:5px 5px 20px rgba(0,0,0,0.5);border:2px solid white;transition:opacity .15s;opacity:0}#page-03-mark-image .zoomed .marker{position:absolute;background-size:100% 100%;background-repeat:no-repeat;background-position:center center;opacity:.5;top:60%;left:50%}#page-04-nod{display:none;position:relative}#page-04-nod #name-input{font-size:150%;margin-top:10px}#page-04-nod input.next-2{border:0} <!--需要完整文件加群970353786自行到前端文件价下载即可-->
由于文件没法贴上来，暂时分享到这。具体效果可看上面的演示。交流群970353786，来自计算机爱好者川川。
