CSS特效

阿新 • • 發佈：2020-07-31

CSS特效

1.圖示按鈕

這個按鈕特效比較簡單，通過偽類選擇器before和after，通過絕對定位，定位在按鈕的兩端。

然後通過hover屬性，劃上時新增動畫和陰影，就有了視覺上的特效。

body {
  display: flex;
  /*彈性佈局*/
  flex-direction: column;
  /* 靈活的專案將垂直顯示，正如一個列一樣。 豎直佈局 */
  align-items: center;
  /* 元素位於容器的中心。
   彈性盒子元素在該行的側軸（縱軸）上居中放置。
   （如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度）。 
   =》居中對其彈性盒子的各個元素
 
   */
  background: #142130;
  min-height: 100vh;
  /* 設定最小的高度 */
}

a {
  position: relative;
  /* 相對定位 */
  padding: 10px 30px;
  /*  =>內邊距
   上內邊距和下內邊距是 10px 
   右內邊距和左內邊距是 30px

   四個則是：
   上 ，右 ，下 ， 左

   三個則是：
   上 ，右 and 左  ，下
   */

  margin: 45px 0;
  /* 外邊距 所有規則和內邊距一樣 */
  color: #B7A3E0;
  /* 框內的字型顏色 */
  text-decoration: none;
 
  /*刪除連結下劃線*/
  font-size: 20px;
  /* 框內字型的大小 */
  transition: 0.5s;
  /* 定義過渡時間 */
  overflow: hidden;
  /* 隱藏溢位的線條 */
  -webkit-box-reflect: below 1px linear-gradient(transparent, #0003);
  /*  倒影在文字下方  ，線性漸變建立遮罩影象 */
  /* 倒影效果：
   none：無倒影
   above：指定倒影在物件的上邊
   below：指定倒影在物件的下邊
   left：指定倒影在物件的左邊
   right：指定倒影在物件的右邊 
   <length>：用長度值來定義倒影與物件之間的間隔。可以為負值
 
   <percentage>：用百分比來定義倒影與物件之間的間隔。可以為負值
   none：無遮罩影象
   <url>：使用絕對或相對地址指定遮罩影象。
   <linear-gradient>：使用線性漸變建立遮罩影象。
   <radial-gradient>：使用徑向(放射性)漸變建立遮罩影象。
   <repeating-linear-gradient>：使用重複的線性漸變建立背遮罩像。
   <repeating-radial-gradient>：使用重複的徑向(放射性)漸變建立遮罩影象。
   */
}

/* hover：滑鼠移到框上的懸停效果 */

a:hover {
  background: #B7A3E0;
  color: #111;
  box-shadow: 0 0 50px #B7A3E0;
  /* 新增陰影效果
   box-shadow: h-shadow v-shadow  spread color ;
   h-shadow    必需的。水平陰影的位置。允許負值
   v-shadow    必需的。垂直陰影的位置。允許負值
   spread  可選。陰影的大小
   color   可選。陰影的顏色
   */
  transition-delay: 0.5s;
  /* 在過渡效果開始前等待 0.5 秒： */
}

/* 
:before 選擇器在被選元素的內容前面插入內容。
請使用 content 屬性來指定要插入的內容。
*/
a::before {
  content: '';
  position: absolute;
  /* 啟動絕對定位 */
  top: 0;
  right: 0;
  /* 設定開始的位置圓點 */
  width: 10px;
  height: 10px;
  /* 設定開始大小 */
  border-top: 2px solid #B7A3E0;
  border-right: 2px solid #B7A3E0;
  /* 設定效果 */
  transition: 0.5s;
  transition-delay: 0.25s;
  /* 在過渡效果開始前等待 0.25s 秒 */
}

a:hover::before {
  /* 設定懸停後的前面插入效果 */
  width: 100%;
  height: 100%;
  transition-delay: 0s;
}

/* 
:after 選擇器在被選元素的內容後面插入內容。
請使用 content 屬性來指定要插入的內容。
*/
a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #B7A3E0;
  border-left: 2px solid #B7A3E0;
  transition: 0.5s;
  transition-delay: 0.25s;
}

