国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

記一些css 3效果

only_do / 1896人閱讀

摘要：半透明邊框規(guī)定背景的繪制區(qū)域效果如圖平行四邊形方法一平行四邊形方法二平行四邊形毛玻璃效果時(shí)間慢慢地帶走了本不該留下的，我已經(jīng)快要想不起來(lái)你笑起來(lái)的樣子，你穿的什么衣服牽著誰(shuí)的手，突然難過(guò)了。

半透明邊框 
background-clip: 規(guī)定背景的繪制區(qū)域
.div {
    width: 200px;
    height: 200px;
    background: blue;
    border: 10px solid rgba(255, 170, 170, 0.3);
    background-clip: padding-box;
}

效果如圖

平行四邊形 
// 方法一


  
平行四邊形




.skew-ex {
    width: 200px;
    height: 40px;
    line-height: 40px;
    background: tomato;
    color: white;
    transform: skewX(-45deg);
    >div {
      transform: skewX(45deg);
    }
  }

// 方法二


  平行四邊形


.skew-ex {
    width: 200px;
    height: 40px;
    line-height: 40px;
    color: white;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: tomato;
      z-index: -1;
      transform: skewX(-45deg);
    }
  }
毛玻璃效果 

  

  
時(shí)間慢慢地帶走了本不該留下的，我已經(jīng)快要想不起來(lái)你笑起來(lái)的樣子，你穿的什么衣服牽著誰(shuí)的手，突然難過(guò)了。我知道自己喜歡你，但我不知道將來(lái)在哪，因?yàn)槲抑?，無(wú)論在哪里，你都不會(huì)帶我去，而記憶打亮你的微笑，要如此用力才變得歡喜。
  


// 主要是main標(biāo)簽的偽元素，設(shè)置跟大盒子一樣的背景，再把z-index層級(jí)小于main，讓字在背景上，有個(gè)要注意的就是
// 在使用負(fù)的z-index來(lái)把一個(gè)子元素移動(dòng)到它的父元素下層時(shí)，如果父元素的上級(jí)元素有背景，則該子元素將出現(xiàn)在他們之后
.glass-ex {
    width: 500px;
    height: 400px;
    background-size: cover;
    margin-top: 30px;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .main {
      width: 440px;
      height: 300px;
      background: rgba(255, 255, 255, 0.3);
      font-size: 14px;
      line-height: 32px;
      display: flex;
      display: -webkit-flex;
      justify-content: flex-start;
      align-items: center;
      padding: 2%;
      position: relative;
      z-index: 9;
      overflow: hidden;
      &::before{
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: url(../../static/img/chai.jpg) no-repeat;
        background-size: cover;
        filter: blur(10px);
        z-index: -1;
        margin: -15px;
      }
    }
    .glass-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: url(../../static/img/chai.jpg) no-repeat;
      background-size: cover;
    }
  }

效果如圖

閃爍效果 
.blink-ex {
  color: #009a61;
  animation: 1s blink-smooth 6 alternate; // 緩動(dòng)閃爍
  animation: 1s blink-smooth 3 steps(1); // 生硬閃爍
}
@keyframes blink-smooth {
  50% {
    color: transparent;
  }
}
輪船背景圖移動(dòng) 
輪船過(guò)渡效果
.panoramic {
  width: 100%;
  height: 100%;
  background: url(../../static/img/ship.jpg) no-repeat;
  background-size: auto 100%;
  text-indent: -200%;
  animation: panoramic 10s linear infinite alternate;
  animation-play-state: paused;
}
.panoramic:hover,
.panoramic:focus {
  animation-play-state: running;
}

@keyframes panoramic {
  to {
    background-position: 100% 0;
  }
}

效果如圖，鼠標(biāo)移上去輪船滾動(dòng)

沿環(huán)形路徑移動(dòng)的動(dòng)畫(huà)效果 

  

    
  


