css布局实现环形摄像头效果代码-html代码-BFW代码库

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;
}
.........完整代码请登录后点击上方下载按钮下载查看