css3超炫效果 |css 过度颜色

/* 1. 辉光效果 */
.box{
background: linear-gradient(to right, yellow, orange, red);
box-shadow: 0px 0px 20px 10px rgba(255,255,0,0.8);
}
/* 2. 旋转变形效果 */
.box{
transform: rotate(45deg);
transition: all 1s ease-in-out;
}
.box:hover{
transform: rotate(-45deg);
}
/* 3. 文字特效 */
h1{
font-size: 100px;
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
-webkit-background-clip: text;
color: transparent;
animation: rainbow 5s infinite;
}
@keyframes rainbow {
0% {background-position: 0 0;}
100% {background-position: 200% 0;}
}
/* 4. 3D立体效果 */
.container{
width: 400px;
height: 400px;
perspective: 800px;
}
.box{
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transform: rotateY(25deg);
box-shadow: inset 0px 0px 50px black;
}
.box:before {
position: absolute;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0.5;
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
transform: translateZ(-20px);
}
.box:after {
position: absolute;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: 0px 0px 200px 40px rgba(0,0,0,0.3) inset;
transform: translateZ(-20px);
}

以上只是CSS3的冰山一角，当然，还有许多其他的特效可以展示。但无论如何，通过学习CSS3的特效，大家可以不断提升大家的技术水平，创造出更加独特、美观的网页效果。