css模拟相机快门按下拍照变成照片效果代码
代码语言:html
所属分类:动画
代码描述:css模拟相机快门按下拍照变成照片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css"> <style> html { height: 100%; overflow: hidden; } body { min-height: 100%; } .container { cursor: pointer; background-position: center center; background-size: cover; background-image: url("//repo.bfw.wiki/bfwrepo/image/6032e554eeb71.png"); width: 100vw; height: 100vh; position: relative; } .container:focus { display: none; } .flap { width: 150vmax; height: 150vmax; position: absolute; bottom: 50%; right: 50%; pointer-events: none; will-change: transform; background: hsl(calc(1turn * var(--p)), 80%, 80%); background: linear-gradient(35deg, #555, black); border: solid 4px #999; --p: calc(var(--i) / var(--flaps)); -webkit-animation: click 0.9s cubic-bezier(0.5, 0, 0.5, 1) 0.1s; animation: click 0.9s cubic-bezier(0.5, 0, 0.5, 1) 0.1s; transform-origin: bottom right; transform: rotate(-0.5turn) rotate(calc(1turn * var(--p))) skewX(30deg) translateX(-100%) translateY(90%); } @-webkit-keyframes click { 48%, 52% { transform: rotate(-0.25turn) rotate(calc(1turn * var(--p))) skewX(30deg) translateX(0%) translateY(0%); } } @keyframes click { 48%, 52% { transform: rotate(-0.25turn) rotate(calc(1turn * var(--p))) skewX(30deg) translateX(0%) translateY(0%); } } .photo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background-position: center center; background-size: cover; box-shadow: 0 10px 40px #000; margin: -1rem; margin-bottom: -5rem; border: solid 1rem #fff; border-bottom-width: 5rem; -.........完整代码请登录后点击上方下载按钮下载查看
网友评论0