CSS所有特效代碼大全
想要網(wǎng)頁(yè)更加美觀、充滿動(dòng)感和交互性，就需要掌握各種CSS特效。這里提供一份css所有特效的代碼清單，供大家參考。
1. 陰影效果：
pre{
box-shadow: 0 0 10px #000;
}
2. 文字漸變色：
p{
background: linear-gradient(#a7a7a7, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
3. 鼠標(biāo)懸停時(shí)的透明度變化：
p:hover {
opacity: 0.8;
}
4. 圖片縮放：
img{
transition: transform .5s ease-in-out;
}
img:hover{
transform: scale(1.25);
}
5. 文字打字效果：
.typewriter {
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
margin: 0 auto;
letter-spacing: .15em;
animation: typing 3.5s steps(30, end),
blink-caret .75s step-end infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange }
}
6. 文字旋轉(zhuǎn)：
.rotate {
animation: rotating 3s linear infinite;
}
@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
7. 背景動(dòng)畫：
background{
background: linear-gradient(90deg, #00dbde, #fc00ff, #FFDAB9);
background-size: 300% 300%;
}
8. 文字背景動(dòng)畫：
p{
background: url(http://gph.is/28OUnS8) repeat;
-webkit-background-clip: text;
color: transparent;
animation: animateBackground 20s ease-in-out infinite;
}
@keyframes animateBackground{
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
9. 文字閃爍：
p{
animation: blink 1s linear infinite;
}
@keyframes blink{
50% {opacity: 0.5;}
}
10. 圖片旋轉(zhuǎn)：
img{
animation: rotateImg 2s linear infinite;
}
@keyframes rotateImg{
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
以上是一些常用的CSS特效代碼，可以讓頁(yè)面更加生動(dòng)有趣，如有需要可以根據(jù)實(shí)際需求進(jìn)行修改。