css动画集合实例
以前總覺得自己在css動畫方面確實練習的很少，現在總結一下。寫一些效果保存一下，方便以后查詢：
效果大概預覽：
代碼如下：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>測試CSS3 動畫</title> </head><!--注意點：(1)動畫：在 @keyframes 中創建動畫時，請把它捆綁到某個選擇器，否則不會產生動畫效果。1.規定動畫的名稱2.規定動畫的時長(2)過度CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。1.規定您希望把效果添加到哪個 CSS 屬性上2.規定效果的時長 --><style type="text/css">.change-color {margin: 30px;width: 200px;height: 100px;background: red;animation: myfirst 5s infinite alternate;}@keyframes myfirst {from {background: red;}to {background: yellow;}}.change-color2 {margin: 30px;width: 200px;height: 100px;background: red;animation: mysecond 5s infinite;}@keyframes mysecond {0% {background: red;}25% {background: yellow;}50% {background: blue;}100% {background: green;}}.start-move {margin: 30px;width: 200px;height: 100px;background: yellow;animation: mymove 3s infinite;}@keyframes mymove {0% {transform: rotate(0deg);background: red;}50% {transform: rotate(9deg);background: blue;}100% {transform: rotate(18deg);background: green;}}.start-XY {margin: 30px;width: 200px;height: 100px;background: blue;animation: mymoveXY 5s infinite;}@keyframes mymoveXY {0% {transform: translate(10px, 50px);background: red;}50% {transform: translate(30px, 100px);background: blue;}75% {transform: translate(50px, 150px);background: green;}100% {transform: translate(0px, 0px);background: green;}}.start-scale {margin: 30px;width: 200px;height: 100px;background: greenyellow;animation: mymoveScale 5s infinite;}@keyframes mymoveScale {0% {transform: scale(1, 1);background: red;}25% {transform: scale(2, 2);background: blue;}50% {transform: scale(1, 1);background: magenta;}75% {transform: scale(0.5, 0.5);background: green;}100% {transform: scale(1, 1);background: green;}}.start-skew {margin: 30px;width: 200px;height: 100px;background: peru;animation: mymoveSkew 5s infinite;}@keyframes mymoveSkew {0% {transform: skew(0deg, 0deg);background: red;}25% {transform: skew(20deg, 20deg);background: blue;}50% {transform: skew(10deg, 10deg);background: magenta;}100% {transform: skew(0deg, 0deg);background: green;}}.start-3DX {margin: 30px;width: 200px;height: 100px;background: purple;animation: mymove3D 5s infinite;}@keyframes mymove3D {0% {transform: rotateX(0deg);background: red;}25% {transform: rotateX(60deg);background: blue;}50% {transform: rotateX(120deg);background: magenta;}75% {transform: rotateX(180deg);background: magenta;}100% {transform: rotateX(0deg);background: green;}}.start-3DY {margin: 30px;width: 200px;height: 100px;background: fuchsia;animation: mymove3DY 5s infinite;}@keyframes mymove3DY {0% {transform: rotateY(0deg);background: red;}25% {transform: rotateY(60deg);background: blue;}50% {transform: rotateY(120deg);background: magenta;}50% {transform: rotateY(180deg);background: magenta;}100% {transform: rotateY(0deg);background: green;}}.start-3D-scaleX {margin: 30px;width: 200px;height: 100px;background: palegreen;animation: my3DScaleX 5s infinite;}@keyframes my3DScaleX {0% {transform: scaleX(1);background: red;}25% {transform: scaleX(2);background: blue;}50% {transform: scaleX(3);background: magenta;}50% {transform: scaleX(2);background: magenta;}100% {transform: scaleX(1);background: green;}}.start-3D-scaleY {margin: 30px;width: 200px;height: 100px;background: palegreen;animation: my3DScaleY 3s infinite;}@keyframes my3DScaleY {0% {transform: scaleY(1);background: red;}25% {transform: scaleY(2);background: blue;}50% {transform: scaleY(3);background: magenta;}50% {transform: scaleY(2);background: magenta;}100% {transform: scaleY(1);background: green;}}.start-transtion {margin: 30px;width: 200px;height: 100px;background: lawngreen;transition: width 2s;}.start-transtion:hover {width: 300px;background: rosybrown;}.start-transtion-multi {margin: 30px;width: 200px;height: 100px;background: powderblue;transition: width 2s, height 2s, transform 2s;}.start-transtion-multi:hover {width: 400px;height: 200px;transform: rotate(180deg);background: rosybrown;}.end-donghua {margin: 30px;width: 100px;height: 100px;background: palegreen;animation: endDonghua 5s linear infinite;text-align: center;line-height: 100px;color: white;font-size: 14px;border-radius: 5px;}@keyframes endDonghua {0% {background: red;left: 0px;top: 0px;margin-left: 0px;transform: rotate(0deg);}25% {background: yellow;left: 200px;top: 0px;margin-left: 200px;transform: rotate(90deg);}50% {background: blue;left: 200px;top: 200px;margin-left: 400px;transform: rotate(180deg);}75% {background: green;left: 0px;top: 200px;margin-left: 600px;transform: rotate(270deg);}100% {background: red;left: 0px;top: 0px;transform: rotate(360deg);margin-left: 800px;}} </style><body><!-- 自動變色 --><div class="change-color"></div><!-- 自動變色2 --><div class="change-color2"></div><!-- 轉動 --><div class="start-move"></div><!-- 移動 --><div class="start-XY"></div><!-- 縮放 --><div class="start-scale"></div><!-- 圍繞 X 軸把元素翻轉 xxx 度，圍繞 Y 軸翻轉 xxx 度 --><div class="start-skew"></div><!-- 3D 旋轉(圍繞X軸) --><div class="start-3DX"></div><!-- 3D 旋轉(圍繞Y軸) --><div class="start-3DY"></div><!-- 3D 縮放 (縮放X 軸)--><div class="start-3D-scaleX"></div><!-- 3D 縮放 (縮放Y 軸)--><div class="start-3D-scaleY"></div><!-- 動畫過度 (hover 改變單個屬性) --><div class="start-transtion"></div><!-- 動畫過度 (hover 改變多個屬性) --><div class="start-transtion-multi"></div><!-- 動畫從一個位置旋轉飛躍到另一個位置 --><div class="end-donghua">旋轉動畫</div> </body></html>總結
- 上一篇： 王者荣耀安卓转苹果要多长时间
- 下一篇： uni-app启动微信开发者工具