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

CSS鼠標(biāo)懸浮動(dòng)畫(huà)-hover屬性詳解

  發(fā)布時(shí)間：2024-05-24 15:35:41   作者：佚名   我要評(píng)論
這篇文章主要介紹了CSS鼠標(biāo)懸浮動(dòng)畫(huà)-hover屬性詳解，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，感興趣的朋友跟隨小編一起看看吧

1. Grow-Shadow

鼠標(biāo)移入盒子放大并出現(xiàn)底部陰影

效果：

代碼

<div class="box"></div>
.box {
  width: 200px;
  height: 200px;
  background-color: aqua;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
}
.box:hover,
.box:focus,
.box:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

2. Move-Shadow

鼠標(biāo)移入盒子,盒子向上移動(dòng)并出現(xiàn)底部陰影

效果：

代碼

<div class="box"></div>
.box {
  width: 200px;
  height: 200px;
  background: aqua;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  &::before {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: "";
    top: 100%;
    left: 5%;
    height: 10px;
    width: 90%;
    opacity: 0;
    background: -webkit-radial-gradient(
      center,
      ellipse,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0) 80%
    );
    background: radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0) 80%
    );
    /* W3C */
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform, opacity;
    transition-property: transform, opacity;
  }
}
.box:hover,
.box:focus,
.box:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  &::before {
    opacity: 1;
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
  }
}

3. Curl-Bottom-Right

鼠標(biāo)移入盒子,盒子右下角卷起

效果：

代碼

<div class="box"></div>
.box {
  width: 200px;
  height: 200px;
  background: aqua;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  &::before {
    pointer-events: none;
    position: absolute;
    content: "";
    height: 0;
    width: 0;
    bottom: 0;
    right: 0;
    background: white;
    /* IE9 */
    background: linear-gradient(
      315deg,
      white 45%,
      #aaa 50%,
      #ccc 56%,
      white 80%
    );
    box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: width, height;
    transition-property: width, height;
  }
}
.box:hover:before,
.box:focus:before,
.box:active:before {
  width: 25%;
  height: 25%;
}

到此這篇關(guān)于CSS鼠標(biāo)懸浮動(dòng)畫(huà)-hover屬性的文章就介紹到這了,更多相關(guān)CSS鼠標(biāo)懸浮動(dòng)畫(huà)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • CSS實(shí)現(xiàn)鼠標(biāo)懸浮動(dòng)畫(huà)特效

    Css(層疊樣式表)是種格式化網(wǎng)頁(yè)的標(biāo)準(zhǔn)方式，用于控制設(shè)置網(wǎng)頁(yè)的樣式，并且允許CSS樣式信息與網(wǎng)頁(yè)內(nèi)容(由HTML語(yǔ)言定義)分離的一種技術(shù),使用css可以制作各種好看的動(dòng)畫(huà)特效,
    2023-05-04

  • CSS中的hover屬性使用方法

    css 的 hover 屬性是一種偽類(lèi)選擇器，它可以用來(lái)在鼠標(biāo)懸停在某個(gè)元素上時(shí)改變?cè)撛鼗蚱渥釉?、同?jí)元素、相鄰元素的樣式，這篇文章主要介紹了CSS中的hover屬性使用方法,
    2023-05-29

最新評(píng)論