gpt4 book ai didi

jquery - 如何像谷歌表单一样将背景颜色中心向右和向左设置动画?

转载 作者:行者123 更新时间:2023-12-01 02:00:05 25 4
gpt4 key购买 nike

我真的缺乏CSS动画。我尝试像谷歌表单一样在div上创建动画效果。

image gif google form effect

if above link not work (like in my pc now), you can see it here https://ibb.co/cYsYKb

我试试transition: all 1s ease; background: linear-gradient(to right, #673ab7);但不起作用。

这是我的 fiddle :https://jsfiddle.net/hL8mncqa/

我尝试在谷歌中找到它,但仍然无法解决我的问题,因为我不知道用什么关键字来找到它。

如何做到这一点?欢迎任何建议。

最佳答案

您可以使用 CSS3 动画

$(function(){
$('body').on('focus', 'textarea', function(){
$(this).next().addClass('active');
});

$('body').on('focusout', 'textarea', function(){
$(this).next().removeClass('active');
});
});
body {
background: #fff;
}
.container {
position: relative; /* needs to be set since the child has position absolute */
}
textarea {
width: 100%;
border: 0;
outline: 0;
}
.txt-underline {
background: rgba(0,0,0,0.12);
height: 1px;
/* to grow from center: */
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.txt-underline.active {
background: #673ab7;
height: 2px;
animation-name: underline; /* "calling" the animation */
animation-duration: .3s; /* adjust to your needs */
animation-timing-function: ease; /* also experiment with other values */
animation-fill-mode: forwards; /* retains 100% width when it gets there */
}
@keyframes underline { /* lets call it the "underline" */
0% {width:0} /* start width */
100% {width:100%} /* end width */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
<textarea>asddas dasdasdas asdas</textarea>
<div class="txt-underline"></div>
</div>

关于jquery - 如何像谷歌表单一样将背景颜色中心向右和向左设置动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47653940/

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