CSS3是一種非常強大的網(wǎng)頁樣式設(shè)計語言，它能夠?qū)崿F(xiàn)很多酷炫的效果。其中，搓手洗手效果就是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);
}
}

通過以上代碼，我們可以實現(xiàn)一個旋轉(zhuǎn)的洗手盆，兩只手臂也會做出相應(yīng)的動作，仿佛在洗手。這是一個比較典型的CSS3動畫效果。

總的來說，CSS3搓手洗手效果是一種非常有趣的效果，它可以很好的為網(wǎng)頁增加一些趣味性，同時展現(xiàn)出CSS3的強大作用。相信在以后的網(wǎng)頁設(shè)計中，將會看到越來越多的類似的效果出現(xiàn)。