wickedcss动画效果合集代码
代码语言:html
所属分类:动画
代码描述:wickedcss动画效果合集代码
代码标签: 合集
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/materialize.css"> <style> body{ background: black; } /*! * Basic styling on the library page */ #animationelement { background: url("//repo.bfw.wiki/bfwrepo/image/5e3240c626ad7.png") no-repeat center; background-size: contain; height: 190px; width: 200px; margin-left: auto; margin-right: auto; } .numberimage { max-height: 80px; max-width: 80px; } .btn-large { text-transform: none !important; } code { display: block; background-color: #E8E8E8; color: #888888; border-radius: 8px; width: 96%; padding: 2%; } .invisible { visibility: hidden; } </style> <!-- Material Design Icons --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/wickedcss.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/modernizr.custom.2.8.1.js"></script> </head> <body> <div class="container"> <!-- Animation image --> <!-- <div class="section"></div> <div class="section"></div>--> <div class="section"></div> <div class="section"></div> <div class="container center-align"> <div class="col s12"> <div id="animationelement" class="floater"></div> </div> </div> <div class="section"></div> <div class="section"></div> <div class="container center-align"> <div class="row"> <div class="col s12 m3 l2"> <a href="#" id="floaterButton" class="waves-effect waves-light btn-large white blue-text">floater</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="barrelRollButton" class="waves-effect waves-light btn-large white blue-text" >barrelRoll</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="rollerRightButton" class="waves-effect waves-light btn-large white blue-text" >rollerRight</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="rollerLeftButton" class="waves-effect waves-light btn-large white blue-text">rollerLeft</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="heartbeatButton" class="waves-effect waves-light btn-large white blue-text" >heartbeat</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="pulseButton" class="waves-effect waves-light btn-large white blue-text" >pulse</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="rotationButton" class="waves-effect waves-light btn-large white blue-text" >rotation</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="sideToSideButton" class="waves-effect waves-light btn-large white blue-text">sideToSide</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="zoomerButton" class="waves-effect waves-light btn-large white blue-text" >zoomer</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="zoomerOutButton" class="waves-effect waves-light btn-large white blue-text">zoomerOut</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="spinnerButton" class="waves-effect waves-light btn-large white blue-text" >spinner</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="wiggleButton" class="waves-effect waves-light btn-large white blue-text" >wiggle</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="shakeButton" class="waves-effect waves-light btn-large white blue-text" >shake</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="poundButton" class="waves-effect waves-light btn-large white blue-text" >pound</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="slideUpButton" class="waves-effect waves-light btn-large white blue-text" >slideUp</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="slideDownButton" class="waves-effect waves-light btn-large white blue-text" >slideDown</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="slideRightButton" class="waves-effect waves-light btn-large white blue-text" >slideRight</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="slideLeftButton" class="waves-effect waves-light btn-large white blue-text">slideLeft</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="fadeInButton" class="waves-effect waves-light btn-large white blue-text" >fadeIn</a> <div class="section"></div> </div> <div.........完整代码请登录后点击上方下载按钮下载查看
网友评论0