Question

我的第一篇文章！我一直在做一些实验，试图重新创造我所看到的东西。这是我想要实现的目标：

Scroll at the end of this page and take a look at animated buttons for twitter, youtube, facebook

现在看看我的代码：

HTML

<div class="container">
<div class="letter">A</div>
</div>

CSS

*{
  margin:0;
  padding:0;
}

.container{
width:200px;
height:200px;
background:purple;
overflow:hidden;
}

.letter{
text-align:center;
font-size:50px;
line-height:170px;
color:white;
}

.letter:hover{
cursor:pointer;
}

.letter.zoom{
transform:rotate(15deg) scale(3);
transition: transform 0.6s ease;
}

Jquery的

$(function(){
   $('.container').on('click', function(){
      $('.letter').toggleClass('zoom');
   });
});

现在，如果你运行代码，你会看到字母A，点击它会放大并稍微旋转。以下是我的问题：

1.如何在悬停时使用css3或jquery或javascript进行此操作？（不是onmouseover / onmouseout）

2.如何使渲染更平滑？（字母以较差的分辨率放大，而不是渲染到完整的质量）

3.it在放大时有动画过渡。当它缩小时，没有动画或过渡。在缩小时如何进行动画播放？

我试图单独做放大只是放大，只是旋转，它工作，但如果我想在同一时间做两个，CSS3覆盖一个与另一个，并使用此功能不给我的结果我想。

Answer 1

你可以用CSS做到这一点：

过渡：

.letter {
    transition: ease .25s; // when set on selector itself, will apply to all pseudo-classes such as: :hover, :active, :focus, etc.
    -webkit-transition: ease .25s;
}

缩放：

.letter:hover {
    transform: scale(1.5); // Alternatively, you can use percentages
    -wekbit-transform: scale(1.5); // Chrome / Safari
    -moz-transform: scale(1.5); // Firefox
}

旋转：

.letter:hover {
    transform: rotate(15deg);
    -wekbit-transform: rotate(15deg); // Chrome / Safari
    -moz-transform: rotate(15deg); // Firefox
}

通过平滑过渡放大/缩小并旋转div

1 个答案: