css3 动画 云朵 |css 鼠标经过 阴影

.cloud {
position: relative;
width: 60%;
height: 30px;
background: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 
0 -1px 1px rgba(0, 0, 0, .2);
border-radius: 30px;
margin: 0 auto;
overflow: hidden;
}
.cloud::before,
.cloud::after {
content: "";
position: absolute;
background: #fff;
border-radius: 100%;
}
.cloud::before {
left: 10%; top: 50%;
width: 120px; height: 120px;
margin: -60px 0 0 -60px;
animation: cloud-left 4s infinite ease-in-out both;
}
.cloud::after {
right: 10%; top: 50%;
width: 80px; height: 80px;
margin: -40px 0 0 -40px;
animation: cloud-right 4s infinite ease-in-out both;
}
@keyframes cloud-left {
0%   { transform: translateX(-200%); opacity: 0; }
50%  { opacity: 1; }
100% { transform: translateX(200%); opacity: 0; }
}
@keyframes cloud-right {
0%   { transform: translateX(200%); opacity: 0; }
50%  { opacity: 1; }
100% { transform: translateX(-200%); opacity: 0; }
}

上面的代码演示了一个云朵动画的效果。首先大家创建了一个容器，即.cloud 类。云朵本身使用伪元素 before 和 after 添加到容器中去；使用 animation 属性来实现动画效果。

使用 CSS3 动画可以为网页设计带来很多的乐趣和生动性，同时也提升了用户体验。大家可以一边学习 CSS3，一边尝试实现更多的有趣动画效果，从而建立起自己的动画效果库，以供日后使用。