CSS是網頁設計中重要的一環,它可以使網頁變得更加鮮明、美觀,并通過裝飾和排版對網頁內容進行更好的呈現。下面我們將介紹幾個常見的CSS效果。
/* 圓角效果 */ border-radius: 10px; /* 陰影效果 */ box-shadow: 5px 5px 5px #888; /* 漸變背景 */ background: linear-gradient(to bottom right, #9966CC, #99CCFF); /* 動畫效果 */ @keyframes shake { 0% { transform: translateX(0); } 10% { transform: translateX(-10px) rotate(-5deg); } 20% { transform: translateX(10px) rotate(5deg); } 30% { transform: translateX(-10px) rotate(-5deg); } 40% { transform: translateX(10px) rotate(5deg); } 50% { transform: translateX(-10px) rotate(-5deg); } 60% { transform: translateX(10px) rotate(5deg); } 70% { transform: translateX(-10px) rotate(-5deg); } 80% { transform: translateX(10px) rotate(5deg); } 90% { transform: translateX(-10px) rotate(-5deg); } 100% { transform: translateX(0) rotate(0); } } animation: shake 2s infinite;
以上效果只是CSS的冰山一角,還有很多種類繁多的效果等待著你去探索,希望這篇文章能夠對你有所幫助。
上一篇css放大縮小效果
下一篇css效果截圖及說明