老师帮忙看下这样可以吗

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

*{

padding: 0;

margin: 0;

}

div{

width: 500px;

height: 889px;

margin: 0 auto;

}

img{

width: 500px;

height: 889px;

animation: xx 0.5s ease-in 0s infinite;

}

@keyframes xx{

0%{

opacity: 1;

transform: scale(.7);

}

50%{

opacity: 0.5;

transform: scale(1.2);

}

100%{

opacity: 0.2;

transform: scale(1.5);

}

}

</style>

</head>

<body>

<div>

<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1330519883,1019257917&fm=26&gp=0.jpg"/>

</div>

</body>

</html>

lcy_18 2021-03-06

源自：过渡与动画 2-21 自由编程

8

收起

1回答

好帮手慕星星回答被采纳获得+3积分 2021-03-06 15:37:28

同学你好，这样实现心动效果可以。

优化：建议使用练习中提供的素材图片，并且两个叠加在一起进行动画设置

可以再修改下。

祝学习愉快！

lcy_18 提问者 #1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box1,.box2{
width: 88px;
height: 81px;
margin: 100px auto;
background-image: url(img/xin.png);
}
.box1{
position: relative;
}
.box2{
position: absolute;
top: -100px;
left: 0;
animation: xin 1s linear infinite 0s;
}
@keyframes xin{
0%{
opacity: 1;
}
50%{
opacity: 0.5;
transform: scale(1.5);
}
100%{
opacity: 0;
transform: scale(2);
}
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>

2021-03-07 18:33:02
好帮手慕慕子回复提问者 lcy_18 #2

同学你好，代码实现是正确的，继续加油，祝学习愉快~

2021-03-07 18:42:28

相似问题

老师帮忙看一下

老师可以帮我看看这道题吗？谢谢老师

老师您帮忙看一下

老师帮忙看一下

老师，这样可以吗有个问题

登录后可查看更多问答，登录/注册

前端工程师2020

参与学习人
提交作业 7880 份
解答问题 15282 个

前端技术快速更迭，人才紧缺。带你从0基础开始，成为Web全栈工程师，转行就业更顺畅。

本课精华内容

问答作业

老师，我在xhr.send()出错了

93 2

老师好，这里虽然老师给了方法，但我想问问关于定位后的宽高

44 2

函数里面的参数是函数,那么里面作为参数的函数是如何调用的?

74 4

老师请检查

30 1

老师，关于ctx.set()我存在困惑

32 1

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载