单个div+css实现电影拍片器合上动画效果代码
代码语言:html
所属分类:动画
代码描述:单个div+css实现电影拍片器合上动画效果代码,合上后显示文字字母。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { min-height: 250px; height: 100vh; position: relative; background-color: #000; } div { position: absolute; left: 50%; top: 50%; } div:before, div:after { width: 100%; height: 100%; display: block; content: ''; position: absolute; background-repeat: no-repeat; } @media (max-width: 400px) { div { transform: scale(0.8); } } #film { box-sizing: border-box; font-size: 10px; width: 34em; height: 5em; margin-left: -17em; margin-top: 2em; } #film:before { top: -5.5em; left: 1.2em; background-image: repeating-linear-gradient(to right, white, white 2em, rgba(255,255,255,0) 2em, rgba(255,255,255,0) 4em), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent); background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%; background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; transform: rotate(0deg) skew(25deg); -webkit-animation: -2s filmclap 8s infinite linear, -2s filmclapbg1 8s infinite steps(1); animation: -2s filmclap 8s infinite linear, -2s filmclapbg1 8s infinite steps(1); transform-origin: bottom left; } #film:after { background-image: repeating-linear-gradient(to right, white, white 2em, rgba(255,255,255,0) 2em, rgba(255,255,255,0) 4em), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent); background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%; background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; transform: skew(-25deg); -webkit-animation: -2s filmclapbg2 8s infinite steps(1) both; animation: -2s filmclapbg2 8s infinite steps(1) both; } @-webkit-keyframes filmclap { 0%, 45% { transform: rotate(0deg) skew(25deg); } 50%, 51% { transform: rotate(-32deg) skew(25deg); } 52%, 93% { transform: rotate(0deg) skew(25deg); } 98%, 99% { transform: rotate(-32deg) skew(25deg); } 100% { transform: rotate(0deg) skew(25deg); } } @keyframes filmclap { 0%, 45% { transform: rotate(0deg) skew(25deg); } 50%, 51% { transform: rotate(-32deg) skew(25deg); } 52%, 93% { transform: rotate(0deg) skew(25deg); } 98%, 99% { transform: rotate(-32deg) skew(25deg); } 100% { transform: rotate(0deg) skew(25deg); } } @-webkit-keyframes filmclapbg1 { 0%, 51.999999% { background-image: repeating-linear-gradient(to right, white, white 2em, rgba(255,255,255,0) 2em, rgba(255,255,255,0) 4em); } 52%, 100% { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0