CSS3是前端開發中非常重要的技術,能夠制作出豐富的特效,為網頁增加更多的動態效果。以下是介紹一些常用的CSS3特效的代碼。
/* 1.漸變背景色 */ background: linear-gradient(to bottom, #ff9900, #ff6600); /* 2.邊框圓角 */ border-radius: 10px; /* 3.陰影效果 */ box-shadow: 3px 3px 5px #ccc; /* 4.過渡效果 */ transition: all 0.5s ease; /* 5.旋轉動畫 */ transform: rotate(45deg); /* 6.縮放動畫 */ transform: scale(1.5); /* 7.平移動畫 */ transform: translate(50px, 0); /* 8.彈跳動畫 */ animation: bounce 2s ease infinite; @keyframes bounce { 0%, 100% {transform: translateY(0);} 50% {transform: translateY(-20px);} } /* 9.漸變邊框 */ border-image: linear-gradient(to bottom, #ff9900, #ff6600) 30; /* 10.文本陰影 */ text-shadow: 1px 1px 3px #ccc;
使用CSS3制作特效可以讓網站的視覺效果更出眾,吸引用戶的眼球。互聯網快速發展,我們也需要跟進技術的步伐,不斷地學習、實踐,在實戰中提升我們的前端能力。