<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"/> <title>cursor-monster</title> <style> /*Global------------------------------------------------*/ /*谷歌字体*/ @import url(http://fonts.googleapis.com/css?family=Slackey); html{ font:62.5%/1 "Droid Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; background: #d9e4f1 url('http://www.tofei.cc/comments/25_cursor-monster/simurai/bg.jpg') no-repeat center center; } html,body{ height: 100%; } body{ margin: 0; text-align: center; } @media only screen and(max-width: 480px){ body{ -webkit-text-size-adjust: 100%; /*关闭字体放大缩小的功能,Phone 和 Android 的浏览 器纵向 (Portrate mode) 和橫向 (Landscape mode) 模式皆有自动调整字体大小 的功能。控制它的就是 CSS 中的 -webkit-text-size-adjust。支持性不好 ，现在已经用<meta name="viewport" content="width=device-width,initial-scale=1"/>解决*/ } } /*Header------------------------------------------------*/ header{ padding-top: 80px; } header h1{ display: inline-block; text-transform: uppercase;/*定义文字大小写*/ text-shadow: rgba(255, 255, 255, 0.6) 0 1px 0; font: 3.5em/1.3em "slackey","Droid Sans", sans-serif;/*3.5em/1.3em字体大小/行高*/ } header>h1>span{ display: block; font-size: 1.25em; } /*#wrapper--------------------------------------------------*/ #wrapper{ z-index: 11; position: absolute; top: 50%; left: 50%; width: 200px; height: 240px; margin: -120px 0 0 -100px; } #wrapper:after{/*shadow*/ content: ""; z-index: -1; position: absolute; width: 100px; height: 100px; border-radius: 50px; top: -50px; left: 100px; -webkit-box-shadow: hsla(210,0%,0%,.8) 0 200px 100px 1px; box-shadow: hsla(210,0%,0%,.8) 0 200px 100px 1px; } /*#monster--------------------------------------------------*/ #monster{ width:100%; height: 100%; position: relative; border-radius: 100px 100px 50px 50px/160px 160px 80px 80px; /*水平半径/垂直半径http://www.cnblogs.com/mofish/p/3832136.html*/ background: #5e97ed; background-image: -webkit-gradient(radial, 50% 8%, 0, 50% 40%, 120, color-stop( 0, rgba(255,255,255,.8) ), color-stop(.8, rgba(255,255,255, 0) ), color-stop(.8, rgba(0,0,0, 0) ), color-stop( 1, rgba(0,0,0,.33) )), url(http://www.tofei.cc/comments/25_cursor-monster/simurai/noise.png); background-image: radial-gradient(circle farthest-corner at 50% 14%, rgba(255,255,255,.8) 0%, rgba(255,255,255, 0) 60%, rgba(0,0,0, 0) 60%, rgba(0,0,0,.33) 100% ),url(http://www.tofei.cc/comments/25_cursor-monster/simurai/noise.png); -webkit-box-shadow: inset rgba(0, 0, 0, .5) 0 -10px 50px; box-shadow: inset rgba(0, 0, 0, .5) 0 -10px 50px; -webkit-transform-origin: bottom; -moz-transform-origin: bottom; -ms-transform-origin: bottom; -o-transform-origin: bottom; transform-origin: bottom; -webkit-box-reflect: below -3px -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, color-stop(0.6, rgba(0,0,0,.2) ), to( transparent )); -webkit-transform: scale3d(1,1,1); -ms-transform: scale3d(1,1,1); -o-transform: scale3d(1,1,1); transform: scale3d(1,1,1); -webkit-transition: background-color .5s ease-out; -o-transition: background-color .5s ease-out; transition: background-color .5s ease-out; } /*Eyes---------------------------------------------------*/ .eye{ position: relative; width: 60px; height: 40px; margin: 0 auto 5px auto; top: 15%; border-radius: 60px/40px; background-color: #eee; -webkit-box-shadow: inset rgba(0,0,0,.4) 0 -1px 3px 1px,inset rgba(0,0,0,.5) 0 -5px 20px, rgba(0,0,0,.5) 0 -5px 10px ,rgba(255,255,255,.5) 0 5px 10px; box-shadow: inset rgba(0,0,0,.4) 0 -1px 3px 1px,inset rgba(0,0,0,.5) 0 -5px 20px, rgba(0,0,0,.5) 0 -5px 10px ,rgba(255,255,255,.5) 0 5px 10px; background-repeat: no-repeat; background-image: -webkit-gradient(radial,50% 50%,0,50% 50%,40, color-stop(.12,rgba(0,0,0,1)), color-stop(.22, hsl(190,50%,50%) ), color-stop(.4, hsl(200,50%,30%) ), color-stop(.5, rgba(255,255,255,0) ) ); background-image:radial-gradient(circle farthest-corner at 50% 50%, rgba(0,0,0,1) 12%, hsl(190,50%,50%) 22%, hsl(200,50%,30%) 40%, rgba(255,255,255,0) 50%); } /*highlight*/ .eye:before{ content: ""; position: absolute; top: 20%; left: 32%; border-radius: 5px; width: 10px; height: 10px; background-color: #fff; -webkit-transform: skewX(-10deg); -ms-transform: skewX(-10deg); -o-transform: skewX(-10deg); transform: skewX(-10deg); } #monster .eye:first-child { -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -o-transform: scale(0.6); transform: scale(0.6); } .eye .lid{ position: absolute; border-radius: inherit; height: inherit; width: inherit; background-color: rgba(94,151,237,0.8); -webkit-box-shadow: inset rgba(0,0,0,.2) 0 -1px 3px 1px,inset rgba(0,0,0,.5) 0 -5px 20px ,rgba(0,0,0,.6) 0 1px 2px; box-shadow: inset rgba(0,0,0,.2) 0 -1px 3px 1px,inset rgba(0,0,0,.5) 0 -5px 20px ,rgba(0,0,0,.6) 0 1px 2px; background-image: -webkit-gradient(radial ,50% 10%, 0, 50% 30%,40, color-stop(0,rgba(255,255,255,.8)), color-stop(.8,rgba(255,255,255,0)), color-stop(.8,rgba(0,0,0,0)), color-stop(1,rgba(0,0,0,.33))), url(http://www.tofei.cc/comments/25_cursor-monster/simurai/noise.png); /*眼皮 遮罩*/ -webkit-mask-repeat: no-repeat; -webkit-mask-position: 0px 0px; -webkit-mask-image:-webkit-gradient(radial, 50% 120%, 20, 50% 120%, 50, color-stop(.5, rgba(0,0,0,0)), color-stop(.6, rgba(0,0,0,1)) ); -webkit-transform: translate3d(0, 0, 0);/*硬件加速*/ } /*Mouth----------------------------------*/ #mouth{ position: relative; width: 100px; height: 20px; margin: 0 auto; top: 25%; overflow: hidden; border-radius: 100px 100px 50px 50px/60px 60px 80px 80px; background-color: #111; -webkit-box-shadow: inset rgba(0,0,0,.7) 0 -2px 10px 1px ,rgba(0,0,0,.7) 0 -5px 10px ,rgba(255,255,255,.7) 0 5px 10px; box-shadow: inset rgba(0,0,0,.7) 0 -2px 10px 1px ,rgba(0,0,0,.7) 0 -5px 10px ,rgba(255,255,255,.7) 0 5px 10px; /*tongue舌头*/ background-repeat: no-repeat; background-position: center 85%; -webkit-background-size: 100px; background-size: 100px; background-image: -webkit-gradient(radial,62% 100%,0,62% 100%,50, color-stop(.3,rgba(255,0,0,1)), color-stop(.5,rgba(255,0,0,0))), -webkit-gradient(radial,38% 100%,0,38% 100%,50, color-stop(.3,rgba(255,0,0,1)), color-stop(.5,rgba(255,0,0,0))); background-image: radial-gradient(circle farthest-corner at 62% 100%,rgba(255, 0, 0, 1) 22%,rgba(255, 0, 0, 0) 40% ), radial-gradient(circle farthest-corner at 38% 100%,rgba(255, 0, 0, 1) 22%,rgba(255, 0, 0, 0) 40% ) } #mouth:before{/*teeth牙齿*/ content: ''; position: absolute; top: 0; left: 0; right: 0; width: 30px; height: 10px; margin: 0 auto; border-radius: 0px 0px 4px 4px; background-color: #fff9e4; -webkit-background-size: 50%; background-size: 50%; background-image: -webkit-gradient(linear,0% 0%,100% 0%, color-stop(0,rgba(0,0,0,0.4)), color-stop(.1,rgba(0,0,0,0)), color-stop(.9,rgba(0,0,0,0)), color-stop(1,rgba(0,0,0,0.4)) ); background-image: linear-gradient(to right, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,.4) 100% );/*background repeat牙缝*/ -webkit-box-shadow: inset rgba(0,0,0,.8) 0 2px 5px 1px; box-shadow: inset rgba(0,0,0,.8) 0 2px 5px 1px; -webkit-transform: perspective(50) translate3d(0, 0, 5px) rotateX(-40deg);/*perspective三维透视*/ } /*states-------------------------*/ /*sleep*/ .sleep .eye{ background-position: 0 -40px; } .sleep .lid{ -webkit-mask-image:-webkit-gradient(radial, 50% 200%, 20, 50% 200%, 50, color-stop(.5, rgba(0,0,0,0)), color-stop(.6, rgba(0,0,0,1)) ); } .sleep #mouth{ height: 50px; background-position: center bottom; animation: sleep-mouth 2.5s infinite alternate cubic-bezier(.3,0,.5,1); } .sleep #monster{ animation: sleep-monster 2.5s infinite alternate cubic-bezier(.3,0,.5,1); } @-webkit-keyframes sleep-mouth{ 100%{ -webkit-transform: scale3d(1.04, 1.05, 1); } } @-webkit-keyframes sleep-monster{ 100%{ -webkit-transform: scale3d(1.08, .92, 1); } } /*hungry*/ .hungry #mouth.out{ -webkit-transition: height .3s cubic-bezier(0,0.6,0.2,1); -o-transition: height .3s cubic-bezier(0,0.6,0.2,1); transition: height .3s cubic-bezier(0,0.6,0.2,1); } .hungry .lib{/*不支持遮罩的浏览器隐藏眼皮*/ -ms-transform: scaleY(0); -o-transform: scaleY(0); } .hungry #monster{ animation: hungry-monster .3s 1 cubic-bezier(.4,.1,.2,1); } @-webkit-keyframes hungry-monster{ 20%{ -webkit-transform: scale(.8, 1.1); } 100%{ -webkit-transform: scale(1, 1); } } /*eat*/ .eat #monster{ background-color:#f932a5; animation: eat-swallow-monster .3s 1 cubic-bezier(.4,.1,.2,1), eat-monster .6s .3s infinite alternate cubic-bezier(.5,.1,.5,.9); } .eat .eye:first-child{ animation: eat-eye-first .6s infinite cubic-bezier(0,.6,1,.4); } .eat .eye:nth-child(2){ animation: eat-eye-second .6s infinite cubic-bezier(0,.6,1,.4); } .eat .lid{ display: none; } .eat #mouth{ height: 2px; border-radius: 0px 0px 500px 500px/0px 0px 60px 60px; box-shadow: inset rgba(0, 0, 0, .7) 0 -2px 10px 1px, rgba(0, 0, 0, .7) 0 -2px 10px 2px, rgba(255, 255, 255,.7) 0 2px 6px 2px; background-position: center 0px; animation: eat-mounth .2s infinite alternate cubic-bezier(.5,.1,.5,.9); } .eat #mouth:before { display: none; } #wrapper.eat { -webkit-transform: scale3d(1.08, 1.08, 1); -moz-transform: scale(1.08, 1.08); -o-transform: scale(1.08, 1.08); transform: scale(1.08, 1.08); -webkit-transition: -webkit-transform .1s cubic-bezier(.1, .3, 0, 1); -moz-transition: -moz-transform .1s cubic-bezier(.1, .3, 0, 1); -o-transition: -o-transform .1s cubic-bezier(.1, .3, 0, 1); transition: transform .1s cubic-bezier(.1, .3, 0, 1); } @-webkit-keyframes eat-swallow-monster{ 20%{ -webkit-transform: scale3d(1.2, .9, 1); }100%{ -webkit-transform: scale3d(1, 1, 1); } } @keyframes eat-swallow-monster{ 20%{ transform: scale3d(1.2, .9, 1); }100%{ transform: scale3d(1, 1, 1); } } @-webkit-keyframes eat-monster{ 100%{ -webkit-transform: scale3d(1.08, .92, 1); } } @keyframes eat-monster{ 100%{ transform: scale3d(1.08, .92, 1); } } @-webkit-keyframes eat-eye-first{ 0%{ background-position: 0 -60px; -webkit-transform: scale3d(.6, .6, 1) translate3d(0, -5px, 0) ; } 100%{ background-position: 0 60px; -webkit-transform: scale3d(.8, .8, 1) translate3d(0, 5px, 0) ; } } @keyframes eat-eye-first{ 0%{ background-position: 0 -60px; transform: scale3d(.6, .6, 1) translate3d(0, -5px, 0) ; } 100%{ background-position: 0 60px; transform: scale3d(.8, .8, 1) translate3d(0, 5px, 0) ; } } @-webkit-keyframes eat-eye-second{ 0%{ background-position: 0 60px; -webkit-transform: scale3d(.6, .6, 1) translate3d(0, 0, 0) ; } 100%{ background-position: 0 -60px; -webkit-transform: scale3d(.8, .8, 1) translate3d(0, 0, 0) ; } } @keyframes eat-eye-second{ 0%{ background-position: 0 60px; transform: scale3d(.6, .6, 1) translate3d(0, 0, 0) ; } 100%{ background-position: 0 -60px; transform: scale3d(.8, .8, 1) translate3d(0, 0, 0) ; } } @-webkit-keyframes eat-mounth{ 0%{ -webkit-transform: translateY(10px) ; } 100%{ -webkit-transform: translateY(15px) scale3d(.9, 1.2, 1) ; } } @keyframes eat-mounth{ 0%{ transform: translateY(10px) ; } 100%{ transform: translateY(15px) scale3d(.9, 1.2, 1) ; } } </style> </head> <body> <header> <h1>can haz ur <span>Cursor?</span></h1> </header> <div id="wrapper" class="sleep"> <div id="monster"> <div class="eye"> <div class="lid"></div> </div> <div class="eye"> <div class="lid"></div> </div> <div id="mouth"></div> </div> </div> <audio id="audio-ohh" preload="preload"> <source src="http://www.tofei.cc/comments/25_cursor-monster/simurai/audio/ohh.ogg"/> </audio> <audio id="audio-snap" preload="preload"> <source src="http://www.tofei.cc/comments/25_cursor-monster/simurai/audio/snap.ogg"/> </audio> <script> var status="sleep", mouthOpen=false, count=0; var eye=document.querySelectorAll(".eye"), lid=document.querySelectorAll(".lid"), mouth=document.getElementById("mouth"), wrapper=document.getElementById("wrapper"); function distance(x1,y1,x2,y2){ return Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2)); } function playAudio(id){ try{ var audio=document.getElementById(id); audio.currentTime=0; audio.play(); }catch(e){ console.log(e); } } document.onmousemove=cursorMove; document.onmouseleave=cursorLeave; function cursorMove(ev){ var ev=ev||window.event; //中心的位置 var docW=window.innerWidth, docH=window.innerHeight; var diffX = (docW/2) - ev.clientX; var diffY = (docH/2)-100 - ev.clientY; var distM = distance(docW/2,(docH/2)+60, ev.clientX, ev.clientY); if(status == "sleep"){ if(distM<200){ wrapper.className="hungry"; status = "hungry"; playAudio("audio-ohh"); } }else if(status=="hungry"){ //eye var eye_background = Math.floor( diffX /-30 ) +'px '+ Math.floor( diffY /-30 ) +'px'; var eye_translate = Math.floor(diffX/-50 )+'px, '+ Math.floor(diffY/-100 )+'px'; eye[1].setAttribute("style","background-position:"+eye_background+"; -webkit-transform:translate3d("+eye_translate+",0); -moz-transform:translate("+eye_translate+");"); eye[0].setAttribute("style","background-position:"+eye_background+"; -webkit-transform:translate3d("+eye_translate+",0) scale(.6); -moz-transform:translate("+eye_translate+") scale(.6);"); //eye lid var eye_lid_p = 100+Math.floor( diffY /-20 ); var eye_lid = '-webkit-gradient(radial, 50% '+ eye_lid_p +'%, 20, 50% '+ eye_lid_p +'%, 50, color-stop(.5, rgba(0,0,0,0)), color-stop(.6, rgba(0,0,0,1)))'; lid[0].setAttribute("style", "-webkit-mask-image:"+eye_lid+";" ); lid[1].setAttribute("style", "-webkit-mask-image:"+eye_lid+";" ); //mouth if (distM > 200) { if(mouthOpen) { mouthOpen = false; mouth.className="out"; var mouth_height = "20px"; count = 0; } }else{ var mouth_height = 80 - Math.floor(distM /3)+'px'; if(!mouthOpen) { mouthOpen = true; mouth.className=""; } } var mouth_transform = Math.floor(diffX/-80 )+'px, '+ Math.floor(diffY/-80 )+'px'; mouth.setAttribute("style","height:"+mouth_height+";-webkit-transform:translate3d("+mouth_transform+", 0);-moz-transform:translate("+mouth_transform+");"); if(distM<30&& status != "eat"){ mouth.removeAttribute("style"); document.body.setAttribute("style","cursor:none");//隐藏鼠标 wrapper.className="eat"; status = "eat"; playAudio("audio-snap"); } }else if(status == "eat"){ if(distM>120){ wrapper.className="hungry"; status = "hungry"; playAudio("audio-ohh"); document.body.removeAttribute("style"); } } } function cursorLeave(){ wrapper.className="sleep"; status = "sleep"; eye[0].removeAttribute("style"); eye[1].removeAttribute("style"); lid[0].removeAttribute("style"); lid[1].removeAttribute("style"); mouth.removeAttribute("style"); } </script> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 彪悍的css 喜欢 (2)or分享 (0)
