標籤：png set code min 曲線 時間 font infinite charset
動畫
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> @keyframes colorChange { 0% { color: red; } 20% { color: yellow; } 50% { color: aquamarine; } 80% { color: beige; } 100% { color: chartreuse; } } P { font-size: 50px; /*動畫名稱*/ animation-name: colorChange; /*動畫時間長度*/ animation-duration: 3s; /*動畫速度曲線*/ animation-timing-function: linear; /*動畫延遲時間*/ animation-delay: 2s; /*動畫播放次數 infinite 無限次播放*/ animation-iteration-count: 2; /*動畫在下一個是否逆向播放*/ /*animation-direction: alternate;*/ animation-fill-mode: forwards; } </style> <title>動畫</title></head><body><p>傑瑞教育</p></body></html>
運行效果是字型變色
滑鼠觸摸下滑欄
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> #container { width: 200px; height: 50px; background-color: #cccccc; } #top { width: 150px; height: 100%; float: right; background-color: #F2AD0A; } #hidden { width: 150px; height: 0px; background-color: #4D2E83; position: relative; top: 50px; transition: all 1s ease; overflow: hidden; } #top:hover #hidden { height: 300px; } </style> <title>老師做的欄</title></head><body><div id="container"> <div id="top"> <div id="hidden"> <ul> <li>asfdasdf</li> <li>sdfasdf</li> <li>asdfjl</li> </ul> </div> </div></div></body></html>
運行圖：
游標移動到橙色地區後：出現下滑欄
CSS之動畫
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
