ホームページ > 記事 > ウェブフロントエンド > CSS を使用して中空のエフェクトを作成する_html/css_WEB-ITnose
CSS を使用して中空のエフェクトを作成する_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:31:391628ブラウズ
今日は、ユーザーがローカルで写真を選択し、位置を調整して保存するためのページを作成しました
デザインは、このようなエフェクトを作成するように依頼されました。バイドゥ、くそー、見つけられなかったので、自由にキャンバスを使おうと思い始めましたが、かなり面倒だったので、インスピレーションを受けました。考えました！ ！
コードは次のとおりです:
<!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
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。