[分享]css3接触动画

CSS3接触动画是一种能够让网页元素产生接触效果的技术。在这种动画中，需要设置两个元素之间的距离，然后让它们逐渐靠近并接触。下面是一个使用CSS3接触动画实现的例子：.box{ : absolute;...

CSS3接触动画是一种能够让网页元素产生接触效果的技术。在这种动画中，需要设置两个元素之间的距离，然后让它们逐渐靠近并接触。下面是一个使用CSS3接触动画实现的例子：

.box{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.box1{
    width: 100px;
    height: 100px;
    border: 2px solid #333;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    animation: touch 5s forwards;
}
.box2{
    width: 100px;
    height: 100px;
    border: 2px solid #333;
    background-color: #ccc;
    border-radius: 50%;
    position: absolute;
    left: calc(50% - 50px);
    top: 0;
    animation: touch 5s forwards;
}
@keyframes touch {
    0% {
        left: 0;
        top: 0;
    }
    100% {
        left: calc(50% - 50px);
        top: 0;
    }
} 

在这个例子中，我们设置了两个元素，分别是.box1和.box2。.box1表示小球，.box2表示地面。我们将.box1设置为左上角，并使用动画让它逐渐移动到中间。.box2表示地面，放置在中间的位置上。

在这个动画中，我们使用了CSS3中的calc()方法，可以方便地计算出元素位置。同时，我们也使用了CSS3的动画属性，来实现小球移动的效果。

总之，CSS3接触动画是一种非常实用的技术，可以让网页元素产生更加丰富的交互效果。通过学习这种技术，我们可以让网页更加生动有趣。