- animation: 動畫名稱 持續時間
@keyframe 動畫名稱 { from { CSS 屬性: 值 } to { CSS 屬性: 值 } } @keyframes active { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } }
2. transition: CSS屬性 持續時間;
div{ 200px; height: 200px; margin: 100px auto; background-color: #336699; /*transition:width 1s;*/ transition:all 1s; /*transition: height 1s;*/ } div:hover{ 300px; height: 400px; }
3.html简代demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .box1 { border: 1px solid blue; width: 100px; height: 40px; animation: active 1s linear 1; } @keyframes active { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } } #c1:checked~.box2 { margin-left: 50px; display: block; visibility: hidden; opacity: 0; } .box2 { margin-left: 0px; height: 100px; width: 100px; background-color: #0a0; transition: 1s -.3s linear; visibility: visible; opacity: 1; } </style> <body> <button onclick='toggle()'>change</button> <div class="box1"></div> <br /> <input id="c1" type="checkbox"> <br /> <br /> <div class="box2"></div> </body> </html> <script> function toggle() { curr = document.querySelector('div').style.display if (curr == 'display' || curr == '') { document.querySelector('div').style.display = 'none' } else { document.querySelector('div').style.display = '' } } </script>
1:animation: 動畫名稱 持續時間@keyframe 動畫名稱 { from { CSS 屬性: 值 } to { CSS 屬性: 值 }} @keyframes active { 0% { opacity: 0; transform: scale(0); }
100% { opacity: 1; transform: scale(1); } }
2:transition: CSS屬性 持續時間;div{ 200px; height: 200px; margin: 100px auto; background-color: #336699; /*transition:width 1s;*/ transition:all 1s; /*transition: height 1s;*/}div:hover{ 300px; height: 400px; }
本店所有软件都可以修改定制,详情请咨询店家