重要的代码：
@1实现对象的位移
<style> @keyframes k{ 15%{ transform: translate(2200px,0); background: lavender; font-size: 50px; height: 300px; } 20%{ transform: translate(2200px,500px); width: 200px; background: royalblue; } 35%{ transform: translate(0px,500px); background-color: #FF0000; } 45%{ transform: translate(1000px,0); height: 200px; background: lavender; font-size: 50px; } 55%{ transform: translate(1000px,500px); width: 10px; background: royalblue; height: 20px; } 65%{ transform: translate(0px,500px); height: 20px; background: peachpuff; font-size: 20px; } 75%{ transform: translate(0px,500px); height: 20px; background: yellow; font-size: 20px; } 85%{ transform: translate(0px,500px); height: 20px; background: palevioletred; font-size: 20px; } 95%{ transform: translate(0px,500px); height: 20px; background: pink; font-size: 20px; } 100%{ transform: translate(0px,0px); } } </style>
@2实现对象的动画的旋转
<style> img{ height: 300px; width: 300px; /* margin: auto;*/ } * { background-color: #1E90FF; padding: 0px; margin: 0px; list-style: none; font-size: 30px; } /*css������*/ body { font-size: 23px; } ul, li { list-style: none; margin: 0px; padding: 0px; } li { border: 2px solid #D4D4D4; text-align: center; border-radius: 20px; } li p { text-align: center; } /*css3*/ li:first-child { background-color: rgba(199, 166, 4, 0.1); } /*定义do动画*/ @keyframes anima { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @font-face { font-family: Bahnschrift; } li:first-child img:hover { animation-name: anima; animation-duration: 2s; animation-iteration-count: infinite; } li img:hover { animation-name: anima; animation-duration: 2s; animation-iteration-count: infinite; } li:last-child img:hover { animation-name: anima; animation-duration: 2s; animation-iteration-count: infinite; } ul { display: flex; } li { flex-grow: 1; } </style>
@3实现对象的动画的缩放。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--定义动画--> <style type="text/css"> @keyframes a { 0%{ transform: scale(1); } 30%{ transform: scale(0.5); } 60%{ transform: scale(1.7); } 100%{ transform: scale(2); } } div{ width: 300px; height: 300px; border: lightblue solid 12px; margin: auto; background: url("like/a (1).jpg"); background-size: 200px 200px; -webkit-animation-name: a; -webkit-animation-timing-function: ease-in-out; animation-iteration-count: 3; -webkit-animation-duration: 10s; } </style> <title>动画的放大与缩小</title> </head> <body> <div style="align-content: center ;text-align: center">图片的放大缩小</div> </body> </html>
@2实现对象的动画来回循环。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画来回循环</title> <style> .pics{ position: relative; width: 400px; height: 400px; } .pic1{ width: 400px; height: 400px; } .pic2{ width: 400px; height: 400px; left: 0; top: 0; -webkit-animation: picDraw 15s ease-in-out infinite; } .pic3{ position: absolute; width: 400px; height: 400px; left: 0; top: 0; -webkit-animation: picDraw 5s ease-in-out infinite; } @keyframes picDraw { 0%{ opacity: 0; } 25%{ opacity: 1; } 50%{ opacity: 0; } 0%{ opacity: 0; } } </style> </head> <body> <div class="pics"> <img src="like/a%20(5).jpg" alt="" class="pic1"> <img src="like/a%20(6).jpg" alt="" class="pic2"> <img src="like/a%20(7).jpg" alt="" class="pic3"> </div> </body> </html>
目的认能理解这些代码
transform: translate(0px,500px); animation: move 10s steps(28)forwards; opacity: 0; opacity: 1; transform: scale(1); @keyframes anima { from { transform: rotate(0deg); } to { transform: rotate(360deg);}
思考下面图片的效果用那些方案实现呢？
只要你想学没有人阻止。提升自己的能力，实力。才是正道。
