フロントエンドの画像上でマウスをスライドさせたときに Flash CSS3 エフェクトを作成する方法

2、3年前、ジ兄さんはまだ学生だった頃にこのウェブサイトのフロントエンドページを作成しました。実際、このウェブサイトには今、ブラザーさんの作品を紹介する投稿を投稿する機会があります。若くて無知だったジ ...
さて、今日は、マウスが画像上をスライドしたときに反射フラッシュ効果を作成する方法について話します。私は、JD.com で買い物をしていたときに、この効果を偶然発見しました。以下の完成品のデモを見てみましょう。 そうしないと、どのようなエフェクトを作成するかわからないのが恥ずかしいです。 「ぎこちないチャット」



ご覧のとおり、今日の記事はこの効果を達成する方法についてです
- 追伸: HTML の基本を少し知っている人は簡単に理解できますが、基本を持たない人はさらに難しいかもしれません。
最初にコードを投稿しましょう:

<div><a><img  alt="フロントエンドの画像上でマウスをスライドさせたときに Flash CSS3 エフェクトを作成する方法" ></a></div>

上記は HTML のコードです。大したことではなく、比較的単純です。重要な点は、背後にある CSS コードを注意深く読んで分析する必要があることです。多くの CSS3 知識ポイントが含まれています

div{width:800px;height:600px;overflow:hidden;}                  /div宽度和高度 超出隐藏
div a:hover::before{transition: all 0.5s;left:850px;}               /css3过度样式  before离左边850像素
div a:before{content: "";                  
    position: absolute;width: 50px;height: 600px;top: 0;left: -130px;background: -moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.2)),color-stop(100%,rgba(255,255,255,0)));background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);background: -o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);-webkit-transform: skewX(-25deg);-moz-transform: skewX(-25deg);}              /这里是给反光加样式的css3代码，就不一一解释了

上記は、皆に見せるためにデモを書いたものです。実際、背後にあるリフレクティブ スタイル コードもコピーされています。 by Brother Ji 長い間書いていなかったので、理解できなかった場合は、Baidu を使用すると理解できます。それ。

具体的な理論は、a タグの上に透明なレイヤーを追加し、それを配置することです。この透明なレイヤーは、上記のコードの前のものです。もちろん、他のタグでも構いません。次に、CSS3 マウスを使用して透明レイヤーを右にスライドさせ、過剰なスタイルを適用して、この反射効果を実現します。

具体的な方法をあなたに共有しました。それを自分のプロジェクトで使用したい場合は、html+css の基本的な知識が必要です。そうでないと、それを行うのは困難です。

以下に私が書いたデモをパッケージ化しました。よく理解できない場合は、ダウンロードして注意深く勉強してください。

元のリンク: フロントエンドの画像上でマウスをスライドさせたときに CSS3 フラッシュ効果を作成する方法?

以上がフロントエンドの画像上でマウスをスライドさせたときに Flash CSS3 エフェクトを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。