CSS 是前端開發中不可或缺的一部分,它可以實現各種各樣的特效,讓網頁更加豐富多彩。下面,我們來介紹一些簡單的 CSS 特效的實現方法。
/* 實現文本滑動特效 */ .slide-text { overflow: hidden; white-space: nowrap; /* 不換行 */ } .slide-text span { display: inline-block; animation: slide 5s infinite; /* 動畫時間為5s,無限循環 */ } @keyframes slide { 0% { transform: translateX(0); /* 滑動距離為0 */ } 100% { transform: translateX(-100%); /* 滑動距離為-100%,即向左滑動一屏 */ } } /* 實現圖片放大效果 */ .enlarge-img:hover { transition: transform 0.3s ease-out; /* 動畫時間為0.3s,緩動效果為ease-out */ transform: scale(1.2); /* 放大為原來的1.2倍 */ } /* 實現按鈕變色效果 */ .colorful-btn { background-color: #f44336; /* 初始顏色為紅色 */ color: #ffffff; transition: background-color 0.3s ease-out; /* 動畫時間為0.3s,緩動效果為ease-out */ } .colorful-btn:hover { background-color: #4CAF50; /* 鼠標懸停時顏色變為綠色 */ } /* 實現文字閃動效果 */ .blink-text { animation: blink 1.5s infinite; /* 動畫時間為1.5s,無限循環 */ } @keyframes blink { 0% { opacity: 1; /* 文字完全不透明 */ } 50% { opacity: 0; /* 文字完全透明 */ } 100% { opacity: 1; /* 文字完全不透明 */ } }
以上是一些簡單的 CSS 特效的實現方法,希望對你有所幫助。當然,隨著技術的發展,CSS 特效的實現方法也在不斷變化,建議多關注前沿的技術動態。
下一篇css簡單的圓形動畫