CSS3動畫樣式表是一種強大的工具,可以幫助我們創建各種各樣的動態效果,使網頁更加生動有趣。下面將介紹一些常用的CSS3動畫樣式表。
/* 旋轉動畫 */ .rotate { animation: rotate 1s ease-in-out infinite; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 漸變動畫 */ .gradient { animation: gradient 2s ease-in-out infinite; } @keyframes gradient { 0% { background: #ff3366; } 50% { background: #33ccff; } 100% { background: #ff3366; } } /* 平移動畫 */ .translate { animation: translate 2s ease-in-out alternate infinite; } @keyframes translate { 0% { transform: translateX(-50%); } 100% { transform: translateX(50%); } } /* 縮放動畫 */ .scale { animation: scale 1s ease-in-out alternate infinite; } @keyframes scale { 0% { transform: scale(1); } 100% { transform: scale(2); } } /* 閃爍動畫 */ .blink { animation: blink 1s ease-in-out alternate-reverse infinite; } @keyframes blink { 0% { opacity: 1; } 100% { opacity: 0; } }
以上是一些常用的CSS3動畫樣式表,可以根據需要進行修改和調整,以達到最佳效果。