css(day07) · 前端學習筆記

# 1.公共樣式的提取 >減少代碼的冗余度，簡潔易增改把共有的，常用的css封裝在base.css里 ~~~ *(margin:0;padding:0); text-decoration: none; text-align: center; .row::after{ content:""; display: block; clear: both; } .row::before{ content:""; display: block; clear: both; } margin-left: auto; margin-right: auto; ~~~ # 2. `css2d`轉換 ~~~ transform:translate(x,y) rotate(30deg) //位移 translate(x,y) //旋轉 rotate() //縮放 scale(x,y) //傾斜 skew(x,y) 配合transform屬性使用 ~~~ ### 2.1 另一種位移 translate ~~~ //translate(x,y) x橫坐標方向移動的距離,y縱坐標方向移動的距離 { transform:translate(50px,100px); } ~~~ ###2.2 另一種垂直水平居中 ~~~ .parent{ width: 300px; height: 300px; background: red; position: relative; } .child{ width: 100px; height: 100px; background: yellow; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } ~~~ ### 2.3 transition 動畫過渡 >寬加長一倍的過渡效果 ~~~ div{ width: 100px; height: 100px; background: red; transition: width 2s; } div:hover{ width: 200px; } ~~~ - 以下是懸停時的跳動加陰影效果的自然過渡實現 ~~~ div{ width: 100px; height: 100px; background: red; /* all -->hover的所有屬性都過渡的效果， 1s -->在一秒內完成 */ transition: all 1s; } div:hover{ transform: translateY(-10px); //陰影效果 box-shadow: 0 0 10px 3px #333; } ~~~ ### 2.4 rotate 旋轉 ~~~ div{ width: 100px; height: 100px; background: red; transition: all 1s; //旋轉的原點改為右下角 transform-origin: right bottom; } div:hover{ //順時針旋轉180度（也可以取負值 transform: rotate(180deg); } ~~~ ### 2.5 scale 縮放 skew傾斜 ~~~ div{ width: 100px; height: 100px; background: red; transition: all 1s; } div:hover{ //縮放為原來的0.8倍 transform: scale(0.8); //傾斜30度 transform: skew(30deg); /* 傾斜也有x有y */ transform: skew(30deg,20deg); } ~~~ # 3. animate 動畫 >注意關鍵幀 @keyframes 以下是類似于進度條的無限循環動畫效果 ~~~ @keyframes animate{ 0%{ background: #333; } 25%{ background: yellow; width: 25% } 50%{ background: aqua; width: 50%; } 70%{ background: aquamarine; width: 70%; } 100%{ background: green; width: 100%; } } div{ //infinite -->無限循環 animation: animate 2s infinite; width: 0; height: 1px; } ~~~ # 4. 點擊轉換小頁面的demo - 模板為小米登錄界面，應用于小米登錄界面作業中 ~~~ //需要去CDN引用在線 jQuery //<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <style> //常規操作 *{margin: 0;padding: 0} .form{ text-align: center; width: 400px; border: 1px solid #333; margin-left: auto; margin-right: auto; } .form-content{ position:relative; height: 300px; } //垂直水平居中 .form-content>div{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; } //key /* 默認隱藏 */ .saoma{ display: none; } .nav{ line-height: 50px; border-bottom: 1px solid #333; } input{ width: 300px; height: 40px; margin-top: 30px; } //class為active的經典應用 .active{ color: orangered; } /* 效果是懸停時光標變為小手 */ .nav span{ cursor: pointer; } </style> <body>  <div class="form"> <div class="nav">  <span class="active">賬號登錄</span> <span>掃碼登錄</span> </div> <div class="form-content"> <div class="account"> <p><input type="text" placeholder="請輸入用戶名"></p> <p><input type="password" placeholder="請輸入密碼"></p> </div> <div class="saoma"> <img src="images/erwei.png" alt=""> </div> </div> </div> <script> $(".nav span").click(function(){ $(this).addClass("active").siblings().removeClass("active"); // 獲取參數并打印 console.log($(this).index()) // eq是塊的意思，index是參數的意思 $(".form-content>div").eq($(this).index()).show().siblings().hide() }) </script> //小米登錄界面在實際敲碼的時候有一些變化 //主要是.nav-tabs有三個參數，而傳送0和2的才是我們想要轉換的 <script> $(".nav-tabs a").click(function(){ $(this).addClass("active").siblings().removeClass("active"); // 獲取參數并打印 console.log($(this).index()) // eq是塊的意思，index是參數的意思 //不使用 $(".form-content>div").eq($(this).index()).show().siblings().hide() if($(this).index()==0){ $(".tab-now").show() $(".ertab-link").hide() } else{ $(".ertab-link").show().siblings().hide() } }) </script> //另外，在實際運用中還有所不同的是 //因為.nav-tabs中是a標簽，span標簽，a標簽的結構 /* .nav-tabs a.active 在小米的代碼里扒的方法，這樣可以讓兩個a標簽在已設置過默認顏色后，被選中的a標簽仍能變顏色*/ .nav-tabs a.active{ color: #f56600; } ~~~ # 5. 收藏夾下拉菜單的自然過渡效果 > 下拉菜單的基本動作實現 ~~~ <style> *{margin: 0;padding: 0} li{ float:left; list-style: none; width: 100px; text-align: center; } a{color: #fff;text-decoration: none;display: block} ul{ line-height: 50px; background: pink; width: 1000px; margin-right: auto; margin-left: auto; } .drop-nav{ position: relative; } //key .drop-menu{ width: 100px; background: deeppink; /* 絕對位置消除了菜單粉色的不必要區域 */ position: absolute; /* 事先收起下拉菜單 */ display: none; } a:hover{ color: gainsboro;background: palevioletred; } /* key ，沒有去除懸浮影響的話，li懸浮之后，因為懸浮的影響，啥都出不來*/ .row::after{ content: ""; display: table; clear: both; } //key 意為點擊.drop-nav時，.drop-menu以塊元素形式出現 .drop-nav:hover .drop-menu{ display: block; } </style> <body> <ul class="row"> <li class="drop-nav"> <a href="#">收藏夾</a> <div class="drop-menu"> <a href="#">收藏寶貝</a> <a href="#">收藏店鋪</a> </div> </li> <li><a href="#">賣家中心</a></li> <li><a href="#">聯系客服</a></li> </ul> ~~~ > 自然過渡效果 ~~~ 上面的代碼中，下面的可以不要 /* key */ /* .drop-nav:hover .drop-menu{ display: block; } */ 去CDN中引用jQuery //<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> $(".drop-nav").mouseover(function(){ // 只有沒有執行動畫時，才會走動畫 // 下面的否定寫法也可以用！（嘆號）來實現 //if(!$(".drop-menu").is(":animated")) if($(".drop-menu").is(":animated")==false){ $(".drop-menu").slideDown() //slideDown滑下 } }).mouseout(function(){ if($(".drop-menu").is(":animated")==false){ $(".drop-menu").slideUp() //slideUp滑動收起 } }) </script> ~~~