免费抠图软件_图片加文字_在线制作拼图的网站_图片处理神器_在线抠图 免费
当前位置:建站首页 > 新闻资讯 > 最新签约 >

抓住小程序风口_loading动画特效小结

发表日期:2021-01-12 14:46文章编辑:jianzhan浏览次数: 标签:    

loading动画特效小结     作者:   本篇文章主要分享了javascript实现loading动画特效的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
border-radius:50%; background: linear-gradient(transparent 0%, transparent 70%, #333 30% ,#333 100%); -webkit-animation: loading-1 .6s linear 0s infinite; @-webkit-keyframes loading-2{ transform: scaleY(1); 50%{ transform: scaleY(0.4); 100%{ transform: scaleY(1); .demo-2 .loading i{ display: inline-block; width: 4px; height: 35px; border-radius: 2px; margin:0 2px; background-color: #333; .demo-2 .loading i:nth-child(1){ -webkit-animation:loading-2 1s ease-in .1s infinite; .demo-2 .loading i:nth-child(2){ -webkit-animation:loading-2 1s ease-in .2s infinite; .demo-2 .loading i:nth-child(3){ -webkit-animation:loading-2 1s ease-in .3s infinite; .demo-2 .loading i:nth-child(4){ -webkit-animation:loading-2 1s ease-in .4s infinite; .demo-2 .loading i:nth-child(5){ -webkit-animation:loading-2 1s ease-in .5s infinite; .demo-3 .loading{ position: relative; .demo-3 .loading i{ display: block; width: 15px; height: 15px; border-radius: 50%; background-color: #333; position: absolute; .demo-3 .loading i:nth-child(1){ top: 25px; left: 0; -webkit-animation:loading-3 1s ease 0s infinite; .demo-3 .loading i:nth-child(2){ top: 17px; left: 17px; -webkit-animation:loading-3 1s ease -0.12s infinite; .demo-3 .loading i:nth-child(3){ top: 0px; left: 25px; -webkit-animation:loading-3 1s ease -0.24s infinite; .demo-3 .loading i:nth-child(4){ top: -17px; left: 17px; -webkit-animation:loading-3 1s ease -0.36s infinite; .demo-3 .loading i:nth-child(5){ top: -25px; left: 0; -webkit-animation:loading-3 1s ease -0.48s infinite; .demo-3 .loading i:nth-child(6){ top: -17px; left: -17px; -webkit-animation:loading-3 1s ease -0.6s infinite; .demo-3 .loading i:nth-child(7){ top: 0px; left: -25px; -webkit-animation:loading-3 1s ease -0.72s infinite; .demo-3 .loading i:nth-child(8){ top: 17px; left: -17px; -webkit-animation:loading-3 1s ease -0.84s infinite; @-webkit-keyframes loading-3{ 50%{ transform: scale(0.4); opacity: .3 100%{ transform: scale(1); opacity: 1 @-webkit-keyframes loading-4{ transform: scale(0); opacity: 0; opacity: 1; 100%{ transform: scale(1); opacity: 0; .demo-4 .loading i:nth-child(1){ -webkit-animation:loading-4 1s linear 0s infinite; .demo-4 .loading i:nth-child(2){ -webkit-animation:loading-4 1s linear 0.2s infinite; .demo-4 .loading i:nth-child(3){ -webkit-animation:loading-4 1s linear 0.4s infinite; .demo-4 .loading{ width: 60px; height: 60px; position: relative; .demo-4 .loading i{ display: block; width: 60px; height: 60px; border-radius: 50%; background-color: #333; position: absolute; left: 0; top: 0; opacity: 0; .demo-5 .loading{ width: 40px; height: 40px; position: relative; .demo-5 .loading i{ display: block; border:2px solid #333; border-color: transparent #333; border-radius: 50%; position: absolute; .demo-5 .loading i:first-child{ width: 35px; height: 35px; top:0px; left: 0px; -webkit-animation:loading-5 1s ease-in-out 0s infinite; .demo-5 .loading i:last-child{ width: 15px; height: 15px; top:10px; left: 10px; -webkit-animation:loading-5 1s ease-in-out 0.5s infinite reverse; @-webkit-keyframes loading-5{ transform: rotate(0deg) scale(1); 50%{ transform: rotate(180deg) scale(0.6); 100%{ transform: rotate(360deg) scale(1); .demo-6 .loading{ width: 80px; height: 20px; position: relative; .demo-6 .loading i{ display: block; width: 20px; height: 20px; border-radius: 50%; background-color: #333; margin-right: 10px; position: absolute; @-webkit-keyframes loading-6{ left: 100px; top: 0; 80%{ left: 0; top: 0; 85%{ left: 0; top: -20px; width: 20px; height: 20px; 90%{ width: 40px; height: 20px; 95%{ left: 100px; top: -20px; width: 20px; height: 20px; 100%{ left: 100px; top: 0; .demo-6 .loading i:nth-child(1){ -webkit-animation:loading-6 2s linear 0s infinite; .demo-6 .loading i:nth-child(2){ -webkit-animation:loading-6 2s linear -0.4s infinite; .demo-6 .loading i:nth-child(3){ -webkit-animation:loading-6 2s linear -0.8s infinite; .demo-6 .loading i:nth-child(4){ -webkit-animation:loading-6 2s linear -1.2s infinite; .demo-6 .loading i:nth-child(5){ -webkit-animation:loading-6 2s linear -1.6s infinite; .demo-7 .loading i { background-color: #777; border-radius: 2px; margin: 2px; -webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute; width: 5px; height: 15px; .demo-7 .loading-1 { top: 20px; left: 0; -webkit-animation: loading 1.2s 0.12s infinite ease-in-out; -moz-animation: loading 1.2s 0.12s infinite ease-in-out; -ms-animation: loading 1.2s 0.12s infinite ease-in-out; -o-animation: loading 1.2s 0.12s infinite ease-in-out; animation: loading 1.2s 0.12s infinite ease-in-out; .demo-7 .loading-2 { top: 13.63636px; left: 13.63636px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: loading 1.2s 0.24s infinite ease-in-out; -moz-animation: loading 1.2s 0.24s infinite ease-in-out; -ms-animation: loading 1.2s 0.24s infinite ease-in-out; -o-animation: loading 1.2s 0.24s infinite ease-in-out; animation: loading 1.2s 0.24s infinite ease-in-out; .demo-7 .loading-3 { top: 0; left: 20px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-animation: loading 1.2s 0.36s infinite ease-in-out; -moz-animation: loading 1.2s 0.36s infinite ease-in-out; -ms-animation: loading 1.2s 0.36s infinite ease-in-out; -o-animation: loading 1.2s 0.36s infinite ease-in-out; animation: loading 1.2s 0.36s infinite ease-in-out; .demo-7 .loading-4 { top: -13.63636px; left: 13.63636px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation: loading 1.2s 0.48s infinite ease-in-out; -moz-animation: loading 1.2s 0.48s infinite ease-in-out; -ms-animation: loading 1.2s 0.48s infinite ease-in-out; -o-animation: loading 1.2s 0.48s infinite ease-in-out; animation: loading 1.2s 0.48s infinite ease-in-out; .demo-7 .loading-5 { top: -20px; left: 0; -webkit-animation: loading 1.2s 0.6s infinite ease-in-out; -moz-animation: loading 1.2s 0.6s infinite ease-in-out; -ms-animation: loading 1.2s 0.6s infinite ease-in-out; -o-animation: loading 1.2s 0.6s infinite ease-in-out; animation: loading 1.2s 0.6s infinite ease-in-out; .demo-7 .loading-6 { top: -13.63636px; left: -13.63636px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: loading 1.2s 0.72s infinite ease-in-out; -moz-animation: loading 1.2s 0.72s infinite ease-in-out; -ms-animation: loading 1.2s 0.72s infinite ease-in-out; -o-animation: loading 1.2s 0.72s infinite ease-in-out; animation: loading 1.2s 0.72s infinite ease-in-out; .demo-7 .loading-7 { top: 0; left: -20px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-animation: loading 1.2s 0.84s infinite ease-in-out; -moz-animation: loading 1.2s 0.84s infinite ease-in-out; -ms-animation: loading 1.2s 0.84s infinite ease-in-out; -o-animation: loading 1.2s 0.84s infinite ease-in-out; animation: loading 1.2s 0.84s infinite ease-in-out; .demo-7 .loading-8 { top: 13.63636px; left: -13.63636px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation: loading 1.2s 0.96s infinite ease-in-out; -moz-animation: loading 1.2s 0.96s infinite ease-in-out; -ms-animation: loading 1.2s 0.96s infinite ease-in-out; -o-animation: loading 1.2s 0.96s infinite ease-in-out; animation: loading 1.2s 0.96s infinite ease-in-out; @-webkit-keyframes loading { 50% { opacity: 0.3; 100% { opacity: 1; @-moz-keyframes loading { 50% { opacity: 0.3; 100% { opacity: 1; @-ms-keyframes loading { 50% { opacity: 0.3; 100% { opacity: 1; @-o-keyframes loading { 50% { opacity: 0.3; 100% { opacity: 1; @keyframes loading { 50% { opacity: 0.3; 100% { opacity: 1; /style /head body div div div i /i /div /div div div i /i i /i i /i i /i i /i /div /div div div i /i i /i i /i i /i i /i i /i i /i i /i /div /div div div i /i i /i i /i /div /div div div i /i i /i /div /div div div i /i i /i i /i i /i i /i /div /div div div i /i i /i i /i i /i i /i i /i i /i i /i /div /div /div /body /html

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持凡科!


相关新闻