首頁 > web前端 > html教學 > 使用css 制作镂空效果_html/css_WEB-ITnose

使用css 制作镂空效果_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:31:39
原創
1653 人瀏覽過

今天做一个用户头像上传的页面,在本地选择一个图片,用户调整位置后保存,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

 

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板