ホームページ

JS特殊効果

CSS3特殊効果

画像コードを表示する CSS3 虫眼鏡

ダウンロード中プレビュー

<body><script src="/demos/googlegg.js"></script>
<div class='コンテナ'>
<ヘッダー>
<h1>SVG クリップパスホバー効果</h1>
</ヘッダー>
<メイン>
<div class='アイテム'>
<div class='item'>
<svg prepareAspectRatio='xMidYMid スライス' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-0'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</クリップパス>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'> X 線 </text>
<g クリップパス='url(#clip-0)'>
<画像の高さ='100%' prepareAspectRatio='xMinYMinスライス' width='100%' xlink:href='img/1.png'></image>
<text class='svg-masked-text' dy='.3em' x='50%' y='50%'> X 線 </text>
</g>
</svg>
</div>
<div class='item'>
<svg prepareAspectRatio='xMidYMid スライス' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-1'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</クリップパス>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>ワーム </text>
<g クリップパス='url(#clip-1)'>
<画像の高さ='100%' prepareAspectRatio='xMinYMinスライス' width='100%' xlink:href='img/2.png'></image>
<text class='svg-masked-text' dy='.3em' x='50%' y='50%'>ワーム </text>
</g>
</svg>
</div>
<div class='item'>
<svg prepareAspectRatio='xMidYMid スライス' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-2'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</クリップパス>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>オーロラ </text>
<g クリップパス='url(#clip-2)'>
<画像の高さ='100%' prepareAspectRatio='xMinYMinスライス' width='100%' xlink:href='img/3.png'></image>
<text class='svg-masked-text' dy='.3em' x='50%' y='50%'>オーロラ </text>
</g>
</svg>
</div>
<div class='item'>
<svg prepareAspectRatio='xMidYMid スライス' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-3'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</クリップパス>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>アンガス </text>
<g クリップパス='url(#clip-3)'>
<画像の高さ='100%' prepareAspectRatio='xMinYMinスライス' width='100%' xlink:href='img/4.png'></image>
<text class='svg-masked-text' dy='.3em' x='50%' y='50%'>アンガス </text>
</g>
</svg>
</div>
<div class='item'>
<svg prepareAspectRatio='xMidYMid スライス' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-4'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</クリップパス>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>フイツィ </text>
<g クリップパス='url(#clip-4)'>
<画像の高さ='100%' prepareAspectRatio='xMinYMinスライス' width='100%' xlink:href='img/5.png'></image>
<text class='svg-masked-text' dy='.3em' x='50%' y='50%'>フイツィ </text>
</g>
</svg>
</div>
<div class='item'>
<svg prepareAspectRatio='xMidYMid スライス' viewBox='0 0 300 200'>
<clipPath id='clip-5'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
<g Clip-path='url(#clip-5)'>
<画像の高さ='100%'preserveAspectRatio='xMinYMinスライス'幅='100%' xlink:href='img/6.png'></image>
<text class='svg-masked-text' dy='.3em' x='50%' y='50%'> ダリ </text>
</g>
</svg>
</div>
</div>
</メイン>
</div>

CSS3 SVG 虫眼鏡画像表示コードは、グリッドレイアウト、マウスオーバー画像 SVG クリッピングパスアニメーション特殊効果です。具体的な効果を体験するには、デモを参照してください。

免責事項

このサイトのすべてのリソースはネチズンによって提供されたもの、または主要なダウンロードサイトによって転載されたものです。ソフトウェアの整合性をご自身で確認してください。このサイトのすべてのリソースは学習の参考のみを目的としています。商業目的で使用しないでください。そうでない場合は、すべての結果に対して責任を負うことになります。侵害がある場合は、削除するためにご連絡ください。連絡先情報: admin@php.cn

ページングで画像を表示するための PHP コード

13 Jun 2016

ページングで画像を表示するための PHP コードを探しています。PHP を使用して、ページングでフォルダー内の画像を表示したいと考えています。。コードの書き方。。長い間オンラインで検索しましたが、うまくいくものは何も見つかりませんでした------解決策のアイデア----------------------引用: アーメン。。皆さん、助けてください。画像のパスをデータベースに保存するのが賢明です。データベースからのデータの取得がはるかに簡単になります。 ------解決策----------------------$imgs&nbs

ディレクトリ内の画像を取得してランダムに表示する PHP コード

13 Jun 2016

ディレクトリ内の画像を取得してランダムに表示する PHP コード。その時、背景画像をランダムに変更する関数を作りたかったのですが、JavaScriptで書くと、画像配列を作成する - 配列内の値をランダムに1つ選択する - スタイルを生成して書くという流れになるはずです。

PHPは画像ファイルを抽出してブラウザに表示するコードを実装します。

13 Jun 2016

PHP は、画像ファイルを抽出してブラウザに表示するコードを実装します。昨年、ユーザーがアップロードした画像ファイルをテキストリストで一覧表示するプロジェクトに取り組みました。これは、さまざまな画像形式との互換性を考慮する必要があるためです。