欧美性生交大片免费看_国产成人无码一二三区视频_亚洲免费观看视频_亚洲中文字幕无码av永久_天天天天躁天天爱天天碰2018

logo竹子建站
竹子建站小技巧:給圖文組件的又一新用法----加上進度條及小箭頭
2020-11-06 15:43:20
今天小竹子帶來的是一個圖文組件的效果教程,當鼠標移動到圖文組件上面時,會有豐富的小細節(jié)出現(xiàn),如下圖所示:
實現(xiàn)上圖效果我們依舊需要使用一段代碼,如下:
<style>      

/*       box-shadow: 0 6px 40px rgba(128, 128, 128, 0.25);

  } */

._13b1tlgp0o000 .zz-element-wrapper:hover{

     box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);

    transition: all 0.36s ease;

}

    ._13b1tlgp0o000 .zz-element-wrapper:hover .title *{

      color:rgba(0, 221, 220, 1);

  }

 

._13b1tlgp0o000 .zz-element-wrapper img{

  transition: all 0.36s ease;

}

._13b1tlgp0o000 .zz-element-wrapper:hover img{

  transform:scale(1.1);

}

 

/*進度條*/

._13b1tlgp0o000 .zz-element-wrapper::after{

  content:'';

  position:absolute;

  left:0;

  bottom:-1px;

  height:2px;

  width:0%;

  background-color:rgba(0, 221, 220, 1);

  transition: all 0.36s ease;

  z-index:3;

}

._13b1tlgp0o000 .zz-element-wrapper:hover::after{

  width:100%;

}

/* 箭頭 ,箭頭可替換為矢量圖,修改代碼:

content:url(https://f.cdn-static.cn/12954_15984245228312.png);

*/

 ._13b1tlgp0o000 .zz-element-wrapper .text{

  position:relative;

}

._13b1tlgp0o000 .zz-element-wrapper .text::after{

  content:'→';

  position:absolute;

  right:0;

  top:50%;

  transform:translate(100%,-50%);

  transition: all 0.36s ease;

  opacity:0;

  color:rgba(153, 153, 153, 1);

  font-size:24px;

}

._13b1tlgp0o000 .zz-element-wrapper:hover .text::after{

  transform:translate(0%,-50%);

  opacity:1;

</style>
使用這段代碼的方式和之前的教程是一致的,首先將代碼復制到圖文組件中,然后把代碼中的組件ID進行更換,如下圖所示進行操作:
替換以后就可以看到,現(xiàn)在代碼的效果就已經(jīng)生效了,然后我們可以通過調(diào)整代碼,來實現(xiàn)對這段效果的調(diào)整。

如上圖所示,上文中使用藍色背景標注的代碼就是效果中圖文的標題顏色以及下部的進度條顏色

我們可以對代碼中的色號進行修改,以此來調(diào)整實際效果的顏色:

同樣的,上文代碼中使用橙色背景色的0.36s就是圖文效果中進度條滑動的時長,0.36s就意味著進度條會在0.36s內(nèi)走完,我們可以調(diào)整這個時長來改變進度條移動的速度。
好了,今天的小教程就到這里,大家趕快去嘗試一下吧!,我們下期再見。