2

私は完全に暗い Web ページの効果を作成することに興味があり (暗いとは、ライトがまったくない夜のように暗いことを意味します)、マウス カーソルに周囲を照らすライト効果を与えます。
そのような効果を得るには何を使用すればよいですか？CSS や一般的に Web で答えを探してみましたが、似たようなものは見つかりませんでした。
私が見つけた唯一のものは、この WordPress 用のプラグインですが、固定されており、カスタマイズしたり使用したりすることはできません。

4

1 に答える 1

3

私はこれが古いスレッドであることを知っていますが、私は自分でエフェクトを作成することに興味があり、jsfiddleでタスクを達成すると思われるものを作成しました。

コードは jsfiddle にあり、説明とともにここにコピーされます。すべてがとてもシンプルです。

HTML

id で div を作成し、lorum ibsum を含むlightというラッパー div を使用しました。content

<div id="light"></div>

<div class="content">  
    <h1>Flashlight test</h1>   
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    <ul>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
        <li>Vestibulum auctor dapibus neque.</li>
    </ul>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

</div>

CSS

htmlページの最上位の要素である要素のスタイルを黒のテキストと黒の背景に設定したので、デフォルトではすべてが非表示になります。

次に、lightid を使用して div のスタイルを設定しました。私は高さ100ピクセル、幅100ピクセルにし、背景を黄色にしborder-radius、幅/高さの半分の50ピクセルにして円を作りました。div も作成したposition: relativeので、通常のページ フローから取り出され、他の要素の上に配置できます。これは、効果を作成するために必要なレイヤリングにとって重要です。topユーザーがマウスを動かす前に懐中電灯のデフォルト位置を設定することにしました (詳細は JS セクションを参照) left。

最後に、コンテンツ ラッパー div、設定position: relative、およびz-index10にルールを追加しましたposition: relative。orは作業position: absoluteに必要です。どの要素がどの要素の上に積み重なるかを制御します。そのため、コンテンツ div、つまりテキストをより高いに設定すると、明るい div の上に表示されます。これは、背景が明るいために表示されるようになりました。z-indexz-indexz-index

html { 
    color: #000; 
    background-color: #000; 
}

.content {
    position: relative;
    z-index: 10;
}

#light {
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    background-color: rgb(231, 221, 122);
}

JavaScript

JS は、jQuery を使用してわずか 6 行です。mousemove()イベント関数を使用して要素のオフセット (位置) を設定するだけです。その関数には、マウスの位置の座標を保持するパラメーターがあります。その数値から 50 ピクセルを差し引いて光を中央に配置すると、効果が得られます。

$(document).mousemove(function(event) {
    $('#light').offset({
        top: event.pageY - 50,
        left: event.pageX - 50
    });
});
于 2014-01-07T02:12:32.403 に答える