css布局实现环形摄像头效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现环形摄像头效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
* {
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 1.4vmin;
background-size: 750px;
background-position: 50% 8.5%;
background-repeat: no-repeat;
background: #0baedd;
}
.ring {
width: 26.5em;
height: 55em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-top-left-radius: .5em;
border-top-right-radius: .5em;
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 5%, transparent 12%, transparent 89%, rgba(0, 0, 0, 0.3) 95%, rgba(0, 0, 0, 0.8) 100%) 50% 0%/100% 23.1em, linear-gradient(to right, #303030, #303030) 50% 0%/100% 23.1em, linear-gradient(to right, rgba(167, 170, 169, 0.8) 0%, rgba(167, 170, 169, 0.3) 5%, #DEDEDE 12%, #DEDEDE 89%, rgba(167, 170, 169, 0.3) 95%, rgba(167, 170, 169, 0.8) 100%) 50% 100%/100% 32em, linear-gradient(to right, rgba(167, 170, 169, 0.8) 0%, rgba(167, 170, 169, 0.3) 5%, #DEDEDE 12%, #DEDEDE 89%, rgba(167, 170, 169, 0.3) 95%, rgba(167, 170, 169, 0.8) 100%) 50% 100%/100% 32em, linear-gradient(#DEDEDE 49%, #DEDEDE 51%) 50% 100%/100% 32em, radial-gradient(100% 100% at 50% 50%, rgba(255, 0, 0, 0.5) 50%, blue 51%) 55% 0%/22em 22em;
background-repeat: no-repeat;
}
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0