.path {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: #F2AE43;
  padding: 10px;
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transform-origin: 50% 150px; /* 150px == 路徑的半徑 */
    background: tomato;
    display: inline-block;
    animation: spin 6s infinite linear;
    >img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      animation: inherit;
      animation-direction: reverse;
    }
  }
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

效果如圖

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/116985.html

相關(guān)文章

  • 【轉(zhuǎn)】CSS 那么多屬性，而且每個(gè)屬性都有多個(gè)值怎么記？

    摘要：題主說(shuō)屬性太多，其實(shí)就是去控制樣式而已，網(wǎng)頁(yè)樣式是借鑒于傳統(tǒng)的報(bào)紙等印刷品的排版。常用基礎(chǔ)樣式如圖常用屬性和的取值是基于包含塊離元素最近的塊級(jí)祖先元素的寬注意是寬。這些屬性只有用在定位元素除了為值上才有效。 CSS的本質(zhì)可以分為宏觀與微觀兩方面。 宏觀上它的存在就是為了控制頁(yè)面的顯示樣式。包括布局，顏色，字體等。微觀上則是實(shí)現(xiàn)這種控制功能的各種屬性的定義和工作原理。 了解定義就能干活，...

    szysky 評(píng)論0 收藏0

  • 【轉(zhuǎn)】CSS 那么多屬性，而且每個(gè)屬性都有多個(gè)值怎么記？

    摘要：題主說(shuō)屬性太多，其實(shí)就是去控制樣式而已，網(wǎng)頁(yè)樣式是借鑒于傳統(tǒng)的報(bào)紙等印刷品的排版。常用基礎(chǔ)樣式如圖常用屬性和的取值是基于包含塊離元素最近的塊級(jí)祖先元素的寬注意是寬。這些屬性只有用在定位元素除了為值上才有效。 CSS的本質(zhì)可以分為宏觀與微觀兩方面。 宏觀上它的存在就是為了控制頁(yè)面的顯示樣式。包括布局，顏色，字體等。微觀上則是實(shí)現(xiàn)這種控制功能的各種屬性的定義和工作原理。 了解定義就能干活，...

    xuweijian 評(píng)論0 收藏0

  • 小丸子成長(zhǎng)記---在stylus下用DIV+CSS一步一步打造小丸子

    摘要：小丸子成長(zhǎng)記程序員沒(méi)有對(duì)象怎么辦一個(gè)呀但是如果沒(méi)妹妹呢跟母猴子生一個(gè)呀哈哈哈那么怎么用打造一個(gè)天真無(wú)邪的小丸子呢最后效果一直有種錯(cuò)覺(jué)這是旺仔準(zhǔn)備工作安裝在項(xiàng)目目錄下新建和并在上引入命令行切換至項(xiàng)目目錄啟動(dòng)實(shí)時(shí)刷新啟 小丸子成長(zhǎng)記 程序員沒(méi)有對(duì)象怎么辦? --new 一個(gè)呀 但是如果沒(méi)妹妹呢? --跟母猴子生一個(gè)呀 哈哈哈,那么怎么用stylus打造一個(gè)天真無(wú)邪的小丸子呢? 最后效果(一...

    muzhuyu 評(píng)論0 收藏0

  • 匠心打造Vue側(cè)滑菜單組件

    摘要：本文介紹一個(gè)簡(jiǎn)單的類似的布局組件的實(shí)現(xiàn)，基于。介紹的內(nèi)容已經(jīng)制作成組件。即當(dāng)不可以拖出抽屜時(shí)，應(yīng)觸發(fā)默認(rèn)事件，比如垂直方向的滾動(dòng)等等。這種優(yōu)化可以將一部分復(fù)雜的計(jì)算工作提前準(zhǔn)備好，使頁(yè)面的反應(yīng)更為快速靈敏。 本文介紹一個(gè)簡(jiǎn)單的DrawerLayout（類似Android的DrawerLayout）布局組件的實(shí)現(xiàn)，基于Vue.js。介紹的內(nèi)容已經(jīng)制作成 vue-drawer-layout...

    sutaking 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<