canvas实现球形空间变换动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas实现球形空间变换动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> /********************************************* * GLOBAL *********************************************/ body, html { overflow: hidden; font-family: Helvetica, Arial, sans-serif; color: #fff; font-size: 11px; background: #010c12; } /********************************************* * HEADER *********************************************/ header { position: relative; width: 100%; height: 27px; margin: 0; padding: 0 8px 8px 8px; overflow: hidden; z-index: 5; background: rgba( 60, 60, 60, 0.5 ); color: #eee; -webkit-transition: height .22s ease-out; -moz-transition: height .22s ease-out; -o-transition: height .22s ease-out; transition: height .22s ease-out; } header.open { height: 165px; } header h1 { font-family: Molengo, Helvetica, Arial, sans-serif; float: left; margin-top: 1px; } header .header-instruction { float: left; margin: 12px 0 0 15px; font-size: 10px; font-style: italic; color: #999; -webkit-transition: opacity .18s linear; -moz-transition: opacity .18s linear; -o-transition: opacity .18s linear; transition: opacity .18s linear; } header.open .header-instruction { opacity: 0; } header div.extra { margin: 45px 0 0 20px; clear: both; -webkit-transition: opacity .18s linear; -moz-transition: opacity .18s linear; -o-transition: opacity .18s linear; transition: opacity .18s linear; } header div.extra h3 { margin-bottom: 10px; } header a { padding: 2px 4px 2px 2px; color: #999; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-in; } header a:hover { padding: 2px 4px 2px 2px; color: #ddd; background-color: #333; border-radius: 1px; } header section { height: 120px; padding: 0 25px; float: left; border-left: 1px #333 solid; } header p { margin-bottom: 5px; font-size: 12px; letter-spacing: 0.05em; } #about { padding-left: 0; border: none; } #about p.credits { margin: 15px 0 2px 0; font-style: italic; color: #666; font-size: 11px; line-height: 1.4em; } #about a:hover { padding: 2px 10px 2px 8px; } #share iframe, #share div { display: inline-block; } #retweet-button { margin-right: 6px; } a[href="http://www.w3counter.com"] { display: none!important; } .no-canvas { color: #999999; font-size: 24px; text-align: center; margin-top: 150px; } /*******************************************.........完整代码请登录后点击上方下载按钮下载查看
网友评论0