anime实现拖拽增减数字动画效果代码
代码语言:html
所属分类:动画
代码描述:anime实现拖拽增减数字动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { height: 100%; } body { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; font-family: 'Roboto', sans-serif; font-weight: 700; color: #231F20; font-size: 20px; background: #FFF3F5; } .wrap { position: relative; margin-left: 65px; margin-top: 65px; } .stepper { margin-top: -65px; margin-left: -65px; width: 30px; height: 30px; background: #FF4957; cursor: pointer; width: 130px; height: 130px; border-radius: 40px; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; color: #fff; font-size: 64px; position: relative; box-shadow: -1px 57px 80px -17px rgba(255, 73, 87, 0.25); overflow: hidden; z-index: 2; } .stepper span { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; top: 28px; left: 50%; -webkit-transform: translateY(0) translateX(-50%); transform: translateY(0) translateX(-50%); } .stepper span.active { -webkit-transform: translateY(0) translateX(-50%); transform: translateY(0) translateX(-50%); } .stepper span.hide { opacity: 0; } .arrow-top { position: absolute; top: -120px; left: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 50px; } .arrow-bottom { position: absolute; bottom: -57px; left: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 50px; } .desc { position: absolute; top: 40px; left: 40px; color: #ffbac1; } </style> </head> <body> <div class="wrap"> <div class="stepper"> <span class="count first active hide">15</span> <span class="count second next"></span> </div> </div> <span class="desc">Hold & Drag</span> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/anime-min.js"></script> <script> var mousePos = 0; var currentPos = 0; var position = 0; var drag.........完整代码请登录后点击上方下载按钮下载查看
网友评论0