css实现一个逼真相机拍照闪光动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现一个逼真相机拍照闪光动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> body{background-color: #1F1F1F;overflow: hidden} .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 5px; box-shadow: 0px 30px 50px -20px rgba(0, 0, 0, 0.7); -webkit-animation: 5s angle infinite; animation: 5s angle infinite; } .camera-top, .camera-mid, .camera-bottom { width: 360px; } .camera-top { height: 60px; background: linear-gradient(to right, #e2e2e2 0%, #f5f5f5 10%, #f5f5f5 90%, #e2e2e2 100%); border: 1px solid #DCDCDC; border-top-left-radius: 5px; } .camera-top:before { display: block; content: ''; position: absolute; top: -20px; right: 0; width: 210px; height: 20px; background: linear-gradient(to right, #f5f5f5 0%, #f5f5f5 174px, #e2e2e2 100%); border: 1px solid #DCDCDC; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom: none; box-shadow: inset 0 15px 15px -15px #FDFDFD; } .camera-top .zoom { position: absolute; top: -15px; left: 30px; width: 42px; height: 9px; background: linear-gradient(to right, #b0b0b0 0%, #e2e2e2 30%, #e2e2e2 50%, #e2e2e2 70%, #b0b0b0 100%); border: 1px solid #A3A3A3; border-top-left-radius: 3px; border-top-right-radius: 3px; box-shadow: inset 0 15px 15px -15px #FDFDFD; } .camera-top .zoom:before { display: block; content: ''; position: relative; top: -6px; left: 50%; transform: translateX(-50%); width: 20px; height: 4px; background: linear-gradient(to right, #b0b0b0 0%, #e2e2e2 50%, #b0b0b0 100%); border: 1px solid #A3A3A3; border-top-left-radius: 3px; border-top-right-radius: 3px; } .camera-top .zoom:after { display: block; content: ''; position: relative; top: 3px; left: 50%; transform: translateX(-50%); width: 46px; height: 4px; background: linear-gradient(to right, #b0b0b0 0%, #e2e2e2 30%, #e2e2e2 50%, #e2e2e2 70%, #b0b0b0 100%); border: 1px solid #A3A3A3; border-bottom: none; border-top-left-radius: 3px; border-top-right-radius: 3px; } .camera-top .mode-changer { position: absolute; top: -20px; left: 82px; width: 60px; height: 16px; background: linear-gradient(to right, #b0b0b0 0%, #e2e2e2 30%, #e2e2e2 50%, #e2e2e2 70%, #b0b0b0 100%); border: 1px solid #A3A3A3; border-radius: 3px; box-shadow: inset 0 15px 15px -15px #FDFDFD; } .camera-top .mode-changer:after { display: block; content: ''; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 50px; height: 2px; background: linear-gradient(to right, #b0b0b0 0%, #e2e2e2 30%, #e2e2e2 50%, #e2e2e2 70%, #b0b0b0 100%); border: 1px solid #A3A3A3; border-bottom: none; } .camera-top .sides { width: 100%; } .camera-top .sides:before, .camera-top .sides:after { display: block; content: ''; position: absolute; top: 24px; width: 8px; height: 30px; background: linear-gradient(to bottom, #828181 0%, #696767 10%, #4f4d4d 50%, #403e3f 100%); border: 1px solid #3E3C3D; border-radius: 2px; box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.5); } .camera-top .sides:before { left: -4px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .camera-top .sides:after { right: -4px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .camera-top .range-finder { position: absolute; top: 10px; left: 105px; width: 30px; height: 20px; background: #3E3C3D; border-radius: 3px; box-shadow: inset 0 0 5px 3px #333132; } .camera-top .range-finder:before { display: block; content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; background: #797878; border-radius: 100%; } .camera-top .focus { position: absolute; top: -14px; left: 156px; width: 15px; height: 15px; background: #3F3D3E; border-radius: 100%; box-shadow: inset 0 0 4px 3px #2D2B2B, inset 0 4px 5px 0 #F5F5F5, inset 0 -3px 4px -2px #A3A2A2; } .camera-top .red { position: absolute; top: 5px; left: 165px; width: 30px; height: 30px; background: #DC2839; border-radius: 100%; } .camera-top .view-finder { position: absolute; left: 210px; width: 48px; height: 30px; background: radial-gradient(ellipse at center, #828181 0%, #403e3f 85%, #403e3f 100%); border: 3px solid #312F2F; border-radius: 4px; box-shadow: inset 0 8px 8px -8px #FDFDFD; } .camera-top .flash { position: absolute; top: -6px; right: 20px; width: 58px; height: 46px; background: radial-gradient(ellipse at center, #828181 0%, #403e3f 70%, #403e3f 100%); border: 2px solid #312F2F; border-radius: 3px; box-shadow: inset 0 8px 8px -8px #FDFDFD; } .camera-top .flash:before, .camera-top .flash:after { display: block; content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .camera-top .flash:before { width: 90%; height: 70%; background: radial-gradient(ellipse at center, #696767 0%, #1e1e1e 50%, #1e1e1e 100%); } .camera-top .flash:after { width: 16px; height: 14px; backgroun.........完整代码请登录后点击上方下载按钮下载查看
网友评论0