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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

立即前往

首頁/文章專欄/記一些css 3效果

記一些css 3效果

only_do 發布于2019-08-30 15:54 / 1888人閱讀

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

半透明邊框

background-clip: 規定背景的繪制區域

.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);
    }
  }

毛玻璃效果


  
  時間慢慢地帶走了本不該留下的，我已經快要想不起來你笑起來的樣子，你穿的什么衣服牽著誰的手，突然難過了。我知道自己喜歡你，但我不知道將來在哪，因為我知道，無論在哪里，你都不會帶我去，而記憶打亮你的微笑，要如此用力才變得歡喜。

// 主要是main標簽的偽元素，設置跟大盒子一樣的背景，再把z-index層級小于main，讓字在背景上，有個要注意的就是
// 在使用負的z-index來把一個子元素移動到它的父元素下層時，如果父元素的上級元素有背景，則該子元素將出現在他們之后
.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; // 緩動閃爍
  animation: 1s blink-smooth 3 steps(1); // 生硬閃爍
}
@keyframes blink-smooth {
  50% {
    color: transparent;
  }
}

輪船背景圖移動

輪船過渡效果

.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;
  }
}

效果如圖，鼠標移上去輪船滾動

沿環形路徑移動的動畫效果

.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);
  }
}

效果如圖

云服務器 GPU云服務器 css效果效果顯示 css jquery 氣球css js效果 js和css效果圖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116985.html

【轉】CSS 那么多屬性，而且每個屬性都有多個值怎么記？

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

szysky 2019-08-19 17:53 評論0 收藏0
【轉】CSS 那么多屬性，而且每個屬性都有多個值怎么記？

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

xuweijian 2019-08-30 12:51 評論0 收藏0
小丸子成長記---在stylus下用DIV+CSS一步一步打造小丸子

摘要：小丸子成長記程序員沒有對象怎么辦一個呀但是如果沒妹妹呢跟母猴子生一個呀哈哈哈那么怎么用打造一個天真無邪的小丸子呢最后效果一直有種錯覺這是旺仔準備工作安裝在項目目錄下新建和并在上引入命令行切換至項目目錄啟動實時刷新啟小丸子成長記程序員沒有對象怎么辦? --new 一個呀但是如果沒妹妹呢? --跟母猴子生一個呀哈哈哈,那么怎么用stylus打造一個天真無邪的小丸子呢? 最后效果(一...

muzhuyu 2019-08-29 15:06 評論0 收藏0
匠心打造Vue側滑菜單組件

摘要：本文介紹一個簡單的類似的布局組件的實現，基于。介紹的內容已經制作成組件。即當不可以拖出抽屜時，應觸發默認事件，比如垂直方向的滾動等等。這種優化可以將一部分復雜的計算工作提前準備好，使頁面的反應更為快速靈敏。本文介紹一個簡單的DrawerLayout（類似Android的DrawerLayout）布局組件的實現，基于Vue.js。介紹的內容已經制作成 vue-drawer-layout...

sutaking 2019-08-22 11:20 評論0 收藏0