前言
大二小白的第一篇博客;不定期分享在学习H5过程中自我感觉挺有意思的效果;
提示:以下是本篇文章正文内容。
一、动画(展示)
二、代码
代码如下(示例):
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
background: rgb(117, 117, 117);
}
.all{
overflow: hidden;
position: absolute;
height: 100%;
width: 100%;
}
#vvv{
height: 90px;
width: 90px;
background: rgb(34, 189, 255);
animation: myvvv 10s linear infinite;
cursor: pointer;
position: absolute;
}
@keyframes myvvv {
0%{left:0 ;top: 0;}
33%{left: 100%;top: 50%;}
66%{right: 100%;top: 100%;}
100%{left: 0;top: 0;}
}
</style>
</head>
<body>
<div class="all">
<div id="vvv"></div>
</div>
</body>
</html>
如果运用到其他网页的话,只要vvv运动的小区块就行了
总结
特别简单的一个小动画,好了没了