純CSS酷炫效果是前端開發(fā)中的一項非常重要的技能,下面介紹一些常見的純CSS酷炫效果。
/* 1. 3D旋轉盒子 */ box-shadow: 0 0 50px rgba(255,255,255,.5),0 0 20px rgba(255,255,255,.5),0 0 5px rgba(255,255,255,.5),inset 0 0 20px rgba(255,255,255,.5),inset 0 0 50px rgba(255,255,255,.5),inset 0 0 100px rgba(255,255,255,.5); /* 2. 平移的背景 */ background: linear-gradient(to right, #00ff00, #ff1493, #0000ff); background-size: 600% 100%; animation: moveBg 30s linear infinite; @keyframes moveBg { 0% {background-position: 0 0;} 50% {background-position: 100% 0;} 100% {background-position: 0 0;} } /* 3. 雪花 */ background: url('snow.png') repeat top center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; animation: snow 10s linear infinite; @keyframes snow { 0% {background-position: 0 0;} 100% {background-position: 0 3000px;} } /* 4. 模糊文字 */ text-shadow: 0 0 10px rgba(255,255,255,.5); color: transparent; background-image: url('background.jpg'); background-clip: text; font-size: 60px; font-weight: bold; text-align: center; /* 5. 像素動畫 */ background: url('pixel.png') repeat top center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; animation: pixel 10s linear infinite; @keyframes pixel { 0% {background-position: 0 0;} 100% {background-position: 0 3000px;} }
以上僅是其中的一些純CSS酷炫效果,通過學習和使用這些效果,可以讓網頁更具有視覺沖擊力和吸引力。
上一篇dockerrunf
下一篇dockerphp端口