简体中文(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學習者快速成長！