gsap+Flip+CustomBounce3实现色卡点击弹跳切换动画效果代码
代码语言:html
所属分类:其他
代码描述:gsap+Flip+CustomBounce3实现色卡点击弹跳切换动画效果代码
代码标签: gsap Flip CustomBounce3 色卡 切换 弹跳
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300&display=swap'); body { display: grid; place-content: center; height: 100vh; background: linear-gradient(#ddd 50%, #fff 0); } .comp { height: 80vmin; width: 60vmin; display: grid; min-width: 30ch; grid-template: "preview" 64vmin "thumbnails" 16vmin / 100%; overflow: hidden; font: bold 1rem 'Cormorant Garamond', serif; color: #eee; text-shadow: 1px 1px 1px #000a; padding: 5px; border: 1px solid #eee; box-shadow: inset 0 5px 20px -10px #222; } .comp .preview { box-shadow: 0 0 2px #f003; width: 100%; height: 100%; z-index: 1; } .comp .thumbnails { display: flex; height: 100%; } .comp .thumbnail { flex: 1 1 auto; background: var(--c); width: 100%; height: 100%; overflow: hidden; display: grid; place-items: center; } .comp .thumbnails .thumbnail { cursor: pointer; box-shadow: inset 0 2vmin 2px #0003; text-indent: -100vw; overflow: hidden; } </style> </head> <body> <!-- #2C09DB #09E6C7 < #88CE02 > #E68F09 #DB074E--> <div class="comp"> <div class="preview"> <div class="thumbnail" style="--c:#88CE02">#88CE02</div> </div> &l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0