黑洞效果

Blackhole_anim.html

<!DOCTYPE html>
<html>
<head>
<style> 


@-webkit-keyframes rotates{from{-webkit-transform:rotate(0deg) scale(0)}to{-webkit-transform:rotate(360deg) scale(3.2)}
@-ms-keyframes rotates{from{-ms-transform:rotate(0deg)}to{-ms-transform:rotate(360deg)}}
@-moz-keyframes rotates{from{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(360deg)}}
@-o-keyframes rotates{from{-o-transform:rotate(0deg)}to{-o-transform:rotate(360deg)}}


</style>
</head>
<body>

<img id="hole" src="https://bdaladdin.duapp.com/blackhole/img/blackhole.png" class="ops-blackhole" style="display: block; -webkit-animation: rotates 5s cubic-bezier(0.6,-0.5,0.4,1) 1 forwards; -webkit-animation-play-state: paused; position: fixed; z-index: 302; left: 319px; top: 170.5px; padding: 0px;">

infinite
linear

    cubic-bezier(0.6,-0.5,0.4,1.4)
    
<script>
window.setTimeout(function (){
    showPanel=document.getElementById("hole");
    showPanel.style.webkitAnimationPlayState="paused"
    showPanel.style.webkitAnimationTimingFunction="cubic-bezier(0,0,0.5,1)"
    showPanel.style.webkitAnimationDuration="5s"
        
    document.styleSheets[0].rules[0].deleteRule('0%')
    document.styleSheets[0].rules[0].deleteRule('100%')
    
    document.styleSheets[0].rules[0].appendRule("0% { transform: rotate(360deg) scale(4.2); }")
    document.styleSheets[0].rules[0].appendRule("100% { transform: rotate(0deg) scale(0); }")
    
    showPanel.style.webkitAnimationPlayState="running"

            
    console.log("change")
    
},5000)




document.onmousedown = click

function click(event)
{ 
     var e = event || window.event;
     console.log(e.clientX+'    '+e.clientY)
     console.log((e.clientX-400)+'    '+ (e.clientY-400))
     
     
     showPanel=document.getElementById("hole");
     showPanel.style.left=(e.clientX-400)+"px"
     showPanel.style.top=(e.clientY-400)+"px"
     showPanel.style.webkitAnimationPlayState="running"
}
</script>
</body>
</html>

 

 

update

<!DOCTYPE html>
<html>
<head>
<style> 


@-webkit-keyframes rotates
{
0%   {-webkit-transform:rotate(0deg) scale(0)}
30%  {-webkit-transform:rotate(180deg) scale(1)}
50%  {-webkit-transform:rotate(280deg) scale(2.5)}
70%  {-webkit-transform:rotate(420deg) scale(3)}
100% {-webkit-transform:rotate(720deg) scale(0)}
}
@-ms-keyframes rotates{from{-ms-transform:rotate(0deg)}to{-ms-transform:rotate(360deg)}}
@-moz-keyframes rotates{from{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(360deg)}}
@-o-keyframes rotates{from{-o-transform:rotate(0deg)}to{-o-transform:rotate(360deg)}}


</style>
</head>
<body>
<!-- https://bdaladdin.duapp.com/blackhole/ -->
<img id="hole" src="img/blackhole.png" class="ops-blackhole" style="display: none; -webkit-animation: rotates 2.5s linear infinite forwards; -webkit-animation-play-state: paused; position: fixed; z-index: 302; left: 319px; top: 170.5px; padding: 0px;">

infinite
linear

    cubic-bezier(0.6,-0.5,0.4,1.4)
    
<script>

document.onmousedown = click

function click(event)
{ 
     var e = event || window.event;
     console.log(e.clientX+'    '+e.clientY)
     console.log((e.clientX-400)+'    '+ (e.clientY-400))
     
    showPanel=document.getElementById("hole");
    if(showPanel.style.webkitAnimationPlayState=="paused"){
         showPanel.style.left=(e.clientX-400)+"px"
         showPanel.style.top=(e.clientY-400)+"px"
         showPanel.style.webkitAnimationPlayState="running"
         showPanel.style.display="block"

         var timer = setInterval(function(){
            showPanel.style.webkitAnimationPlayState="paused"
            showPanel.style.display="none"
            clearInterval(timer);
            console.log("in timer")
         },2500);
    }
}
</script>
</body>
</html>

 

posted @ 2016-05-10 11:01  Man_华  阅读(467)  评论(0)  编辑  收藏  举报