/*图标抖动*/ @keyframes jitter { from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); } 50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); } 75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); } } @-webkit-keyframes jitter { from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); } 50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); } 75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); } } /*水平线滑动*/ @keyframes line{ from { width: 0%; } to { width: 100%; } } /*鼠标经过按钮扩散*/ @-webkit-keyframes hvr-ripple-out { 100% { top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0; } } @keyframes hvr-ripple-out { 100% { top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0; } } a.hvr-ripple-out { display: block; transform: translateZ(0px); box-shadow: rgba(0, 0, 0, 0) 0px 0px 1px; backface-visibility: hidden; position: relative; border-radius:4px; } a.hvr-ripple-out::before { content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; animation-duration: 1s; border-width: 6px; border-style: solid; border-color: #f08619; border-image: initial; border-radius:4px; } a.hvr-ripple-out:hover::before{ animation-name: hvr-ripple-out; } @keyframes hvr-ripple-out1 { 100% { top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0; } } a.hvr-ripple-out1 { display: block; transform: translateZ(0px); box-shadow: rgba(0, 0, 0, 0) 0px 0px 1px; backface-visibility: hidden; position: relative; border-radius:4px; } a.hvr-ripple-out1::before { content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; animation-duration: 1s; border-width: 6px; border-style: solid; border-color: #f08619; border-image: initial; border-radius:4px; } a.hvr-ripple-out1:hover::before{ animation-name: hvr-ripple-out1; } /*图片持续缩放*/ @keyframes ban{ 0% { transform: scale(1); } 25% { transform: scale(1.1); } 50% { transform: scale(1.2); } 75% { transform: scale(1.1); } 100% { transform: scale(1); } } /*按钮持续扩散*/ @keyframes circleScale { 0% { opacity: 1; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } 100% { opacity: 0; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @keyframes circleScale1 { 0% { opacity: 1; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } 60% { opacity: 1; } 100% { opacity: 0; -webkit-transform: scale(3); -moz-transform: scale(3); -ms-transform: scale(3); transform: scale(3); } }