ホバーエフェクト
たくさんの例を紹介しているウェブサイト http://tympanus.net/Development/CreativeLinkEffects/
それから、上記の例をすべて書き留めることを学びました
実際、それらはすべて比較的です面倒かもしれない 2 つの 3D 回転を除いて簡単です
さて、後で忘れて見返せるように、これらの例を記録しておいてください
サンプル集
测试咯 *{パディング:0;マージン:0; font: 18px tahoma,arial,'Hiragino Sans GB',5b8b4f53,sans-serif;} .wrap{width: 1000px;マージン: 50px auto;} ul{リストスタイル: none;オーバーフロー: 非表示;} ul li{float: left;幅: 200ピクセル;テキスト整列: 中央;パディング:10px; } a{色: #fff; text-decoration:none;} .mt50{ margin-top: 50px;} #demo1 {background: #435a6b;パディング: 50px; #demo1 a::before{内容: "[";不透明度: 0; -webkit-transform:translateX(10px);変換:translateX(10px);表示: インラインブロック; -webkit-transition: -webkit-transform 0.3 秒、不透明度 0.2 秒; -moz-transition: -moz-transform 0.3 秒、不透明度 0.2 秒;トランジション: トランスフォーム 0.3 秒、不透明度 0.2 秒。 #demo1 a::after{コンテンツ: "]";不透明度: 0; -webkit-transform:translateX(-10px);変換:translateX(-10px);表示: インラインブロック; -webkit-transition: -webkit-transform 0.3 秒、不透明度 0.2 秒; -moz-transition: -moz-transform 0.3 秒、不透明度 0.2 秒;トランジション: トランスフォーム 0.3 秒、不透明度 0.2 秒。 #demo1 a:hover::before{ 不透明度: 1; -webkit-transform:translateX(-5px);変換:translateX(-5px);-moz-transition:translateX(-5px); #demo1 a:hover::after{ 不透明度: 1; -webkit-transform:translateX(5px);変換:translateX(5px);-moz-transition:translateX(5px); #demo2 {背景: #0e83cd;パディング: 50px;フォントサイズ:18px;} #demo2 a {-webkit-perspective: 1000px;-moz-perspective: 1000px;perspective: 1000px;line-height: 44px;表示: インラインブロック;} #demo2 スパン{ 位置: 相対;表示: インラインブロック;パディング: 0 10px;行の高さ:44px;背景: #2195de; -webkit-transition: -webkit-transform 0.3 秒; -moz-transition: -moz-transform 0.3 秒;トランジション: トランスフォーム 0.3 秒。 -webkit-transform-style: 3d を保存; -moz-transform-style: 保存 3d;変換スタイル: 3d を保存; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0;変換元: 0 0; #demo2span:hover{ -webkit-transform: 回転X(90度) 変換Y(-12ピクセル); -moz-transform: 回転X(90度) 平行移動Y(-12ピクセル);変換: 回転X(90度) 平行移動Y(-12px); #demo2 スパン::前{ 位置: 絶対;上: 100%;左: 0;幅: 100%;高さ: 100%;背景: #0965a0;コンテンツ: attr(data-hover);行の高さ: 44px; -webkit-transition: バックグラウンド 0.3 秒; -moz-transition: バックグラウンド 0.3 秒;トランジション: バックグラウンド 0.3 秒。 -webkit-transform: 回転X(-90度); -moz-transform: 回転X(-90度);変換: 回転X(-90度); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0;変換元: 0 0; #demo2 スパン:ホバー::前{背景: #2195de; #demo3 {背景: #f19f0f;パディング: 50px;} #demo3 a{ 表示: インラインブロック;位置: 相対的;フォントサイズ:20px; #demo3 a::after{ 位置: 絶対;上: 100%;左: 0;幅: 100%;高さ: 1px;背景:#F7F7F7;不透明度: 0;コンテンツ： ''; -webkit-transition: 不透明度 0.3 秒、-webkit-transform 0.3 秒; -moz-transition: 不透明度 0.3 秒、-moz-transform 0.3 秒;トランジション: 不透明度 0.3 秒、変換 0.3 秒。 -webkit-transform：translateY(10px); -moz-transform: 変換Y(10px);変換：translateY(10px); #demo3 a:hover::after{ 高さ: 4px;不透明度:0.4; -webkit-transform:translateY(2px); -moz-transform:translateY(2px);変換:translateY(2px); #demo4 {背景:#cd4436;パディング: 50px;} #demo4 a{ オーバーフロー: 非表示;表示: インラインブロック;位置: 相対的; #demo4 スパン{ 位置: 相対;表示: インラインブロック; -webkit-transition: -webkit-transform 0.3 秒; -moz-transition:-moz-transform 0.3 秒;トランジション:トランスフォーム 0.3 秒; #demo4 スパン::後{ 位置: 絶対;トップ: 100%;左: 0;フォントの太さ:太字;コンテンツ: attr(data-hover); #demo4 スパン:ホバー{ -webkit-transform:translateY(-100%); -moz-transform: 翻訳Y(-100%);変換: 変換Y(-100%); #demo5{背景:#ecf0f1;パディング: 50px;} #demo5 a{color: #566473;表示: インラインブロック;フォントの太さ: 太字;位置: 相対的;パディング:10px 5px;} #demo5 a::after{ 高さ: 4px;左: 0;幅: 100%;位置: 絶対;上:100%;背景: #566473;コンテンツ： ""; -webkit-transform: スケール(0.90); -moz-transform: スケール(0.90);変換: スケール(0.90); -webkit-transition: -webkit-transform 0.3 秒; -moz-transition:-moz-transform 0.3 秒;トランジション:トランスフォーム 0.3 秒; #demo5 a::before{ 高さ: 4px;左: 0;幅: 100%;位置: 絶対;上:100%;背景: #566473;コンテンツ： "";不透明度:0; -webkit-transform: スケール(0.90); -moz-transform: スケール(0.90);変換: スケール(0.90); -webkit-transition:opacity 0.3 秒、トップ 0.3 秒、-webkit-transform 0.3 秒; -moz-transition:不透明度 0.3 秒、トップ 0.3 秒、-moz-transform 0.3 秒;トランジション:不透明度 0.3 秒、上部 0.3 秒、変換 0.3 秒; #demo5 a:hover::after{ -webkit-transform:scale(1); -moz-transform: スケール(1);変換: スケール(1); #demo5 a:hover::before{ トップ:0%;不透明度:1; -webkit-transform: スケール(1); -moz-transform: スケール(1);変換: スケール(1); } #demo6{background:#16a085; padding: 50px; } #demo6 a{ overflow: hidden; display: inline-block; } #demo6 a span{ position: relative; display: inline-block; background: #0f7c67; color: #fff; padding: 10px 20px; -webkit-transition: -webkit-transform 0.3s; -moz-transition:-moz-transform 0.3s; transition:transform 0.3s; -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } #demo6 a span::before{ padding: 10px 20px; position: absolute; width: 100%; left: -100%; top:0; background:#fff; color:#0f7c67; content:attr(data-hover); box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } #demo6 a span:hover{ -webkit-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); } #demo7{ background:#0e83cd;padding: 50px; } #demo7 li{text-align: left;} #demo7 a{ overflow: hidden; display: inline-block; position: relative; color: #0972b4 } #demo7 a::before{ position: absolute; top: 0; left: 0; overflow: hidden; width: 0; height: 100%; color:#fff; content: attr(data-hover); -webkit-transition:width 0.4s -moz-transition:width 0.4s; transition:width 0.4s; } #demo7 a:hover::before{ width : 100%; } #demo8{ background:#2ac56c;padding: 50px; } #demo8 a{ position: relative; color: #CCCCCC; } #demo8 a::before{ position:absolute; left: 0; top:0; color: #fff; content: attr(data-hover); -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; } #demo8 a:hover::before{ -webkit-transform: scale(0.7); -moz-transform: scale(0.7); transform: scale(0.7); opacity: 0; } #demo9{ background:#0e83cd;padding: 50px; } #demo9 a {color:#10649b; position: relative;} #demo9 a::before{ overflow: hidden; position: absolute; height: 100%; top:0; left:0; content: attr(data-hover); color: #fff; -webkit-transition:height 0.3s,opacity 0.3s; -moz-transition: height 0.3s,opacity 0.3s; transition:height 0.3s,opacity 0.3s; } #demo9 a::after{ width: 100%; height: 2px; background: #fff; position: absolute; bottom: -15px; left: 0; opacity: 0; content: ''; -webkit-transition: bottom 0.3s, opacity 0.3s; -moz-transition: bottom 0.3s, opacity 0.3s; transition: bottom 0.3s, opacity 0.3s; } #demo9 a:hover::before{ height: 0%; opacity:0; } #demo9 a:hover::after{ bottom: -8px; opacity:1; }
