三维悬浮按钮动画效果
代码语言:html
所属分类:悬停
代码描述:三维悬浮按钮动画效果,采用three及gsap
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @font-face { font-family: "bw"; src: url("https://robindelaporte.fr/codepen/play/BwModelicaSS01-ExtraBold.woff") format("woff"); } html { font-size: 62.5%; } .home { position: fixed; height: 100vh; width: 100vw; overflow: hidden; top: 0%; left: 0%; background-color: #e9f5ff; } .home canvas { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 4; pointer-events: none; } .home span { position: relative; z-index: 6; font-family: "bw"; text-decoration: none; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); font-size: 3rem; color: #fff; pointer-events: none; } .home a { font-family: "bw"; text-decoration: none; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); font-size: 3rem; color: #fff; background-color: #acc7ed; border-radius: 10rem; padding: 1.5rem 4rem 2rem; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } .home a span { position: relative; opacity: 0; } .home a:after { content: &qu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0