a:hover::after {
  width: 100%;
  height: 100%;
  transition-delay: 0s;
}

a:nth-child(1) {
  filter: hue-rotate(100deg);
  /* css濾鏡 */
}

a:nth-child(3) {
  filter: hue-rotate(200deg);
}

html：

<body>
  <a href="#">按鈕</a>
  <a href="#">按鈕</a>
  <a href="#">按鈕</a>
</body>

效果圖片：

2.跑馬燈按鈕

基本與上面的按鈕類似

只是每個按鈕的四個角是用四個span來定位，每個span加上各自的動畫，就形成了跑馬燈效果

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #14213D;
  min-height: 100vh;
}

a {
  position: relative;
  display: inline-block;
  /* 行內塊元素。 */
  margin: 45px 0;
  color: #6ECF81;
  text-decoration: none;
  font-size: 20px;
  text-transform: uppercase;
  transition: 0.5s;
  overflow: hidden;
  letter-spacing: 4px;
  -webkit-box-reflect: below 1px linear-gradient(transparent, #0003);
}

a span {
  position: absolute;
  display: block;
}

a:hover {
  background: #6ECF81;
  color: #111;
  box-shadow: 0 0 5px #6ECF81,
    0 0 25px #6ECF81,
    0 0 50px #6ECF81,
    0 0 100px #6ECF81
}

a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #6ECF81);
  animation: animate1 0.5s linear infinite;
}

@keyframes animate1 {
  0% {
    left: -100%;
   }

  50%,
  100% {
    left: 100%;
   }
}

a span:nth-child(2) {
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #6ECF81);
  animation: animate2 0.5s linear infinite;
  animation-delay: 0.125s;
}

@keyframes animate2 {
  0% {
    top: -100%;
   }

  50%,
  100% {
    top: 100%;
   }
}

a span:nth-child(3) {
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #6ECF81);
  animation: animate3 0.5s linear infinite;
  animation-delay: 0.25s;
}

@keyframes animate3 {
  0% {
    right: -100%;
   }

  50%,
  100% {
    right: 100%;
   }
}

a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #6ECF81);
  animation: animate4 0.5s linear infinite;
  animation-delay: 0.375s;
}

@keyframes animate4 {
  0% {
    bottom: -100%;
   }

  50%,
  100% {
    bottom: 100%;
   }
}

a:nth-child(1) {
  filter: hue-rotate(120deg);
}

a:nth-child(3) {
  filter: hue-rotate(270deg);
}

html:

<body>
  <a href="#">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
     SHINE
  </a>
  <a href="#">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
     SHINE
  </a>
  <a href="#">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
     SHINE
  </a>
</body>

效果圖片：

3.圖示旋轉

用幾個i標籤來代表邊框，設定不同的透明度，製造重影效果。

body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
  background: slategray;
}

/* 圖示基本樣式 */
a {
  display: block;
  text-align: center;
  text-decoration: none;
  margin: 0 50px;
  padding: 0 20px;
  color: seagreen;
}

.container {
  width: 60px;
  height: 60px;
  position: relative;
  transition: all .3s;

}

/* 移入旋轉 shew 扭曲  斜切變換 */
a:hover .container {
  transform: rotate(-35deg) skew(10deg);
}

.iconfont {
  font-size: 50px;
  line-height: 60px;
  text-align: center;
}

i {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #fff;
  transition: 0.3s;
}

a:hover i:nth-child(1) {
  opacity: 0.2;

}

a:hover i:nth-child(2) {
  opacity: 0.4;
  transform: translate(5px, -5px);
}

a:hover i:nth-child(3) {
  opacity: 0.6;
  transform: translate(10px, -10px);
}

a:hover i:nth-child(4) {
  opacity: 0.8;
  transform: translate(15px, -15px);
}

a:hover i:nth-child(5) {
  opacity: 1;
  transform: translate(20px, -20px);
}

