Html mootools中的剪刀效应
我正在尝试在mootools中创建剪刀效果，到目前为止，我已经能够实现一半的效果 index.htmlHtml mootools中的剪刀效应,html,css,mootools,Html,Css,Mootools,我正在尝试在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)'
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? </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;
}
window.addEvent（'domready'，function（）{
事件=[{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:'旋转（90度）缩放（1,1）倾斜（0,0）平移（100100）}，
{transform:'rotate（-10deg）}，
{transform:'旋转（0）}，
{transform:'旋转（90度）缩放（1,1）倾斜（0,0）平移（100100）}，
{变换：'旋转（10度）}，
{变换：'旋转（0度）}
];
$（'triangle'）.addEvent（'mouseenter'，function（）{
document.getElements（'.down triangle'）。每个（函数（el）{
el.set（'tween'，{duration:1000，link:'chain'}）.addEvent（'domready'，function（）{
this.get（'tween'）.cancel（）。
开始（'transform'，'rotate（0'），事件[2]。转换）。
开始（'transform'，事件[3].transform）.s
})
})
document.getElements（'.upTriangle'）。每个（函数（el）{
el.set（'tween'，{duration:1000，link:'chain'}）.addEvent（'domready'，function（）{
this.get（'tween'）.cancel（）。
开始（'transform'，'rotate（0'），事件[5]。转换）。
开始（'transform'，事件[6].transform）.s
})
})
});
});
需要一个网站吗
样式表
#蓝盒子{
高度：200px；
宽度：200px；
边框：12px实心#000；
边界半径：500px；
边缘顶部：100px；
左边距：800px；
-webkit转换：-webkit转换550ms；
-moz变换：moz变换550ms；
转换：转换550ms；
光标：指针；
}
.noshow{显示：无；颜色：#fff；}
#蓝盒子：悬停{
高度：200px；
宽度：200px；
背景：黑色；
-webkit转换：比例（1.4）；
-moz过渡：比例（1.4）；
转换：比例（1.4）；
z指数：20；
}
#bluebox:hover.noshow{display:inline；}
#蓝盒子1{
高度：200px；
宽度：200px；
边框：12px实心#000；
边界半径：500px；
边际上限：0px；
左边距：800px；
-webkit转换：-webkit转换550ms；
-moz变换：moz变换550ms；
转换：转换550ms；
光标：指针；
}
#蓝盒子1：悬停{
高度：200px；
宽度：200px；
背景：#000；
-webkit转换：比例（1.4）；
-moz过渡：比例（1.4）；
转换：比例（1.4）；
}
#三角{
宽度：1px；
高度：1px；
}
#上三角{
宽度：0px；
高度：0px；
边框底部：120px纯黑；
左边框：300px实心透明；
右边框：300px实心透明；
边缘顶部：-345px；
左边距：300px；
光标：指针；
}
#下三角{
宽度：0；
身高：0；
边框顶部：120px纯黑；
左边框：300px实心透明；
右边框：300px实心透明；
左边距：300px；
页边距顶部：2px；光标：指针；
}
我想达到这个效果。我该怎么做呢？你能用你的代码来调整这把小提琴吗？我看还没有动画片。。。你让它工作了还是仍然需要帮助？