純CSS3實現的一些酷炫效果

時間 2019-12-14

標籤 css3 css 實現一些效果欄目 CSS 简体版

原文原文鏈接

　以前在網上看到一些用純CSS3實現的酷炫效果，覺得實現起來比較困難，因而想看看具體是怎麼實現的。css

1、笑臉貓動畫

實現效果以下：html

這個實現起來確實比較麻煩，不少地方須要花時間，有耐心地調整。html5

1.先看下頁面結構：

<body>
  <div class="container">
    <!-- 臉 -->
    <div class="face">
      <!-- 頭髮 -->
      <div class="hair">
        <div></div>
      </div>
      <!-- 眼睛 -->
      <div class="eye-wrap">
        <div class="eye left">
          <div class="eye-circle">
            <div class="eye-core"></div>
          </div>
          <div class="eye-bottom"></div>
          <div class="eye-red"></div>
        </div>
        <div class="eye right">
          <div class="eye-circle">
            <div class="eye-core"></div>
          </div>
          <div class="eye-bottom"></div>
          <div class="eye-red"></div>
        </div>
      </div>
      <!-- 鼻子 -->
      <div class="nose">
      </div>
      <!-- 嘴巴 -->
      <div class="mouth-wrap">
        <!-- <div class="mouth-top"></div> -->
        <div class="mouth left"></div>
        <div class="mouth right"></div>
      </div>
      <!-- 鬍子 -->
      <div class="mustache-wrap">
        <div class="mustache left">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div class="mustache right">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
    <!-- 耳朵 -->
    <div class="ear-wrap">
      <div class="ear left"> </div>
      <div class="ear right"> </div>
    </div>
  </div>
</body>

2.再看css部分

1.先看臉部face:css3

.face {
  /* top: 100px; */
  left: 50%;
  top: 50%;
  position: absolute;
  width: 400px;
  height: 340px;
  margin-left: -200px;
  margin-top: -170px;
  border-radius: 50% 50% 35% 35%;
  border: 2px solid #000;
  z-index: 10;
  background: #f3f3f3;
  overflow: hidden;
}

主要是要畫出橢圓形，width和height設置的值要注意，臉比較寬。而後關鍵就是border-radius的設置了：git

border-radius所有設置爲0時，就是一個長方形，而後把它的四個角對應的設置下，就能夠出現咱們想要的效果。github

2.接下來看耳朵的設置：web

耳朵看起來其實也是一個橢圓，經過設置border-radius，調出想要的效果。不過須要被遮住一部分，因此在HTML結構中，我把它放在face的外面了。ide

View Code

這是豎起來的耳朵，經過 transform:rotate(15deg); 旋轉一點，耳朵就塌下來了。動畫

3.而後是頭髮：spa

有了上述的實踐，知道頭髮也好弄了，仍是橢圓

View Code

另一個顏色，只須要在裏面加一個子div，而後給不一樣的顏色就ok。

4.再來看眼睛：

眼睛比較複雜，拆分四個小部件，眼眶，眼珠，下眼線，眼紅（笑起來露出的表情），對應的效果設置爲：

View Code

注意左右兩隻眼睛效果大體是同樣，只是位置不同，這是咱們只須要設置右邊的 right: 0px; 就能夠（由於設置了position: absolute）

5.鼻子：

/* 鼻子 */
.nose {
  width: 30px;
  height: 10px;
  /* background: #000; */
  border-bottom: 8px solid #000;
  border-radius: 0% 0% 50% 50%;
  top: 250px;
  left: 50%;
  margin-left: -15px;
  position: absolute;
}

這裏特別注意，height:10px; border-bottom: 8px solid #000;的設置，我原本想只用height:10px;而後設置border-radius，但是效果卻長這樣：

沒有半圓的效果，是高度設置不夠？變成18px，這貨長這樣，也不對，因此就加上border-bottom

6.嘴巴：

View Code

算是比較簡單，設置border-bottom，border-left或border-right就能夠。嘴巴上翹的效果是改變其border-radius值

