css3實現的相機鏡頭效果

admin發表於2017-02-19
CSSS3

真的感覺css3有點無所不能，下面分享一個使用css3實現的相機鏡頭效果程式碼。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset="gb2312"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style>
*{
  padding:0;
  margin:0;
}
body{
  background-color:#808080;
}
.camera{
  width:120px;
  height:120px;
  background-color:#bcbec0;
  border-radius:20px;
  position:absolute;
  top:50%;
  left:50%;
  margin:-60px;
  border:solid 1px rgba(0,0,0,0.6);
  box-shadow:rgba(0,0,0,0.8) 0 4px 8px -2px,inset rgba(255,255,255,0.2) 0 0 8px 3px;
  background-image:
              -webkit-gradient(radial, center center,0 , center center,45,from(#fff),to(rgba(255,255,255,0)),
              color-stop(0%, #fff),
                 
              color-stop(25%, #3180b4),
              color-stop(26%, #3180b4),
              color-stop(27%,  rgba(0, 75, 122,1)),
                 
              color-stop(32%,  rgba(0, 75, 122,1)),
              color-stop(38%, rgba(49, 128, 180,1)),
              color-stop(39%, rgba(0, 75, 122,1)),
                 
              color-stop(55%,rgba(0, 75, 122,1)),
              color-stop(55%, rgba(0,0,0,0.7)),
              color-stop(75%, rgba(0,0,0,0.7)),
                 
              color-stop(75%, rgba(0,0,0,0.6)),
                 
                 
              color-stop(80%, rgba(0,0,0,0.6)),
              color-stop(80%,rgba(0,0,0,0.8)),
              color-stop(95%,rgba(0,0,0,0.8)),
                 
                 
              color-stop(98%, rgba(0,0,0,1)),
              color-stop(98%, rgba(0,0,0,1)),
                 
              color-stop(99%, rgba(0,0,0,1)),
              color-stop(99%, rgba(0,0,0,0.5)),
                 
              color-stop(100%, rgba(255,255,255,0.5))
),
             -webkit-gradient(radial, center 00,40 , center 0,120,from(rgba(255,255,255,0.7)),to(#788185));
}
 
.camera:before{
        content:'';
        position:absolute;
        width:40px;
        height:40px;
        bottom:20px;
        right:20px;
        display:block;
        border-radius:50%;
        background-image:-webkit-gradient(radial, center center,0 , center center,20,from(rgba(255,255,255,0)),to(rgba(255,255,255,0.3)),
                 
                color-stop(0%,rgba(255,255,255,0.2)),
                color-stop(49%,rgba(255,255,255,0.2)),
                 
                color-stop(50%,rgba(255,255,255,0.1)),
                color-stop(100%,rgba(255,255,255,0.1))
                );
}
 
</style> 
<script>
 
</script>
</head>
<body>
<div class="camera"></div>
</body>
</html>

相關文章