CSS3移動特效是一種在現代網站設計中非常流行的技術。它可以幫助網站設計師創建出各種各樣的動態特效,從而為網站增加趣味性和吸引力。下面我們就來看一些常用的CSS3移動特效。
/* 下拉菜單 */ .dropdown { position: relative; } .dropdown ul { display: none; position: absolute; top: 100%; left: 0; z-index: 999; } .dropdown:hover ul { display: block; } /* 縮放效果 */ .zoom { transform: scale(1); transition: all 0.3s ease-in-out; } .zoom:hover { transform: scale(1.1); } /* 橫向滑動 */ .slider { position: relative; overflow: hidden; } .slider ul { position: relative; width: 300%; left: 0; transition: all 0.3s ease-in-out; } .slider li { float: left; width: 33.33%; } .slider .active { outline: 2px solid #000; } .slider .prev, .slider .next { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; text-align: center; background-color: #000; color: #fff; cursor: pointer; } .slider .prev { left: 0; } .slider .next { right: 0; } .slider .prev:hover, .slider .next:hover { background-color: #666; } .slider .prev.disabled, .slider .next.disabled { opacity: 0.5; cursor: default; } /* 旋轉效果 */ .rotate { transform-origin: center; transition: all 0.3s ease-in-out; } .rotate:hover { transform: rotate(360deg); }
上面的代碼演示了下拉菜單效果、縮放效果、橫向滑動效果以及旋轉效果。設計師們可以根據自己的需要選擇不同的特效,并根據實際情況進行修改和調整,以達到最終的理想效果。
上一篇css3移動端單擊背景
下一篇mysql查詢保存數據表