CSS3是一種強大的樣式表語言,它使設計師能夠創建更加生動、有趣的網頁。
與CSS2相比,CSS3有很多新的特點,其中最重要的就是能夠創造出更加豐富的樣式效果。例如,它支持圓角、漸變、陰影、旋轉等特效。而jQuery則是一種流行的JavaScript框架,它可以讓我們更加方便地操作HTML和CSS。
使用CSS3和jQuery可以產生出很多有趣的效果,下面我們將演示一個例子。這是一個圓形方塊,它有一個旋轉的動畫效果。代碼如下:
.circle { width: 100px; height: 100px; border-radius: 50%; background-color: red; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: rotate 2s linear infinite; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } $(document).ready(function() { $(".circle").hover(function() { $(this).css("background-color", "yellow"); }, function() { $(this).css("background-color", "red"); }); });
在上面的代碼中,我們為.circle類聲明了CSS樣式,其中的border-radius屬性使其變成了一個圓形方塊,transform屬性使其在頁面上居中,animation屬性給它添加了旋轉效果。
我們還添加了一個jQuery的hover事件,當鼠標移動到圓形方塊上時,會變成黃色,當鼠標離開時則變回紅色。
總的來說,CSS3的特效和jQuery的操作可以讓我們創建出更加生動、有趣的網頁,促進了Web設計的發展。
上一篇css3環形進度條 動態
下一篇css3特效教程蘋果