css3搓手洗手效果

CSS3是一种非常强大的网页样式设计语言，它能够实现很多酷炫的效果。其中，搓手洗手效果就是CSS3非常具有代表性的一个效果。下面我们就来了解一下吧！

.washing-hands {
    width: 150px;
    height: 150px;
    position: relative;
     -webkit-animation: washing-hands 2s linear infinite;
    animation: washing-hands 2s linear infinite;
}
.washing-hands::before,.washing-hands::after {
    content: '';
    display: block;
    position: absolute;
    width: 8px;
    height: 40px;
    background-color: gray;
    border-radius: 4px;
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
}
.washing-hands::before {
    left: 30%;
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
    -webkit-animation: washing-hand 2s linear infinite;
    animation: washing-hand 2s linear infinite;
}
.washing-hands::after {
    right: 30%;
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
    -webkit-animation: washing-hand 2s linear infinite;
    animation: washing-hand 2s linear infinite;
}
@-webkit-keyframes washing-hand {
0% {
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
}
50% {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}
100% {
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
}
}
@keyframes washing-hand {
0% {
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
}
50% {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}
100% {
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
}
}
@-webkit-keyframes washing-hands {
0%,100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
50% {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}
}
@keyframes washing-hands {
0%,100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
50% {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}
}
    

通过以上代码，我们可以实现一个旋转的洗手盆，两只手臂也会做出相应的动作，仿佛在洗手。这是一个比较典型的CSS3动画效果。

总的来说，CSS3搓手洗手效果是一种非常有趣的效果，它可以很好的为网页增加一些趣味性，同时展现出CSS3的强大作用。相信在以后的网页设计中，将会看到越来越多的类似的效果出现。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！