7.兩邊的鬍子：

View Code

雖然比較麻煩，不過也算是簡單的圖形，只須要把height，width，border-top，border-radius，transform: rotate這些值設置恰當就好。

8.鼠標hover樣式：

View Code

耳朵，嘴巴，眼睛等地方須要修改transform，border-radius，width等值的屬性。

3.線上效果及源碼

線上效果：點我呀

源碼：戳我看看

參考資料：再看看

二：立方體旋轉

效果：

HTML部分：

<body class="body">
  <div class="rect-wrap">   <!-- //舞臺元素，設置perspective，讓其子元素得到透視效果。 -->
    <div class="container">    <!-- //容器，設置transform-style: preserve-3d，讓其子元素在3D空間呈現 -->
        <div class="top slide">1</div>   <!-- //立方體的六個面 -->
        <div class="bottom slide">2</div>
        <div class="left slide">3</div>
        <div class="right slide">4</div>
        <div class="front slide">5</div>
        <div class="back slide">6</div>
    </div>
  </div>
</body>

CSS:

View Code

1.3維空間圖

電腦屏幕中心爲原點，橫向爲X軸，縱向爲Y軸，人臉的方向爲Z軸；

translate(x,y)、translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z)：定義位置的移動距離

rotate(angle)、rotateX(a)、rotateY(a)、rotateZ(a)、rotate3d(x,y,z,angle)：定義元素的旋轉角度。

2.perspective屬性

perspective 屬性定義 3D 元素距視圖的距離，以像素計。該屬性容許您改變 3D 元素查看 3D 元素的視圖。

當爲元素定義 perspective 屬性時，其子元素會得到透視效果，而不是元素自己。

註釋：perspective 屬性隻影響 3D 轉換元素。

提示：請與 perspective-origin 屬性一同使用該屬性，這樣您就可以改變 3D 元素的底部位置。

3.transform-style屬性

transform-style: flat|preserve-3d; 默認值爲flat,表示子元素以2D平面呈現；perserve-3d表示子元素以3D平面呈現

4.transform-origin屬性

transform-origin 屬性容許您改變被轉換元素的位置（能夠理解爲元素以哪一個位置爲旋轉原點）。

語法：
transform-origin: x-axis y-axis z-axis;
屬性演示效果: 戳我

默認值爲： 50% 50% 0

5.線上效果及源碼

線上效果：點我呀

源代碼：戳我看看

參考資料：再看看

3、酷炫button

效果：（渣渣像素(/ □ \)）

看下Twitter 作的立體按鈕效果，相似翻蓋的動做是怎麼作的。

HTML部分：

<body class="body">
<section>
  <div class="button">
    hello, welcome to the new world!
  </div>
  <div class="cover">
    <div class="innie"></div>
    <div class="spine"></div>
    <div class="outie"></div>
  </div>
  <div class="shadow"></div>
</section>
</body>

CSS部分：

View Code

主要是一些效果的疊加，而後注意 transform-style: preserve-3d;設置3D效果。

線上效果及源碼

線上效果：點我呀

源代碼：戳我看看

參考：具體的沒找到(/ □ \)

四：3D照片牆

效果：

HTML部分：

<body class="body">
  <div class="photo-wrap">  <!-- 舞臺 -->
      <div class="container">   <!-- 容器 -->
          <div class="img">我是中心</div>
          <div class="img img01">1</div>
          <div class="img img02">2</div>
          <div class="img img03">3</div>
          <div class="img img04">4</div>
          <div class="img img05">5</div>
          <div class="img img06">6</div>
          <div class="img img07">7</div>
          <div class="img img08">8</div>
          <div class="img img09">9</div>
      </div>
  </div>
</body>

CSS部分：

View Code

1.倒影的實現

基本語法：

img {
    -webkit-box-reflect: below;
}

offset屬性值定義圖片和倒影影像之間的間距：

img {
    -webkit-box-reflect: below 3px;
}

給倒影增長消影效果：

-webkit-box-reflect:below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5));

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。