整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          4種非常實用的CSS代碼段,你都學會了嗎?

          4種非常實用的CSS代碼段,你都學會了嗎?

          擊右上方紅色按鈕關注“web秀”,讓你真正秀起來

          文字加載...動畫

          html

          正在加載中<dot>...</dot>
          

          css

          dot{ 
           display: inline-block; 
           height: 1em; 
           line-height: 1; 
           text-align: left; 
           vertical-align: -.25em; 
           overflow: hidden; 
          } 
          dot::before{ 
           display: block; 
           content: '...\\A..\\A.'; 
           white-space: pre-wrap; 
           animation: dot 2s infinite step-start both; 
          } 
          @keyframes dot{ 
           33% { 
           transform: translateY(-2em); 
           } 
           66% { 
           transform: translateY(-1em); 
           } 
          }
          

          如果你看上圖代碼沒有看懂,請看下圖,我注釋掉一行代碼,你就明白了。原來是dot元素,沿著Y軸在循環位移,隱藏掉就讓你看到了加載的動畫效果。

          border 實現邊框

          當你需要這樣一個上傳文件,按鈕時,你考慮的是找設計弄個圖片,還是自己寫一個???

          其實CSS寫,也很簡單的。

          <a href="javascript:;" class="upload" title="繼續上傳">添加圖片</a>
          .upload{ 
           position: relative; 
           display: inline-block; 
           width: 76px; 
           height: 76px; 
           color: #ccc; 
           border: 2px dashed; /*邊框虛線*/ 
           text-indent: -12em; /*使其文字看不到*/ 
           transition: color .25s; /*hover事件:顏色漸變動畫*/ 
           overflow: hidden; 
           margin: 50px 100px; 
          } 
          /*用before/after偽類做 + 號樣式*/ 
          .upload:before, .upload:after{ 
           content: ''; 
           position: absolute; 
           top: 50%; 
           left: 50%; 
          } 
          .upload:hover{ 
           color: #34538b; 
          } 
          .upload::before{ 
           width: 20px; 
           border-top: 4px solid; 
           margin: -2px 0 0 -10px; 
          } 
          .upload::after{ 
           height: 20px; 
           border-left: 4px solid; 
           margin: -10px 0 0 -2px; 
          }
          

          不規則的投影 filter

          當我們想給一個矩形或其他能用 border-radius 生成的形狀加投影時,用 box-shadow 都可以解決,如下圖:

          但是,當元素添加了一些偽元素或半透明的裝飾之后,box-shadow就有些 力不從心了,因為 border-radius 會無恥地忽視透明部分。這類情況包括下列幾種情況:

          1、半透明圖像、背景圖像、或者 border-image(比如老式的金質像框);

          2、元素設置了點狀、虛線或半透明的邊框,但沒有背景(或者當 background-clip 不是 border-box 時);

          3、對話氣泡,它的小尾巴通常是用偽元素生成的;

          4、幾乎所有的折角效果

          5、通過 clip-path 生成的形狀。

          下面來看看這個示例: html代碼

          <div class="speech">不規則的投影</div>
          

          css樣式

          div { 
           position: relative; 
           display: inline-flex; 
           flex-direction: column; 
           justify-content: center; 
           vertical-align: bottom; 
           box-sizing: border-box; 
           width: 8em; 
           padding: .5em; 
           height: 5em; 
           margin: .6em; 
           background: #0cc071; 
           color: #fff; 
           /*box-shadow: .1em .1em .3em rgba(0,0,0,.5); 此時是偽類是沒有陰影的*/ 
           -webkit-filter: drop-shadow(.2em .2em .2em rgba(0,0,0,.5)); 
           filter: drop-shadow(.2em .2em .2em rgba(0,0,0,.5)); 
          } 
           
          .speech { 
           border-radius: .3em; 
          } 
          .speech::before { 
           content: ''; 
           position: absolute; 
           top: 1em; 
           right: -.7em; 
           width: 0; 
           height: 0; 
           border: 1em solid transparent; 
           border-left-color: #0cc071; 
           border-right-width: 0; 
          }
          

          從上圖可以看出box-shadow搞不定的,drop-shadow給搞定了。這是為什么了?

          可以很明顯的看出區別,為什么會這樣呢?在這里我用的是div標簽,大家都知道,div標簽是個塊標簽,說白了是個盒模型,指的是一塊區域,box-shadow的屬性只能添加到盒模型外面,因此內部的東西是不會添加上的,就變成上圖的樣子,中間還是白色部分。而drop-shadow就不一樣了,他是把所有的非透明區域都做了陰影效果,就相當于一種真正的投影。

          css 實現自適應的彈框

          經常在網頁中看到一些Dialog,例如有些網頁點擊登錄注冊時就會跳出一個彈框來顯示登錄注冊頁面,下面就使用 css 完成一個可以自適應,無論窗口的大小,始終能保持水平垂直居中的dialog。

          <div class="c-pupup"> 
           <div class="dialog"> 
           <div class="content"> 
           我是內容 
           </div> 
           </div> 
          </div>
          

          css樣式

          .c-pupup{ 
           position: fixed; 
           top:0; 
           bottom: 0; 
           left: 0; 
           right: 0; 
           background: rgba(0,0,0,.5); 
           text-align: center; 
           white-space: nowrap; 
           z-index: 99; 
          } 
          .c-pupup:after{ 
           content: ''; 
           display: inline-block; 
           height: 100%; 
           vertical-align: middle; 
          } 
          .dialog{ 
           background-color: #fff; 
           display: inline-block; 
           vertical-align: middle; 
           border-radius: 6px; 
           text-align: left; 
           white-space: normal; 
           width: 400px; 
           height: 250px; 
          }
          

          總結

          這些CSS都是非常實用的,有興趣的可以收藏起來,沒準以后能用上。然后drop-shadow就不用去糾結IE能不能用了,因為我們已經放棄它了。

          喜歡小編或者覺得小編文章對你有幫助的,可以點擊一波關注哦!

          SS的強大和精妙,只有在認真研讀其代碼之后才會深刻明白。

          今日繼續用純CSS畫圖,并給大家整理了本文中所有代碼,需要的小伙伴可以私信我哦。

          一、陰陽

          首先,用CSS畫一個陰陽圖,如下:

          代碼也很簡單:

          #yin-yang {
           width: 96px;
           height: 48px;
           background: #eee;
           border-color: red;
           border-style: solid;
           border-width: 2px 2px 50px 2px;
           border-radius: 100%;
           position: relative;
          }
           
          #yin-yang:before {
           content: "";
           position: absolute;
           top: 50%;
           left: 0;
           background: #eee;
           border: 18px solid red;
           border-radius: 100%;
           width: 12px;
           height: 12px;
          }
           
          #yin-yang:after {
           content: "";
           position: absolute;
           top: 50%;
           left: 50%;
           background: red;
           border: 18px solid #eee;
           border-radius:100%;
           width: 12px;
           height: 12px;
          }
          

          當然,顏色什么的,可以隨便改啦~

          二、雞蛋

          再畫一個可愛的雞蛋~~~像這樣:

          代碼僅僅幾句話:

          #egg {
           display:block;
           width: 126px;
           height: 180px;
           background-color: red;
           -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
           border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
          }
          

          三、最后畫一個彎彎的月亮~

          長這樣:

          代碼非常非常少:

          #moon {

          width: 80px;

          height: 80px;

          border-radius: 50%;

          box-shadow: 15px 15px 0 0 red;

          }

          是不是很神奇?不敢相信這幾句代碼居然有這樣的功力?

          那就打開電腦,按照我之前講的方法創建一個html試試吧~

          不知道怎么創建的小伙伴看這里>>css3制作圖形大全:簡單幾句代碼畫出漂亮的圖形,一起來看看吧~

          avaScript 程序不能獨立運行,它需要被嵌入 HTML 中,然后瀏覽器才能執行 JavaScript 代碼。通過 <script> 標簽將 JavaScript 代碼引入到 HTML 中,有兩種方式:
          1.內部方式
          內部方式是通過<script>標簽包裹JavaScript代碼,從而引入HTML頁面中,示例代碼如下:

          <!DOCTYPE html>
           <html>
           <head>
             <meta charset="UTF-8">
             <title>JavaScript 基礎 - 引入方式</title>
           </head>
           <body>
             <!-- 內聯形式:通過 script 標簽包裹 JavaScript 代碼 -->
             <script>
               alert('嗨,歡迎來傳智播學習前端技術!')
             </script>
           </body>
           </html>

          2.外部形式

          一般將 JavaScript 代碼寫在獨立的以 .js 結尾的文件中,然后通過 <script>標簽的 <src>屬性引入,示例代碼如下:

          // demo.js
          document.write('嗨,歡迎來傳智播學習前端技術!')
          <!DOCTYPE html>
           <html>
           <head>
             <meta charset="UTF-8">
             <title>JavaScript 基礎 - 引入方式</title>
           </head>
           <body>
             <!-- 外部形式:通過 script 的 src 屬性引入獨立的 .js 文件 -->
             <script src="demo.js"></script>
           </body>
           </html>

          注意:如果 script 標簽使用 src 屬性引入了某 .js 文件,那么 標簽的代碼會被忽略!!!如下代碼所示:


          主站蜘蛛池模板: 亚洲色欲一区二区三区在线观看| 国产大秀视频一区二区三区| 亚洲日本一区二区| 国产一区视频在线| 亚洲AV无码一区二区乱孑伦AS| 国产一区二区三区不卡在线看| 国产成人一区二区在线不卡| 国产成人无码精品一区在线观看 | 东京热无码一区二区三区av| 中文字幕一区二区三区免费视频 | 成人免费一区二区三区在线观看| 日本v片免费一区二区三区| 久久久国产一区二区三区| 亚洲av福利无码无一区二区| 亚洲欧洲无码一区二区三区| 国产韩国精品一区二区三区| 中文字幕在线无码一区二区三区| 老熟女高潮一区二区三区| 日韩精品一区二区三区中文字幕| 国产内射999视频一区| 午夜AV内射一区二区三区红桃视| 精品国产日韩亚洲一区| 亚洲一区二区三区国产精品无码| 秋霞鲁丝片一区二区三区| 亚洲一区二区三区电影| 国产成人一区二区三区电影网站 | 亚洲视频一区二区三区四区| 国产在线精品一区二区在线看| 亚洲AV无码一区二区三区DV| 国产激情一区二区三区四区 | 一区二区三区在线|日本| 日韩一区二区在线观看视频| 一本色道久久综合一区| 精品深夜AV无码一区二区老年| 制服中文字幕一区二区 | 国产成人无码一区二区三区| 波多野结衣一区在线| 亚洲日韩一区二区一无码| 亚洲综合av永久无码精品一区二区| 国产萌白酱在线一区二区| 亚洲熟妇av一区|