[分享]css3手点击哪里哪里动

CSS3中提供了不少让我们惊艳的新特性，其中之一就是可以通过手点击哪里哪里来实现元素的各种动画效果。这种交互方式，可以让用户更加沉浸在网页中，增强用户体验。.box{ width: 150px; he...

CSS3中提供了不少让我们惊艳的新特性，其中之一就是可以通过手点击哪里哪里来实现元素的各种动画效果。这种交互方式，可以让用户更加沉浸在网页中，增强用户体验。

.box{
    width: 150px;
    height: 150px;
    background: #f00;
    cursor: pointer;
    transition: all 1s;
}
.box:active{
    transform: scale(0.8);
} 

上面的代码展示了一个红色的正方形box，当用户点击这个正方形时，它会缩小到原来的0.8倍。

下面再来看一个例子：

.circle{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #ff0;
    cursor: pointer;
    transition: all 1s;
}
.circle:active{
    background: #0f0;
    transform: rotate(360deg) scale(1.2);
} 

这段代码实现了一个黄色的圆形，当用户点击它时，它会变成绿色，同时进行一次360度的旋转，并放大到原来的1.2倍。

如上所述，通过手点击哪里哪里可以实现各种动画效果，我们可以根据需求自由发挥。这种动画效果的实现，不仅可以让网页更加生动，同时也可以提高网页的交互性。在未来的网页开发中，这种方式将会变得越来越流行。