这段代码哪里错了,照抄运行结果也怎么跟答案不对啊?请帮看看

转载 (原文地址) 826049371 随笔 提问 385阅读 2017-07-06 16:36:15 举报

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<<meta name="name" content="width=device-width,initial-scale=1" />
<title>CSS丧心病狂系列</title>
<style type="text/css">
/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(ttp://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-transition: 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,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%,raba(0,0,0,1) 12% ,hsl(190,50%,50%) 22%,hsl(200,50%,30%) 40%,rgba(255,255,250,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: shewX(-10deg);
    transform: shewX(-10deg);
}

-monster .eye:first-child{
    -webkit-transform: scale(0.6);
    -moz-transfom: 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, 0.2) 0 -1px 3px 1px,inset rgba(0, 0, 0, 0.5) 0 -5px 20px ,rgba(0, 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,3)));
                                        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;

    /*舌头*/
    background-repeat:no-repeat;
    background-position: center 85%;
    -webkit-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,1))),
                                       -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{
    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: 50px;
    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---------------------------*/
/*slee*/
.sleep .eye{
    background-position: 0 -40px;
}
.sleep .lid{
    -webkot-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-mouth 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.5,0.2,1);
    -o-transiton:height .3s cubic-bezier(0,0.6,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(11);
}
}

/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,255,.7) 0 2px 6px 2px;
background-position: center 0px;
animation: eat-mounth .2s infinite alternate cubic-bezier(.5,.1,.5,.9);
}
.eat #moutn: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: scale(1.2.9,1);
}100%{
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-transition: 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,01) ; }
}
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 hza 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"; type="" media="">
</audio>
<audio id="audio-snap" preload="preload">
<source src="http://www.tofei.cc/comments/25_cursor-monster/simurai/audio/snap.ogg"; type="" media="">
</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(en){
var ev=ev||window.event;
//中心的位置
var docW=window.innerWidth,
docH=window.innerWidth;
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[1].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 +'%,50,color-stop(.5,rabe(0,0,0,0)), color-stop(.6, rgba(.6,rgba(255,0,0,1\(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 - false;
            mouth.className="out";
            var mouth_height = "20px";
            count = 0;
            )
    }else{
        var mouth_height = 80 -Math.flor(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-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";
        document.body.removeAttribute("style");
    }
}

}

function cursorLeave(){
wrapper.className="sleep";
status = "sleep";
eye[0].removeAttribute("style");
eye[1].removeAttribute("style");
eye[0].removeAttribute("style");
eye[1].removeAttribute("style");
mouth.removeAttribute("style");
}
</script>
</body>
</html>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复