css3 炫 例 |仿微博css登录框

/* 1. 文字阴影 */
p {
text-shadow: 2px 2px 2px #000;
}
/* 2. 边框渐变 */
p {
border: 5px solid;
border-image: linear-gradient(to right, #ff00ff, #00ffff) 1;
}
/* 3. 动态旋转 */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
p {
animation: spin 2s linear infinite;
}
/* 4. 图片放大 */
img:hover {
transform: scale(2);
}
/* 5. 3D 立方体 */
.cube {
width: 200px;
height: 200px;
perspective: 800px;
}
.cube .face {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid #333;
box-sizing: border-box;
}
.cube .face-front {
transform: translateZ(100px);
}
.cube .face-back {
transform: translateZ(-100px) rotateY(180deg);
}
.cube .face-left {
transform: rotateY(-90deg) translateX(-100px);
}
.cube .face-right {
transform: rotateY(90deg) translateX(100px);
}
.cube .face-top {
transform: rotateX(-90deg) translateY(-100px);
}
.cube .face-bottom {
transform: rotateX(90deg) translateY(100px);
}

以上几个效果只是 CSS3 可以实现的众多效果之一，为网页设计带来了许多可能性。