TweenLite实现打台球动画效果代码
代码语言:html
所属分类:动画
代码描述:TweenLite实现打台球动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/modernizr-2.js"></script> <style> html, body { height: 100%; } body { background-color: #262626; font-family: 'Open Sans', sans-serif; overflow: hidden; } h1 { font-size: 16px; width: 300px; color: #838484; font-weight: 300; text-align: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -180px); -ms-transform: translate(-50%, -180px); transform: translate(-50%, -180px); padding: 10px 20px; border: 1px solid rgba(255, 255, 255, 0.3); } h1 span { color: #89c540; } h1 strong { color: #fff; } #box { background-color: #88ce02; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; } .boxSmall { position: absolute; background-color: #70a40b; position: absolute; bottom: 0; left: 0; width: 25px; height: 75px; z-index: 2; } .boxTiny { background-color: #577a14; height: 50px; bottom: 0; right: 0; left: auto; z-index: 3; } </style> </head> <body> <div id="box" style="border-radius: 100%; transform: translate(-50%, 0%) matrix(1, 0, 0, 1, 0, -50); left: 50%;"> <div class="boxSmall" style="visibility: inherit; opacity: 1; height: 20px; width: 20px; border-radius: 100%; transform: matrix(1, 0, 0, 1, 20, -20);"></div> <div class="boxSmall boxTiny" style="visibility: hidden; opacity: 0; transform-origin: right top 0px; transform: matrix(400, 0, 0, 1, -100, -25);"></div> </div> <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/TweenLite.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/CSSPlugin.js"></script> <script> var $bo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0