简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > html教程 > 正文

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

WBOY
发布： 2016-06-24 11:31:39
原创
1579 人浏览过

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

 

相关标签：
使用css 制作镂空效果
来源：php.cn
上一篇：ejs模板中的四种表达式输出形式_html/css_WEB-ITnose 下一篇：twitter点赞动画详解_html/css_WEB-ITnose
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
在 NextJS 项目中使用 Tailwind 和 MUI 时出现意外行为（白色按钮错误） 我目前正在使用NextJS、TailwindCSS和MUIReactUI库构建一个项目。每当我尝试向我的项目添加MUI按钮时，它都能正常工作，但按钮的颜色保持白色。悬停时颜色恢复正...
来自于 2023-11-04 11:04:23
0
1
178
从标题文本末尾到容器末尾添加一行 我使用此CSS从标题文本的末尾到容器的末尾绘制一条线：h1{display:flex;}h1::after{content:"";flex:auto;borde...
来自于 2023-09-15 19:42:56
0
1
207
PHP <form method="post"> 在多个轮播幻灯片上 借口：我正在制作一个带有轮播的主页。轮播效果很好。但是，每张幻灯片都有自己的输入表单。如果我尝试将两种形式组合在一个标签内，则每当我更改幻灯片时，页面都会重新加载到其原始内容。我相...
来自于 2023-09-15 14:13:53
0
1
248
jquery ajax() 函数无法正常工作，甚至无法被确认 我目前正在开发一个使用jqueryajax函数的项目。我只是希望ajax函数在单击某个按钮时显示服务器上文件中的一些文本，但当我单击该按钮时它什么也不做。我尝试添加错误消息，但这似...
来自于 2023-09-06 11:40:35
0
1
301
最佳的MySQL排序方法，适用于包含空格的情况是什么？ 所以，我有一个项目，用户可以更新一个字段，这个功能正常工作。问题出现在用户在字段中输入一个空格''。例如，假设字段原来是test1，用户将其更改为test1。这个更改会生效，并且也...
来自于 2023-09-02 10:38:35
0
1
299
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！