div+css实现立体视觉差异点赞喜欢按钮点击动画效果代码
代码语言:html
所属分类:其他
代码描述:div+css实现立体视觉差异点赞喜欢按钮点击动画效果代码
代码标签: div css 立体 视觉 差异 点赞 喜欢 按钮 点击 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; :root { --heart: #757575; --size: 1vmin; --tran: all 0.33s ease 0s; } *, *:before, *:after { box-sizing: border-box; transform-style: preserve-3d; } body { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 50%, #4b4b4b, #000); } .content { width: calc(var(--size) * 20); height: calc(var(--size) * 20); display: flex; flex-wrap: wrap; } .heart { width: 100%; height: 100%; position: absolute; cursor: pointer; transition: var(--tran); display: flex; align-items: center; justify-content: center; perspective-origin: center; transform: translateZ(calc(var(--size) * -7)); background: #0004; border-radius: calc(var(--size) * 10); animation: zoom-out 1s ease 0s; animation-fill-mode: forwards; box-shadow: 0 0 calc(var(--size) * 2) 0 #000 inset, 0 calc(var(--size) * 0.5) calc(var(--size) * 2) 0 #fff4, 0 calc(var(--size) * -0.5) calc(var(--size) * 2) 0 #000; } input { display: none; } @keyframes zoom-in { 0% { perspective: calc(var(--size) * 20); } 50% { perspective: calc(var(--size) * 4); filter: blur(calc(var(--size) * 0.01)); } 100% { perspective: calc(var(--size) * 8); } } @keyframes zoom-out { 0% { perspective: calc(var(--size) * 8); } 100% { perspective: calc(var(--size) * 20); } } .heart span { position: absolute; font-size: calc(var(--size) * 10); -webkit-text-stroke: var(--size) #262626; -webkit-text-fill-color: #fff0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; filter: grayscale(1) brightness(5); } .heart span:nth-child(1) { transform: translateZ(0vmin); -webkit-text-stroke-color: #0a0000; } .heart span:nth-child(2) { transform: translateZ(0.125vmin); -webkit-text-stroke-color: #140000; } .heart span:nth-child(3) { transform: translateZ(0.25vmin); -webkit-text-stroke-color: #1e0000; } .heart span:nth-child(4) { transform: translateZ(0.375vmin); -webkit-text-stroke-color: #280000; } .heart span:nth-child(5) { transform: translateZ(0.5vmin); -webkit-text-stroke-color: #320000; } .heart span:nth-child(6) { transform: translateZ(0.625vmin); -webkit-text-stroke-color: #3c0000; } .heart span:nth-child(7) { transform: translateZ(0.75vmin); -webkit-text-stroke-color: #460000; } .heart span:nth-child(8) { transform: translateZ(0.875vmin); -webkit-text-stroke-color: #500000; } .heart span:nth-child(9) { transform: translateZ(1vmin); -webkit-text-stroke-color: #5a0000; } .heart span:nth-child(10) { transform: translateZ(1.125vmin); -webkit-text-stroke-color: #640000; } .heart span:nth-child(11) { transform: translateZ(1.25vmin); -webkit-text-stroke-color: #6e0000; } .heart span:nth-child(12) { transform: translateZ(1.375vmin); -webkit-text-stroke-color: #780000; } .heart span:nth-child(13) { transform: translateZ(1.5vmin); -webkit-text-stroke-color: #820000; } .heart span:nth-child(14) { transform: translateZ(1.625vmin); -webkit-text-stroke-color: #8c0000; } .heart span:nth-child(15) { transform: translateZ(1.75vmin); -webkit-text-stroke-color: #960000; } .heart span:nth-child(16) { tran.........完整代码请登录后点击上方下载按钮下载查看
网友评论0