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衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

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

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

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

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

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

ホットトピック











公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか?この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース(写真、CSS、JSなど)やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています

この記事では、HTML&lt; Datalist&GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

この記事では、HTML&lt; Progress&gt;について説明します。要素、その目的、スタイリング、および&lt; meter&gt;との違い要素。主な焦点は、&lt; Progress&gt;を使用することです。タスクの完了と&lt; Meter&gt; statiの場合

この記事では、html5&lt; time&gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

この記事では、html&lt; meter&gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化&lt; Meter&gt; &lt; Progress&gt;およびex
