Home > Article > Web Front-end > 使用css 制作镂空效果_html/css_WEB-ITnose
使用css 制作镂空效果_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:31:391579browse
今天做一个用户头像上传的页面，在本地选择一个图片，用户调整位置后保存，tx qq 的头像做的不错
设计让我也做一个这样的效果，没见过，于是百度，丫的，竟然没搜到 ，好吧自由自己来，开始想用 canvas做，想想 挺麻烦的，于是灵感一来，想到了！！
代码如下：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type="text/css"> html, body { width: 100%; height: 100%; overflow: hidden; } * { margin: 0; padding: 0; } .su { position: relative; width: 300px; height: 300px; border: 1px solid red; margin: 0 auto; overflow: hidden; } .lk { position: absolute; width: 100px; height: 100px; border-radius: 50%; border: 200px solid rgba(0,0,0,0.4); top: 50%; margin-top: -250px; left: 50%; margin-left: -250px; } </style> </head> <body> <div class="su"> <div class="lk"></div> </div> </body></html>
新手，有意见尽管提！ 233333333
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：ejs模板中的四种表达式输出形式_html/css_WEB-ITnoseNext article：twitter点赞动画详解_html/css_WEB-ITnose