効果:
主な機能は次のとおりです:
1. グリッドデザイン 2. 電話料金を再請求するための専用の 2 行 2 列
3. マウスがアニメーションに移動すると電話料金を再請求しますフォント縮小あり
4. 電話料金をチャージします 1 行目の 4 つのアプリケーションをマウスで移動すると、アイコンがポップアップします
5. 1 行目の 4 つのアプリケーションをマウスで移動すると、さらに多くのアプリケーション コンテンツが表示されます
この記事の価値 1. HTML 構造と CSS ロジックの観点から、参照とコミュニケーションのための独自のアイデアをいくつか用意します 2. に精通します。 CSS トランジションとアニメーションのシンプルなアプリケーション
3. フローティングと負のマージン値を使用してこのグリッド効果を実現する方法を学びます
4. 使用量を減らして、CSS をより明確に記述し、修正を容易にする方法を学びます
5. タオバオのパワーをご覧くださいiconfront
: コードをデモンストレーションするためのツールを検索します。 。 。悪いコードの投稿
<div class="toolbox"> <ul> <li class="tb-item tb-rs-2 tb-cs-2"> <a class="tb-item-wrapper tb-item-big tb-item-hbox tb-item-huafei" href="javascript:;" title="话费充值"> <div class="tb-item-iwrapper"> <i class="tb-item-icon iconfont icon-icon"></i> <p class="tb-item-text">充值</p> </div> <div class="tb-item-box"> </div> </a> </li> <li class="tb-item"> <a class="tb-item-wrapper tb-item-hbox tb-item-youxi" href="javascript:;" title="游戏充值"> <div class="tb-item-iwrapper"> <i class="tb-item-icon iconfont icon-youxi"></i> <p class="tb-item-text">游戏</p> </div> <div class="tb-item-box"> </div> </a> </li> <li class="tb-item"> <a class="tb-item-wrapper tb-item-hbox tb-item-lvxing" href="javascript:;" title="旅行"> <div class="tb-item-iwrapper"> <i class="tb-item-icon iconfont icon-hanglvxingye"></i> <p class="tb-item-text">旅行</p> </div> <div class="tb-item-box"> </div> </a> </li> <li class="tb-item"> <a class="tb-item-wrapper tb-item-hbox tb-item-baoxian" href="javascript:;" title="保险"> <div class="tb-item-iwrapper"> <i class="tb-item-icon iconfont icon-baoxian"></i> <p class="tb-item-text">保险</p> </div> <div class="tb-item-box"> </div> </a> </li> <li class="tb-item"> <a class="tb-item-wrapper" href="javascript:;" title="彩票"> <div class="tb-item-iwrapper"> <i class="tb-item-icon iconfont icon-caipiao"></i> <p class="tb-item-text">彩票</p> </div> </a> </li> ... </ul> </div>
最後のいくつかは省略されていますが、これは宝くじアプリケーションの実装と同じです。
HTML 構造と組み合わせて、実装のアイデア、主に各 HTML 要素の役割と CSS クラスの構成を説明します。1. アプリケーション全体が div でラップされ、それを識別するためにツールボックス クラスが追加されます。コンテナ
3. 各 li 要素が追加されます。クラスは、一方では構造を明確にするためのものであり、他方では、一部のアプリケーションには特定のコンテンツを含む div も含まれる可能性があるためです。 li 要素を使用して実装されるため、アプリケーションに直接関係するものを理解する必要があります。これにより、li 要素に設定されたスタイルがより深い子孫の li 要素に影響を与えないようになります。 li 要素の下の、a、div、i、p はすべて CSS クラスを追加する必要があります。同じ理由です
4. tb-item はアプリケーションを表し、電話請求書に対応する tb-item が 2 行 2 列を占めることを考慮します。 、2 つの別個のクラス、tb-rs-2 と tb-cs-2 が追加され、行スパンまたはコルスパンが 2 であることを示します。コメントがあると、名前が少し単純になります。コードを理解するのは難しくありません。もともと、この複数行および複数列のクラスをより柔軟にするために、使用するループとミックスインを減らしたかったのですが、これはまだ実装が簡単ではありません。 。 。 。
5. li のすぐ下の要素は a 要素です。フォント サイズ、色、アイコンのフラッシュ アニメーション効果は、a 要素のホバー疑似クラスを使用して実装する必要があるためです。
6. a 要素には他の補助クラスもあります-big の機能は、tb-item-hbox などの大きなフォントを表示する必要があるアプリケーションを処理するために使用することです。これは実際には tb-item-hasbox の略語であり、さらに多くのコンテンツを含めるには、tb-item-huafei、tb-item-youxi などのボックスが必要です。これは、各アプリケーションを個別に識別するために使用されます。ボックス内のボックスが表示されるとき、ボックスの左右の境界線が常にツールボックスの側面と一致するように、左側の値を「異なるコントロールを取得」に設定できます。
7. a 要素には 2 つの要素があります。最初の要素は tb-item-iwrapper で、ボックスが表示されるときに iwrapper 要素を使用することが目的です。要素の下部はボックスの境界上部の一部を覆うことができるため、この要素とボックスが接続されているように見えます。これは言うまでもありません。これら 2 つの要素は絶対に配置されます。デフォルトでは、上位の値は親要素の 100% になります。親要素がマウスを移動すると、tb-item-box が表示されます。次に左側をコントロールするなど、微調整を行って効果を得ることができます。
8. グリッドを実装するには、次の手順を実行します。各 tb-item に境界線を設定し、それらをすべて左にフロートさせ、margin-top: -1px、margin-left: -1px を設定すれば完了です。 。
:
<strong>@import (inline)"icon-font.css";* { box-sizing: border-box}@tb-cols: 5;//5行@tb-rows: 3;//3列@tb-item-width: 59px;//每个item的宽@tb-item-height: 78px;//每个item的高@tb-item-bdcolor: #EAEAEA;//item默认的边框颜色@tb-item-icon-small-size: 24px;//图标默认的字体大小@tb-item-icon-big-size: 60px;//大图标的字体大小body { font: 12px/1.5 tahoma,arial,'Hiragino Sans GB',sans-serif;}/*设置整站的a元素，ul元素，li元素的默认样式*/a { text-decoration: none;}ul { list-style: none;}ul,li { margin: 0; padding: 0;}//以上元素应该在整站做一些整体样式的设置，以便整个网站的风格能够一致@-webkit-keyframes toTopFromBottom { 49% { -webkit-transform: translateY(-100%); } 50% { opacity: 0.3; -webkit-transform: translateY(40%); } 51% { opacity: 1; }/* 假如动画动画声明的时候使用了forwards，在动画结束后，元素将保持在to定义的状态，如果没有定义to这个状态，即使配置了forwards，元素在动画结束后会回到起始状态 意思就是本例中，不使用forwards也没有关系 to { opacity: 0.3; } */}//从bootstrap中找出来的清除浮动的mixin.clearfix() { &:before, &:after { content: " "; display: table; } &:after { clear: both; }}//forwards 参考:http://www.w3school.com.cn/cssref/pr_animation-fill-mode.asp，.toTopFromBottom() { -webkit-animation: toTopFromBottom 0.3s forwards; -moz-animation: toTopFromBottom 0.3s forwards; animation: toTopFromBottom 0.3s forwards;}.toolbox { //这部分样式设置其实是根据需求定的，比如宽度跟定位，本例只是为了实现效果，毕竟这个toolbox的样式不太关键 width: 600px; height: 600px; position: fixed; top: 50%; left: 50%; margin-left: -300px; margin-top: -300px; //组件内部可能还包含有其它的ul，li，p，a，i等元素，先用元素选择器定义一些统一的样式，针对不同位置的元素，可以结合类选择器来单独定义 //设置本组件内p元素的默认样式，之所以不设置在外面，是因为不是整站的p元素都需要清掉padding和margin，段落还是带一些行距要好看些 p { margin: 0; padding: 0; } ul { //根据行列数跟每个item的高宽计算整个ul元素的高宽 width: @tb-item-width * @tb-cols - @tb-cols + 1; height: @tb-item-height * @tb-rows - @tb-rows + 1; .clearfix(); } .tb-item { float: left; width: @tb-item-width; height: @tb-item-height; border: 1px solid @tb-item-bdcolor; margin-left: -1px; margin-top: -1px; position: relative; //定义占两列的item宽度 &.tb-cs-2 { width: @tb-item-width * 2 - 1; } //定义占两行的item高度 &.tb-rs-2 { height: @tb-item-height * 2 - 1; } } .tb-item-wrapper { text-align: center; &,& .tb-item-iwrapper { position: absolute; top: 0; right: 0; left: 0; bottom: 0; } & .tb-item-iwrapper { overflow: hidden; } //图标 .tb-item-icon { display: block; color: #ff4400; font-size: @tb-item-icon-small-size; margin-top: 12px; } //文本 .tb-item-text { transition: color 0.3s ease-in-out; color: #6c6c6c; } //大图标 &.tb-item-big .tb-item-icon { font-size: @tb-item-icon-big-size; transition: font-size 0.3s ease-in-out; } .tb-item-box { position: absolute; display: none; background-color: #fff; top: @tb-item-height - 2; height: @tb-item-height * 2 - 1; width: @tb-item-width * @tb-cols - @tb-cols + 1; border: 1px solid #ff4400; z-index: 1; } //以下几处控制每个应用的box的left &.tb-item-huafei .tb-item-box { left: -1px; } &.tb-item-youxi .tb-item-box { left: -@tb-item-width * 2 + 1; } &.tb-item-lvxing .tb-item-box { left: -@tb-item-width * 3 + 2; } &.tb-item-baoxian .tb-item-box { left: -@tb-item-width * 4 + 3; } &:hover .tb-item-text { color: #ff4400; } //定义带box的wrapper元素hover时候的样式，主要是为了显示红色的边框，并且盖住父的item元素的边框 &.tb-item-hbox:hover { top: -1px; left: -1px; bottom: -1px; right: -1px; border: 1px solid #ff4400; z-index: 1; .tb-item-iwrapper { bottom: -1px; z-index: 2; background-color: #fff; } } &.tb-item-big:hover .tb-item-iwrapper { bottom: @tb-item-height - 2; } &.tb-item-hbox:hover .tb-item-box { display: block; } &.tb-item-big:hover .tb-item-icon { font-size: @tb-item-icon-small-size; } &:hover .tb-item-icon { .toTopFromBottom(); } } //tb-on的添加和删除是通过js控制的，完全通过css做实现不了，主要是为了鼠标在滑入游戏，保险，旅行等item时，话费item的文字大小能够跟它们保持一致 &.tb-on { .tb-item-big { .tb-item-icon{ font-size: @tb-item-icon-small-size; } } }}</strong>
Jsパート:
<script type="text/javascript"> (function() { var $tb = $('.toolbox'); var toggleTb = function(e){ $('.toolbox').toggleClass('tb-on'); } $('.toolbox').on('mouseenter','.tb-item-hbox',toggleTb).on('mouseleave','.tb-item-hbox',toggleTb); })(); </script>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
