@nutui/icons-vue
Version:
京东风格的轻量级移动端 Vue 组件库 NutUI 图标包
2 lines (1 loc) • 7.35 kB
CSS
:root{--nut-icon-height: 16px;--nut-icon-width: 16px;--nut-icon-line-height: 16px;--animate-duration: 1s;--animate-delay: 0s}page{--nut-icon-height: 20px;--nut-icon-width: 20px;--nut-icon-line-height: 20px;--animate-duration: 1s;--animate-delay: 0s}.nut-icon{display:inline-block;position:relative;width:var(--nut-icon-width);height:var(--nut-icon-height);line-height:var(--nut-icon-line-height);text-align:right}.nut-icon:before{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.nut-icon__img{width:var(--nut-icon-width);height:var(--nut-icon-height);object-fit:contain}.nut-icon-loading,.nut-icon-loading1{display:inline-block;animation:rotation 1s infinite linear}.nut-icon-am-infinite{-webkit-animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-iteration-count:infinite;animation-direction:alternate}.nut-icon-am-jump{-webkit-animation-name:nutJumpOne;-webkit-animation-duration:var(--animate-duration);-webkit-animation-timing-function:ease;-webkit-animation-delay:var(--animate-delay);animation-name:nutJumpOne;animation-duration:var(--animate-duration);animation-timing-function:ease;animation-delay:var(--animate-delay)}.nut-icon-am-jump.nut-icon-am-infinite{-webkit-animation-name:nutJump;animation-name:nutJump}.nut-icon-am-rotate{-webkit-animation-name:rotation;-webkit-animation-duration:var(--animate-duration);-webkit-animation-timing-function:linear;-webkit-animation-delay:var(--animate-delay);animation-name:rotation;animation-duration:var(--animate-duration);animation-timing-function:linear;animation-delay:var(--animate-delay)}.nut-icon-am-rotate.nut-icon-am-infinite{-webkit-animation-direction:normal;animation-direction:normal}.nut-icon-am-blink{-webkit-animation-name:nutBlink;-webkit-animation-duration:var(--animate-duration);-webkit-animation-timing-function:ease-in-out;-webkit-animation-delay:var(--animate-delay);animation-name:nutBlink;animation-duration:var(--animate-duration);animation-timing-function:linear;animation-delay:var(--animate-delay)}.nut-icon-am-breathe{-webkit-animation-name:nutBreathe;-webkit-animation-duration:var(--animate-duration);-webkit-animation-timing-function:ease-in-out;-webkit-animation-delay:var(--animate-delay);animation-name:nutBreathe;animation-duration:var(--animate-duration);animation-timing-function:ease-in-out;animation-delay:var(--animate-delay)}.nut-icon-am-flash{-webkit-animation-name:nutFlash;-webkit-animation-duration:var(--animate-duration);-webkit-animation-timing-function:ease-in-out;-webkit-animation-delay:var(--animate-delay);animation-name:nutFlash;animation-duration:var(--animate-duration);animation-timing-function:ease-in-out;animation-delay:var(--animate-delay)}.nut-icon-am-bounce{-webkit-animation-name:nutBounce;-webkit-animation-duration:var(--animate-duration);-webkit-animation-timing-function:ease-in-out;-webkit-animation-delay:var(--animate-delay);animation-name:nutBounce;animation-duration:var(--animate-duration);animation-timing-function:ease-in-out;animation-delay:var(--animate-delay)}.nut-icon-am-bounce.nut-icon-am-infinite{-webkit-animation-direction:normal;animation-direction:normal}.nut-icon-am-shake{-webkit-animation-name:nutShake;-webkit-animation-duration:var(--animate-duration);-webkit-animation-timing-function:ease-in-out;-webkit-animation-delay:var(--animate-delay);animation-name:nutShake;animation-duration:var(--animate-duration);animation-timing-function:ease-in-out;animation-delay:var(--animate-delay)}@keyframes rotation{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@-webkit-keyframes nutJump{to{transform:scale3d(.8,1,.9) translateY(-10px)}}@keyframes nutJump{to{transform:scale3d(.8,1,.9) translateY(-10px)}}@-webkit-keyframes nutJumpOne{50%{transform:scale3d(.8,1,.9) translateY(-10px)}to{transform:scaleZ(1) translateY(0)}}@keyframes nutJumpOne{50%{transform:scale3d(.8,1,.9) translateY(-10px)}to{transform:scaleZ(1) translateY(0)}}@-webkit-keyframes nutBlink{0%{opacity:0}to{opacity:1}}@keyframes nutBlink{0%{opacity:0}to{opacity:1}}@-webkit-keyframes nutBreathe{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}@keyframes nutBreathe{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}@-webkit-keyframes nutFlash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes nutFlash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@-webkit-keyframes nutBounce{0%,20%,53%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0) scaleY(1.1);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0) scaleY(1.05);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translate3d(0,0,0) scaleY(.95);transform:translateZ(0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-4px,0) scaleY(1.02);transform:translate3d(0,-4px,0) scaleY(1.02)}}@keyframes nutBounce{0%,20%,53%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0) scaleY(1.1);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0) scaleY(1.05);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translate3d(0,0,0) scaleY(.95);transform:translateZ(0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-4px,0) scaleY(1.02);transform:translate3d(0,-4px,0) scaleY(1.02)}}@-webkit-keyframes nutShake{0%{-webkit-transform:translateX(0);transform:translate(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translate(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translate(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translate(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translate(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translate(0)}}@keyframes nutShake{0%{-webkit-transform:translateX(0);transform:translate(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translate(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translate(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translate(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translate(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translate(0)}}