详解CSS情况渐变色照片transtion过渡实际效果技能

日期:2021-03-17 类型:科技新闻 

关键词:快速建站,网站建设系统,免费网页建站,网站免费建设,建站系统

1、background-image不适用CSS3 transition

background-image 不适用CSS3 transition ,而CSS3 gradient渐变色做为情况照片存在的情况下,下面的CSS设定是不容易有过渡实际效果的。

.gradient {
  background-image: linear-gradient(to right, olive, green);
  transition: background-image 0.5s linear;
}
.gradient:hover {
  background-image: linear-gradient(to right, green, purple);
}

电脑鼠标hover会发现渐变色的转变是很冒昧的,1点过渡实际效果也沒有。

下面难题来了,假如大家期待完成渐变色hover情况下有过渡转变的实际效果,该怎样完成呢?我这里列举的几种可行的方式。

2、依靠background-position完成渐变色过渡

background-image 尽管不适用CSS3 transition 过渡,可是 background-position 适用啊,因而,根据操纵情况部位,大家是能够完成渐变色过渡实际效果的。

完成实际效果以下(电脑鼠标hover):

有关编码以下:

<div class="box"></div>
.box {
    max-width: 400px;
    height: 200px;
    background: linear-gradient(to right, olive, green, purple);
    background-size: 200%;
    transition: background-position .5s;    
}
.box:hover {
    background-position: 100% 0;    
}

3、依靠background-color完成渐变色过渡

background-image 尽管不适用CSS3 transition 过渡,可是 background-color 适用啊,因而,根据操纵情况色调,和1个色调展现技能,大家也是能够完成渐变色过渡实际效果的。

电脑鼠标hover前后左右实际效果比照:

 

有关编码以下:

<div class="box"></div>
.box {
    max-width: 400px;
    height: 200px;
    background: olive linear-gradient(to right, rgba(0,255,0,0), rgba(0,255,0,.5));
    transition: background-color .5s;    
}
.box:hover {
    background-color: purple;    
}

4、依靠伪元素和opacity完成渐变色过渡

依靠伪元素建立转换后的渐变色实际效果,根据更改遮盖的渐变色的opacity全透明度转变完成渐变色过渡实际效果。

下图为hover以后的实际效果:

有关编码以下:

<div class="box"></div>
.box {
    max-width: 400px; height: 200px;
    background: linear-gradient(to right, olive, green);
    position: relative;
    z-index: 0;    
}
.box::before {
    content: '';
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background: linear-gradient(to right, green, purple);
    opacity: 0;    
    transition: opacity .5s;
    z-index: ⑴;
}
.box:hover::before {
    opacity: 1;    
}

5、完毕语

以上便是我所了解的几个方式,自然,毫无疑问也有别的更好的完成,欢迎填补。期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。