純粋な CSS_Image 特殊効果で実装された画像上でマウスが移動したときに影効果を追加するコード-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

純粋な CSS_Image 特殊効果で実装された画像上でマウスが移動したときに影効果を追加するコード

May 16, 2016 pm 06:38 PM

css 写真影を追加する

<title>CSS で画像に影を追加します</title>
<style> 
*{padding:0;margin:0;} 
body{background:#E8EDF1;padding:20px;} 
#profileAvatar {overflow:hidden;zoom:1;} 
#profileAvatar i{float:left;visibility:hidden;background:url(http://files.jb51.net/demoimg/200912/avatar.gif) 0 0 no-repeat;} 
#profileAvatar i i{background-position:100% 0; } 
#profileAvatar i i i{background-position:0 100%;} 
#profileAvatar i i i i{padding:0 5px 6px 0;background-position:100% 100%; } 
#profileAvatar img{visibility:visible;display:block;padding:3px;border:1px solid #ccc;background:#fff;} 
</style>

<div id="profileAvatar">
    <i><i><i><i>
<a href="http://www.jb51.net"><img  src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy"    style="max-width:90%" id="image" onmouseover="show()" onmouseout="show()" alt="純粋な CSS_Image 特殊効果で実装された画像上でマウスが移動したときに影効果を追加するコード" ></a>
    </i></i></i></i>
</div>
マウスを移動すると滑らかな影が表示されます

[Ctrl A すべて選択注: 外部 Js を導入する必要がある場合は、

を実行するために更新する必要があります]

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。