ホームページ > 記事 > ウェブフロントエンド > H5 特殊効果ブラー ダイナミック リスト バー: 影の素晴らしい使い方
H5 特殊効果ブラー ダイナミック リスト バー: 影の素晴らしい使い方
- PHPzオリジナル
- 2017-04-04 13:42:532240ブラウズ
最初に最終的な効果を見てみましょう
動的リストバー
1. リストは常にリストであるため、コードは次のとおりです:
<body> <p> <ul> <li> <a>首頁 HOME</a> </li> <li> <a>文章 ARTICLE</a> </li> <li> <a>作品 GITHUB</a> </li> <li> <a>我 ME</a> </li> </ul> </p> </body>
表示効果:
元の外観
2、次に次のフォントを調整し、前面の小さな黒い点を削除し、背景を別の色に変更します。
body{
background-color: #5F5F5F;
}
ul li{
font-size: 30px;
list-style:none;
}
3. 静止時にぼかし効果を実現するために、ここでは非常に賢い方法が使用されています: シャドウ
ガウスぼかしは必要なく、人間の目の視覚効果を使用するだけです。
ul li a{
color: transparent;//字透明
text-shadow:0 0 5px #fff;//阴影
letter-spacing: 1px;//字距，为了好看点
}
静止時のぼかしエフェクト
4. スライド時にダイナミックエフェクトを実現するには、<a href="http://www.php.cn/wiki/966.html" target="_blank">:hover</a>Selector
ul li a:hover{
color:#fff;
text-shadow:0 0 1px #fff;
padding-left: 10px;//移动一下
}
ダイナミックエフェクト
を使用できます。基本的に、プロトタイプは次のように行われます。非常にシンプルですが、とてもうまくいきます。しかし、いつも何かが足りないように感じるので、アニメーションエフェクトを追加して確認します。
ul li a{
color: transparent;
text-shadow:0 0 5px #fff;
letter-spacing: 1px;
transition:all 0.4s ease-in-out;
}
最後にすべてのコードを入力します: JS Bin
さて、最終的な効果はこのようになります。純粋な HTML5 + CSS3 で多くの興味深い機能を実現できるようになりました。私はゆっくりと掘り下げていきます。興味のある友達は一緒に議論しましょう。
以上がH5 特殊効果ブラー ダイナミック リスト バー: 影の素晴らしい使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。