CSS3是下一代CSS(層疊樣式表)的版本,它引入了許多新的特性和特效。以下是一些最受歡迎的新特性:
/* CSS3過渡效果 */ .transition { width: 100px; height: 100px; background-color: #1abc9c; transition: width 2s; /* 定義寬度2秒的過渡效果 */ } .transition:hover { width: 200px; /* 鼠標懸停時寬度變?yōu)?00px */ } /* CSS3動畫 */ @keyframes example { 0% {background-color: #1abc9c;} 50% {background-color: #3498db;} 100% {background-color: #9b59b6;} } .animation { width: 100px; height: 100px; animation: example 5s infinite; /* 定義5秒鐘的動畫效果 */ } /* CSS3圓角 */ .rounded { border-radius: 50%; /* 將矩形轉(zhuǎn)換為圓形 */ } /* CSS3陰影 */ .shadow { box-shadow: 10px 10px 5px #888888; /* 定義10px的水平偏移,10px的垂直偏移,5px的模糊度和#888888顏色的陰影效果 */ } /* CSS3文本特效 */ .text { text-shadow: 2px 2px #888888; /* 定義2px的水平偏移,2px的垂直偏移和#888888顏色的文本陰影效果 */ } /* CSS3變形 */ .transform { transform: rotate(45deg); /* 將元素旋轉(zhuǎn)45度 */ } /* CSS3背景特效 */ .background { background-image: linear-gradient(to bottom right, #1abc9c, #3498db); /* 定義向右下角漸變的背景顏色 */ }
這些僅是CSS3新特性之一的例子,它們展示了CSS變得更加靈活、功能更加強大的方向。如果你希望你的網(wǎng)頁更加吸引人和現(xiàn)代化,那么學習和使用CSS3將是一個不錯的選擇。
上一篇css 去掉輸入框陰影
下一篇css 去掉連接字體顏色