CSS3-7.5-飞机滑翔动画实现

最新推荐文章于 2023-02-27 18:43:47 发布

anh_qwh

最新推荐文章于 2023-02-27 18:43:47 发布

阅读量504

点赞数 1

分类专栏： WEB前端 CSS 文章标签： css3飞机滑翔动画

本文链接：https://blog.csdn.net/QWH_PYTHON/article/details/100975044

版权

WEB前端同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

CSS

19 篇文章 0 订阅

订阅专栏

CSS3-7.5-飞机滑翔动画实现

飞机滑翔动画实现

飞机滑翔动画实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>飞机滑翔</title>
	<style type="text/css">
		img{
			animation:plane 6s ease infinite;
			position: absolute;
		}	
		@keyframes plane{
			0%{
				top:0px;
				left: 0px;
			}
			50%{
				top: 35%;
				left: 78%;
				transform:rotateY(180deg);
			
			}
			100%{
				top: 80%;
				left: 5px;
				transform:rotateY(180deg);
			}
		}
	</style>
</head>
<body background="./background.jpg">
	<div>
		<img src="./plane.png" width="20%">
	</div>
</body>
</html>

效果动态图
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

anh_qwh

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
CSS3-7.5-飞机滑翔动画实现

CSS3-7.5-飞机滑翔动画实现飞机滑翔动画实现飞机滑翔动画实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>飞机滑翔</title> <style type="text/css"> img{ ani...
复制链接

扫一扫