> 웹 프론트엔드 > HTML 튜토리얼 > 使用css 制作镂空效果_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-24 11:31:39
원래의
1652명이 탐색했습니다.

今天做一个用户头像上传的页面,在本地选择一个图片,用户调整位置后保存,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으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