Question

我试图在mootools中创造剪刀效果，直到现在我已经能够达到一半的效果。

的index.html

window.addEvent('domready', function() {

   events = [{transform: ['rotate(0deg) scale(1, 0) skew(0, 3deg) translate(100px, 50px)', 'rotate(180deg) scale(1.5, 4) skew(0, 3deg) translate(20px, 3px)']},
                    {transform: 'rotate(90deg) scale(1, 1) skew(0,0) translate(100, 100)'},
                    {transform: 'rotate(-10deg)'},
                    {transform: 'rotate(0)'},
                    {transform: 'rotate(90deg) scale(1, 1) skew(0,0) translate(100, 100)'},
                    {transform: 'rotate(10deg)'},
                    {transform: 'rotate(0deg)'}
                ];

        $('triangle').addEvent('mouseenter', function(){ 
        document.getElements('.down-triangle').each(function (el) {

            el.set('tween', {duration: 1000, link: 'chain'}).addEvent('domready', function () {


                this.get('tween').cancel(). 
                start('transform', 'rotate(0)', events[2].transform).
                start('transform', events[3].transform).s
                })

        })

        document.getElements('.up-triangle').each(function (el) {

            el.set('tween', {duration: 1000, link: 'chain'  }).addEvent('domready', function () {


                this.get('tween').cancel(). 
                start('transform', 'rotate(0)', events[5].transform).
                start('transform', events[6].transform).s

            })


        }) 

            });



}); 
</script>
</head>
<body>

<div id="up">
<div id="bluebox" class="bluebox"> 
<div class="noshow">
        <p>Need a website? &nbsp;</p>
    </div>
</div>
</div>

<div id="bluebox1" class="bluebox1">
</div>
<div id="triangle" style="position:fixed;" >
<div id="up-triangle" class="up-triangle"></div>
<div id="down-triangle" class="down-triangle"></div>
</div>
</body>

style.css

#bluebox {
    height:200px;
    width:200px;
    border:12px solid #000;
    border-radius:500px;
    margin-top:100px;
    margin-left:800px;
     -webkit-transition: -webkit-transform 550ms;
     -moz-transition:-moz-transform 550ms;
    transition: transform 550ms;
    cursor:pointer;

}
.noshow{display: none; color:#fff;}
#bluebox:hover{
height:200px;
width:200px;
background:black;
 -webkit-transform: scale(1.4);
 -moz-transition:scale(1.4);
    transform: scale(1.4);
 z-index:20;
}
#bluebox:hover .noshow{display:inline;}
#bluebox1 {
    height:200px;
    width:200px;
   border:12px solid #000;
    border-radius:500px;
    margin-top:0px;
  margin-left:800px;
   -webkit-transition: -webkit-transform 550ms;
     -moz-transition:-moz-transform 550ms;
    transition: transform 550ms;
    cursor:pointer;
}
#bluebox1:hover{
height:200px;
width:200px;
background:#000;
 -webkit-transform: scale(1.4);
 -moz-transition:scale(1.4);
    transform: scale(1.4);
}
#triangle{
 width: 1px; 
   height: 1px; 
}
#up-triangle {
   width: 0px; 
   height: 0px; 
   border-bottom: 120px solid black; 
   border-left: 300px solid transparent; 
   border-right: 300px solid transparent; 
   margin-top:-345px;
   margin-left:300px;
   cursor:pointer;
}

#down-triangle { 
   width: 0; 
   height: 0;
   border-top: 120px solid black;
   border-left: 300px solid transparent; 
   border-right: 300px solid transparent; 
   margin-left:300px;
   margin-top:2px;cursor:pointer;
}

实现的效果是三角形上下移动。但是我想让圆圈随着三角形一起上下移动。我想达到这个效果。我怎么能这样做？

mootools中的剪刀效果

0 个答案: