gpt4 book ai didi

javascript - CSS3 Transitions 缓和 div

转载 作者:行者123 更新时间:2023-11-29 21:34:58 25 4
gpt4 key购买 nike

我的问题是我想让 div 像 here 一样模糊和活跃.我已设法将代码扩展到 div 而不是此 JSFIddle 中的文章但问题在于转换(如果模糊没有改变,请在 javascript 设置下的框架和扩展中打开 add jquery >2,jsfiddle 没有这样做)。我想实现第一个链接中的转换。它们是以下

transition: 
opacity 0.2s linear,
text-shadow 0.5s ease-in-out,
color 0.5s ease-in-out;

我们将不胜感激。

最佳答案

试试这个

.bluredDiv {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
width: 80%;
height: 80%;
transform: scale(.9);
transition: transform 1000ms;
}

.activeDiv {
transform: scale(1);
width: 80%;
height: 80%;
box-shadow: 0px 0px 0px 10px rgba(255, 255, 255, 1), 1px 11px 15px 10px rgba(0, 0, 0, 0.4);
z-index: 100;
transition: transform 500ms;
}

.normailDiv {
transform: scale(0);
transition: transform 1000ms , opacity 400ms ;
}

这是更新的 Fiddle https://jsfiddle.net/rnu522qo/2/

关于javascript - CSS3 Transitions 缓和 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35099491/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com