我有一个背景(云),我想对其进行水平动画处理。如果我从最左边的位置开始动画,那么动画是平滑的,但是如果我从中间位置开始动画,则动画会突然变化。
我知道它为什么会这样,但是却不知道如何使其平滑。
从中间开始时突然出现:
<div class="trt-clouds-1"></div>
public function changepassword()
{
return view('admin.changepassword');
}
public function chkPassword(Request $request){
$data = $request->all();
$adminCount = Admin::where(['username' => Session::get('adminSession'),'password'=>md5($data['current_pwd'])])->count();
if ($adminCount == 1) {
echo "true"; die;
} else {
echo "false"; die;
}
}
public function updatePassword(Request $request){
if($request->isMethod('post')){
$data = $request->all();
$adminCount = Admin::where(['username' => Session::get('adminSession'),'password'=>md5($data['current_pwd'])])->count();
if ($adminCount == 1) {
$password = md5($data['new_pwd']);
Admin::where('username',Session::get('adminSession'))->update(['password'=>$password]);
return redirect('/admin/settings')->with('flash_message_success', 'Password updated successfully.');
}else{
return redirect('/admin/settings')->with('flash_message_error', 'Current Password entered is incorrect.');
}
}
}
理想情况下,它应该从中心开始,然后到达最右边的点,然后从最左边的点出来,并继续到达中心。
答案 0 :(得分:2)
根据您对“平滑”的定义(即向右走而向左走),您可以添加其他断点。只需确保正确设置百分比计时,以使其在到达右边缘之前和之后均以相同的速度行驶。
如果您使左右边缘之间的跳跃足够快,则它应该显示得很平滑。
body, html {
overflow: hidden;
}
.trt-clouds-1 {
width: 100vw;
height: 200px;
background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
background-repeat: no-repeat;
background-size: 10vw;
animation: animatedBackground 4s linear infinite;
}
@keyframes animatedBackground {
0% {
background-position: 30vw 0;
}
63.6% {
background-position: 100vw 0;
}
63.6000001% {
background-position: -10vw 0;
}
100% {
background-position: 30vw 0;
}
}
<div class="trt-clouds-1"></div>
(动画的总行驶速度为110vw:向右移动70,向后移动40。为使其顺畅,动画花费了其中的7/11(63.6%)的速度,其余时间回来了,因此时间。)
第二种更优雅的选择是使用带有负起始值的animation-delay属性。 (这并非从30vw开始,但是您明白了。)
html, body {
overflow: hidden;
}
.trt-clouds-1 {
width: 100vw;
height: 200px;
background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
background-repeat: no-repeat;
background-size: 10vw;
animation: animatedBackground 4s linear infinite;
animation-delay: -2s;
}
@keyframes animatedBackground {
0% {
background-position: -10vw 0;
}
100% {
background-position: 100vw 0;
}
}
<div class="trt-clouds-1"></div>
答案 1 :(得分:0)
html, body {
overflow: hidden;
}
.trt-clouds-1 {
width: 100vw;
height: 200px;
background-position: 0 0; /* or you can add -10vw 0 for more flexible view on start of load*/
background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
background-repeat: no-repeat;
background-size: 10vw;
animation: animatedBackground 4s linear infinite;
animation-delay: 0;
}
@keyframes animatedBackground {
0% {
background-position:-10vw 0;
}
100% {
background-position: 100vw 0;
}
}
<div class="trt-clouds-1"></div>
您唯一需要做的就是在CSS中添加背景位置
答案 2 :(得分:0)
另一个技巧是依靠一定百分比并优化动画,如下所示。
.trt-clouds-1 {
height: 200px;
background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
background-repeat: no-repeat;
background-size: calc(200% + 10vw) 10vw;
animation: animatedBackground 4s -2s linear infinite;
}
@keyframes animatedBackground {
from {
background-position:top right;
}
}
<div class="trt-clouds-1"></div>
即使在非全宽div上也可以使用,因为我们不再依赖动画中的vw
单元了:
.trt-clouds-1 {
height: 200px;
width:200px;
border:1px solid;
background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
background-repeat: no-repeat;
background-size: calc(200% + 50px) 50px;
animation: animatedBackground 4s -2s linear infinite;
}
@keyframes animatedBackground {
from {
background-position:top right;
}
}
<div class="trt-clouds-1"></div>
相关问题以获取有关计算的更多详细信息:Using percentage values with background-position on a linear gradient
您还可以考虑使用伪元素和翻译来提高性能:
.trt-clouds-1 {
height: 200px;
position:relative;
overflow:hidden;
}
.trt-clouds-1:before {
content:"";
position:absolute;
top:0;
left:0;
width:calc(200% + 10vw);
height:10vw;
background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
background-repeat: no-repeat;
background-size: auto 100%;
background-position:center;
animation: animatedBackground 4s -2s linear infinite;
}
@keyframes animatedBackground {
from {
transform:translate(-50%);
}
}
<div class="trt-clouds-1"></div>