在Web开发中,常常需要用到小照相机图标,用于表示一个拍照的按钮或者上传图片的功能。这篇文章将介绍如何使用CSS制作一个小照相机图标。.camera { width: 20px; height: 20
在Web开发中,常常需要用到小照相机图标,用于表示一个拍照的按钮或者上传图片的功能。这篇文章将介绍如何使用CSS制作一个小照相机图标。
.camera { width: 20px; height: 20px; background-color: #fff; border-radius: 50%; border: 2px solid #666; position: relative; overflow: hidden; } .camera:before { content: ""; display: block; width: 8px; height: 8px; background-color: #666; border-radius: 50%; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); } .camera:after { content: ""; display: block; width: 2px; height: 8px; background-color: #666; position: absolute; top: 12px; left: 50%; transform: translateX(-50%) rotate(45deg); }
代码中首先定义了一个.camera类,用于表示整个小照相机图标。通过设置宽高、背景色、边框和圆角,我们可以让小照相机看上去更加真实。同时,为了限制内部元素的显示范围,我们设置了overflow: hidden。
接下来,我们使用伪元素:before和:after来创建小照相机中的两个重要元素:照相机镜头和闪光灯。通过设置宽高、背景色、圆角和位置等属性,我们可以将它们放置在合适的位置。
最后,我们只需要将.camera类应用到HTML元素中,即可使用这个小照相机图标。例如:
<button>拍照<i class="camera"></i></button> <label for="file">上传图片<i class="camera"></i></label>
这里我们在按钮和标签中加入了标签,然后给它们添加了camera类。这样就可以让它们显示出小照相机图标了。
粉丝
0
关注
0
收藏
0