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

WBOY
Release: 2016-06-24 11:31:39
Original
1635 people have browsed it

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

 

新手,有意见尽管提! 233333333

 

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template