CSS是實現網頁布局和樣式的重要工具。除了常用的設置背景顏色、字體大小等基本功能,CSS還可以實現許多高級的功能,讓網頁更加美觀、互動性更強。
1. 動畫效果
/* 設置元素從左往右移動,持續1秒,重復2次 */ animation: move 1s 2; @keyframes move { 0% { transform: translateX(0); } 100% {transform: translateX(200px); } }
2. 響應式設計
/* 設置網頁寬度小于768px時,元素寬度為60% */ @media screen and (max-width: 768px) { .box { width: 60%; } }
3. 3D效果
/* 設置元素以x軸為中心旋轉30度 */ transform: rotateX(30deg);
4. 自動換行
/* 設置元素遇到邊界自動換行 */ word-wrap: break-word;
5. 濾鏡效果
/* 設置元素模糊 */ filter: blur(5px);
總之,CSS可以做出許多高級效果,只需要熟悉常用屬性和語法,在實現網頁效果時,可以發揮出更多的想象力!