本文共 10747 字，大约阅读时间需要 35 分钟。

展示效果：

截图展示：

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，来自计算机爱好者川川。

转载地址：https://chuanchuan.blog.csdn.net/article/details/117955590 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！