html写挂在网页上的会动的卡通
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>会动的卡通</title>
<style type="text/css">
body{
background-color: #f5f5f5;
}
.cartoon{
position: relative;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-image: url('https://i.loli.net/2021/05/27/mhYKUQp8iR5f1W3.png');
background-size: cover;
animation: move 2s linear infinite;
}
@keyframes move{
0%{
left: 100px;
}
50%{
left: 400px;
transform: scaleX(-1);
}
100%{
left: 100px;
transform: scaleX(1);
}
}
</style>
</head>
<body>
<div class="cartoon"></div>
</body>
</html>
<p>说明：这是一个简单的HTML代码，通过使用CSS的动画效果让卡通人物在页面上来回移动。其中，使用了background-image属性来设置卡通人物的背景图像，使用animation属性来设置动画效果，通过@keyframes关键字定义动画的关键帧，实现卡通人物左右移动的效果</p>
原文地址: https://www.cveoy.top/t/topic/fhol 著作权归作者所有。请勿转载和采集!