CSS3 ですりガラス効果を実現_html/css_WEB-ITnose
**最初に効果を見てください**
**次の質問を紹介します**
HTML:
<img id="blur" src="img/back.jpg">
CSS3:
#blur{filter:blur(10px);-webkit-filter:blur(10px);-moz-filter:blur(10px);-ms-filter:blur(10px);-o-filter:blur(10px);}
**より複雑な例を見てください**
Viewデモ
CSS3 曇りガラスと組み合わせて、赤い封筒を送信する WeChat バージョンを実現し、完全な写真効果を確認します。モバイル端末とPC端末に完全に互換性があります。代码如下:
html:
<div id="content"><!--模糊图片--><img id="blur" src="img/4.jpg"><!--使用canvas绘制图片--><canvas id="canvas"></canvas><a href="javascript:reset()" rel="external nofollow" class="button" id="button-reset">reset</a><a href="javascript:show()" rel="external nofollow" class="button" id="button-show">show</a></div>
css3:
body,html{margin:0;padding:0;overflow:hidden}#content{position:relative;margin:0 auto;overflow:hidden}#blur{position:absolute;margin:0 auto;left:0;top:0;filter:blur(10px);-webkit-filter:blur(18px);-moz-filter:blur(18px);-ms-filter:blur(18px);-o-filter:blur(18px);z-index:0;display:block}#canvas{position:absolute;margin:0 auto;left:0;top:0;z-index:1;display:block}.button{padding:5px 10px;color:#fff;position:absolute;display:block;text-align:center;border-radius:4px;text-decoration:none;z-index:3}#button-reset{left:10%;bottom:5%;background-color:red}#button-show{right:10%;bottom:5%;background-color:green}
javascript:
var canWidth = window.innerWidth-20;var canHeight = window.innerHeight-20;var canvas=document.getElementById("canvas");var ctx = canvas.getContext("2d");canvas.width = canWidth;canvas.height = canHeight;var img = new Image();img.src = "img/4.jpg";var radius = 50;var leftMargin = 0,topMargin = 0;img.onload = function(){//初始化父容器的宽高使窗口与canvas宽高相同$("#content").css({"width":canvas.width + "px","height":canvas.height + "px"});//模糊图片与canva中绘制的图片(隐藏的清楚图片)宽高相同,别忘加px,否则计算出来的只是个值,不带px$("#blur").css("width",img.width + "px");$("#blur").css("height",img.height + "px");//左边距:(图片宽高 - canvas宽高) / 2;等于一边的边距宽高leftMargin = (img.width - canvas.width)/2;topMargin = (img.height - canvas.height)/2;//模糊图片的上边距与左边距$("#blur").css("top", String(-topMargin) + "px");$("#blur").css("left", String(-leftMargin) + "px");initCanvas();}function initCanvas(){var theleft = leftMargin < 0 ? -leftMargin : 0;var thetop = topMargin < 0 ? -topMargin : 0;//创建圆region = {x:Math.random() * (canvas.width-2 * radius - 2 * theleft) + radius + theleft,y:Math.random() * (canvas.height-2 * radius - 2 * thetop) + radius + thetop, r : radius};draw(img,region);}function draw(img){ctx.clearRect(0,0,canvas.width,canvas.height);ctx.save();setRegion(region);/*绘制清楚图片,如leftMargin<0那么取0,图片宽度与canvas宽度哪个最小取哪个值*/ctx.drawImage(img, Math.max(leftMargin,0), Math.max(topMargin,0),Math.min(canvas.width,img.width), Math.min(canvas.height,img.height),leftMargin < 0 ? -leftMargin : 0, topMargin < 0 ? -topMargin : 0,Math.min(canvas.width,img.width),Math.min(canvas.height,img.height));ctx.restore();}function setRegion(region){ctx.beginPath();ctx.arc(region.x,region.y,region.r,0,Math.PI * 2,false);//进行裁减圆ctx.clip();}function reset(){initCanvas();}function show(){var animation = setInterval(function(){region.r += 20;if(region.r > Math.max(canvas.width,canvas.height)){clearInterval(animation);}draw(img,region);},30);}
查看演示
知识点:
- h5头部别忘入viewport: <メタ名=”ビューポート” コンテンツ=”初期化-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0,width=device-width”>
- filter: ぼかし CSS3 のデフォルトのフィルターぼかし効果。
- canvas は絵を描きます、drawImage();
- canvas クリッピングエリアを描画します;

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

Y軸位置Webアノテーション機能の適応アルゴリズムこの記事では、単語文書と同様の注釈関数、特に注釈間の間隔を扱う方法を実装する方法を探ります...

GiteEpages静的Webサイトの展開が失敗しました:404エラーのトラブルシューティングと解像度Giteeを使用する

画像をクリックした後、散乱と周囲の画像を拡大する効果を実現するには、多くのWebデザインがインタラクティブな効果を実現する必要があります。特定の画像をクリックして周囲を作成してください...

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
