第一模块
课程信息
课程名称：前端工程师
课程章节：动画效果实战2
课程讲师：未知
第二模块
课程内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画效果实战课2</title>
<style>
.huojian{
position: absolute;
top: 300px;
left: 300px;
animation: zd .4s linear 0s infinite alternate;
}
@keyframes zd{
form{
transform: translateX(-20px) translateY(-20px);
}
to{
transform: translateX(20px) translateY(20px);
}
}
.line1{
width: 2px;
height: 166px;
background-color: rgb(70, 159, 247);
position: absolute;
top: 300px;
left: 310px;
transform: rotate(45deg);
animation: yd 1s linear 0s infinite;
opacity: 0;
}
.line2{
width: 2px;
height: 206px;
background-color: rgb(70, 159, 247);
position: absolute;
top: 340px;
left: 360px;
transform: rotate(45deg);
animation: yd 1s linear .4s infinite;
opacity: 0;
}
.line3{
width: 2px;
height: 166px;
background-color: rgb(70, 159, 247);
position: absolute;
top: 340px;
left: 430px;
transform: rotate(45deg);
animation: yd 1s linear .68s infinite;
opacity: 0;
}
.line4{
width: 2px;
height: 166px;
background-color: rgb(70, 159, 247);
position: absolute;
top: 360px;
left: 500px;
transform: rotate(45deg);
animation: yd 1s linear .2s infinite;
opacity: 0;
}
@keyframes yd{
0%{
transform:rotate(45deg) translateY(-200px);
opacity: 0;
}
50%{
opacity: 1;
}
100%{
transform:rotate(45deg) translateY(200px);
opacity: 0;
}
}
</style>
</head>
<body>
<img class="huojian" src="images/huojian.png" alt="">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
</body>
</html>第三模块
学习收获与心得：
关于踏实，今天才算是有了比较深刻的理解。不是嘴上说自己踏实能干，不盲目着急， 不做一点把握都没有但是对自己影响很大的事情， 不要想着什么事情赌一把也许会有好的结果。于是我决定自己的实习如果有机会就要延长， 不要匆匆结束，而且不止要延长，要再接下来的工作中有所得， 有所建树，有所收获，有所贡献
第四模块
学习完毕截图打卡：
随时随地看视频
