/* 图像hover效果 */ img { transition: transform .2s; } img:hover { transform: scale(1.1); } /* 文本阴影效果 */ h1 { color: white; text-shadow: 2px 2px 4px #000000; } /* 背景渐变效果 */ body { background: linear-gradient(left, #00ff99 , #66ff99); } /* 背景闪烁效果 */ body { background: #000; -webkit-animation: flicker 1s linear infinite; animation: flicker 1s linear infinite; } @-webkit-keyframes flicker { 0% { opacity: 1; } 80% { opacity: .1; } 100% { opacity: 1; } } @keyframes flicker { 0% { opacity: 1; } 80% { opacity: .1; } 100% { opacity: 1; } }
使用这些效果,你可以打造一个极富吸引力和好玩性的网站,吸引更多的访问流量。不断尝试新的CSS效果,并且始终保持好奇心,你将掌握更多技能并成为一名合格的前端设计师。