flyaway实现纸飞机动画效果代码
代码语言:html
所属分类:动画
代码描述:flyaway实现纸飞机动画效果代码
下面为部分代码预览,完整代码请点击下载或在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/bootstrap.3.3.4.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/flyaway.min.css"> <style> * { transition: all .2s ease-in-out; outline: none; } @keyframes text-fade { 0% { opacity: 0; } } body { background-color: #2d7586; font-family: Galdeano,"Hiragino Sans GB", "Microsoft YaHei", Trebuchet, "Trebuchet MS", Tahoma, "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; color: #fff; animation: text-fade 2s ease-in-out; } @media (min-width: 768px) { .container { max-width: 750px; animation: text-fade 1s; } } .jumbotron { background-color: transparent; } a { color: #CCD1D9; } a:hover { color: rgba(170, 178, 189, 0.3); text-decoration: none; } @keyframes bounce-in { 0% { padding-right: 30px; } 40% { padding-right: 6px; } 50% { padding-left: 30px; } 100% { padding-left: 6px; } } .download { font-size: 20px; font-family: 'Pacifico'; overflow: visible; border-radius: 3px; position: relative; padding-right: 30px; border: none; background-color: #fff; color: #2d7586; display: block; margin: 5px auto; height: 50px; width: 150px; } .download:hover { background-color: #fff; } .download:hover i { transform: rotate(10deg); } .download i { position: absolute; top: 15px; right: 15px; } .download.bounce-in { background-color: rgb(50, 130, 149); border: none; color: #fff; padding-right: 6px; animation: bounce-in 0.4s; } .block { height: 80px; } .animate { font-size: 20px; overflow: visible; border-radius: 4px; background-color: transparent; position: relative; border: 1.5px solid white; margin-top: 15px; margin-bottom: 15px; height: 40px; } .select { border: none; border-radius: 4px; padding: .75rem; margin: 15px; background-color: white; color: #2d7586; font-size: 20px; } .float { animation: float 4s infinite ease-in-out alternate; } @keyframes zoom { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0