.items:nth-child(2).container i,
.items:nth-child(2) a p {
  border-color: yellowgreen;
  color: yellowgreen;
}

.items:nth-child(3) .container i,
.items:nth-child(3) a p {
  border-color: sandybrown;
  color: sandybrown;
}

.items:nth-child(1) a:hover i {
  box-shadow: -1px 1px 3px pink;
}

.items:nth-child(2) a:hover i {
  box-shadow: -1px 1px 3px yellowgreen;
}

.items:nth-child(3) a:hover i {
  box-shadow: -1px 1px 3px sandybrown;
}

p {
  transform: translateY(-30px);
  opacity: 0;
  transition: .3s;
  font-weight: 700;
}

a:hover p {
  transform: translateY(0px);
  opacity: 1;
}

html:

<body>

  <div class="items">
    <a href="#">
      <div class=" container">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i class="iconfont icon-qq"></i>
      </div>
      <p>QQ</p>
    </a>
  </div>

  <div class="items">
    <a href="#">
      <div class=" container">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i class="iconfont icon-weixin"></i>
      </div>
      <p>WeChat</p>
    </a>
  </div>

  <div class="items">
    <a href="#">
      <div class=" container">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i class="iconfont icon-tubiaozhizuo-"></i>
      </div>
      <p>WeiBo</p>
    </a>
  </div>
</body>

效果圖片：

4.點選頁面出現愛心

window.requestAnimationFrame() 告訴瀏覽器——你希望執行一個動畫，並且要求瀏覽器在下次重繪之前呼叫指定的回撥函式更新動畫。該方法需要傳入一個回撥函式作為引數，該回調函式會在瀏覽器下一次重繪之前執行

<script>
     (function (window, document, undefined) {
      var hearts = [];
      window.requestAnimationFrame = (function () {
        return window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.oRequestAnimationFrame ||
          window.msRequestAnimationFrame ||
          function (callback) {
            setTimeout(callback, 1000 / 60);
           }
       })();
      init();

      function init() { //初始化愛心
        css(
          ".heart{width: 10px;height: 10px;
　　　　　　　　　　　　position: fixed;background: #f00;transform: rotate(45deg);
　　　　　　　　　　　　　-webkit-transform: rotate(45deg);
　　　　　　　　　　　　-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';
　　　　　　　　　　　　width: inherit;height: inherit;background: inherit;border-radius: 50%;
　　　　　　　　　　　　-webkit-border-radius: 50%;-moz-border-radius: 50%;
　　　　　　　　　　　　position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
         );
        attachEvent();
        gameloop();
       }

      function gameloop() {
        for (var i = 0; i < hearts.length; i++) {
          if (hearts[i].alpha <= 0) {
            document.body.removeChild(hearts[i].el);
            hearts.splice(i, 1);
            continue;
           }
          hearts[i].y--;
          hearts[i].scale += 0.004;
          hearts[i].alpha -= 0.013;
          hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" +
            hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale +
            ") rotate(45deg);background:" + hearts[i].color;
         }
        requestAnimationFrame(gameloop);
       }

      function attachEvent() { //監聽滑鼠單擊事件
        var old = typeof window.onclick === "function" && window.onclick;
        window.onclick = function (event) {
          old && old();
          createHeart(event);
         }
       }

      function createHeart(event) {//建立div存放愛心
        var d = document.createElement("div");
        d.className = "heart";
        hearts.push({
          el: d,
          x: event.clientX - 5,
          y: event.clientY - 5,
          scale: 1,
          alpha: 1,
          color: randomColor()
         });
        document.body.appendChild(d);
       }

      function css(css) {
        var style = document.createElement("style");
        style.type = "text/css";
        try {
          style.appendChild(document.createTextNode(css));
         } catch (ex) {
          style.styleSheet.cssText = css;
         }
        document.getElementsByTagName('head')[0].appendChild(style);
       }

      function randomColor() { //隨機函式
        return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
           .random() *
          255)) + ")";
       }
     })(window, document);
  </script>