給wordpress網站元素添加動態漂浮效果

繼續分享wordpress外貿建站教程。之前的一個wordpress外貿建站項目中，為了讓頁面元素不過于單調，我給一些裝飾性的元素添加了CSS動態動態漂浮效果。

其實這個代碼是向AI請教出來的，不敢獨享，分享給大家吧。

代碼分享

selector {
  animation: float 1s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-20px);
  }
  100% {
    transform: translatey(0px);
  }
}

如上所示，代碼中的1s代表時間，數值越小，漂浮的動作就越快，下面的px控制元素運動的幅度。這些數值可自行修改。

使用方法

這段代碼可以使用到elementor或古騰堡中。

如果你使用的是elementor編輯器（需要pro），打開編輯器，選中需要添加效果的元素，比如按鈕、圖片、文字等，然后打開【高級設置】-【Custom CSS】把上面的代碼粘貼進去就可以了。

效果如上面的動圖所示。

給WP古騰堡區塊添加CSS效果

如果你使用的是古騰堡編輯器，那可能需要安裝第3方插件才能更方便的使用這段代碼。悅然wordpress建站以前給大家分享過一個插件Blocks Css，大家可以安裝試試，然后上面的代碼使用方法是一樣的。在古騰堡中選中元素，然后添加CSS代碼就OK了。

如果你安裝了GreenShift插件付費版，那么它自帶了自定義CSS功能，只要是使用GreenShift提供的模塊，選中之后，點右邊的高級設置-【響應式和自定義CSS】，然后把CSS代碼粘貼進行就可以了，不過稍微不同的是需要把selector換成{CURRENT}，具體請看下面的代碼。

{CURRENT} {
  animation: float 1s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-20px);
  }
  100% {
    transform: translatey(0px);
  }
}