欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用CSS3實現按鈕懸停閃爍動態(tài)特效代碼

  發(fā)布時間：2021-08-25 15:04:40   作者：齊論拼多多   我要評論
這篇文章主要介紹了使用CSS3實現按鈕懸停閃爍動態(tài)特效,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

我們介紹了使用CSS3 column系列屬性創(chuàng)建瀑布流布局的方法，感興趣的朋友可以去了解一下~

我們先來看看效果圖

下面我們來研究一下是怎么實現這個效果的：

首先是HTML部分，定義一個div容器包裹button按鈕，在按鈕中使用標簽對來包含按鈕文本

<div id="shiny-shadow">
 <button><span>鼠標懸停</span></button>
</div>

然后開始定義css樣式來進行修飾：調整布局樣式、色彩范圍

#shiny-shadow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #1c2541;
}
button {
  border: 2px solid white;
  background: transparent;
  text-transform: uppercase;
  color: white;
  padding: 15px 50px;
  outline: none;
}
span {
  z-index: 20;
}

接著制作一閃而過的覆蓋層：

使用:after選擇器制作一個帶透明度的長方形，讓它相對于button按鈕進行絕對定位

button {
  position: relative;
}
button:after {
    content: '';
    display: block;
    position: absolute;
    background: white;
    width: 50px;
    height: 125px;
    opacity: 20%;
}

在最終效果中，一閃而過的是一個傾斜的長方形；因此我們添加一個transform: rotate(-45deg);樣式

button:after {
    transform: rotate(-45deg);
}

使用top屬性和left屬性控制長方形的位置

button:after {
    top: -2px;
    left: -1px;
}

最后實現按鈕懸停閃爍動畫特效

因為是懸停效果，所以要使用到:hover選擇器；我們要設置鼠標懸停時長方形的位置

button:hover:after {
  left: 120%;
}

這樣突然變換位置不是我們要的效果，可以使用transition屬性添加一個過渡效果，因為該屬性是css3的一個新屬性，要添加前綴來兼容其他瀏覽器

button:hover:after {
  left: 120%;
  transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
   -webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
}

大致實現了，再修飾一下。

只想要button按鈕范圍內顯示長方形覆蓋層，那么可給button標簽添加一個overflow: hidden;樣式

button {
  overflow: hidden;
}

可以看出覆蓋層的位置還有點問題，最終效果中覆蓋層一開始是不顯示的，我們使用top屬性和left屬性來調整一下

button:after {
    top: -36px;
    left: -100px;
}

以上就是使用CSS3實現按鈕懸停閃爍動態(tài)特效的詳細內容。

到此這篇關于使用CSS3實現按鈕懸停閃爍動態(tài)特效的文章就介紹到這了,更多相關CSS3按鈕懸停閃爍動態(tài)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

相關文章

  • css3 實現文字閃爍效果的三種方式示例代碼

    這篇文章主要介紹了css3 實現文字閃爍效果的三種方式示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編
    2021-04-25

  • CSS3實現閃爍動畫效果的方法

    這篇文章主要為大家介紹了CSS3實現閃爍動畫效果的方法,可實現屬性名為className的元素呈現閃爍效果的功能,非常具有實用價值,需要的朋友可以參考下
    2015-02-09

最新評論