Css3飞机动画特效

一、预览效果

二、全部代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{margin: 0;padding: 0;line-height: 1;}html,body{width: 100%;height: 100%;}.box{overflow: hidden;width: 100%;height: 100%;display: flex;position: relative;align-items: flex-end;background: linear-gradient(to bottom, #8ec7c8 0%,#ffffff 100%);}.ground{height: 130px;background: green;width: 100%;border-top: 5px solid #550000;}.planes{position: absolute;top: 300px;left: 300px;z-index: 100;width: 250px;animation: planeFei ease-in-out 2s infinite;}.planes>img{width: 100%;}.planes>div{width: 200px;height: 8px;margin-left: 30px;background: #550000;animation: routes ease-in-out 0.5s infinite;}@keyframes routes{0%{transform: rotateY(0deg);}50%{transform: rotateY(180deg);}100%{transform: rotateY(0deg);}}@keyframes planeFei{0%{top: 300px;}50%{top:250px;}100%{top: 300px;}}.cloud{position: absolute;top:100px;right: -130px;z-index: 600;width: 130px;}.cloundOne{animation: cloudAni linear 3s infinite;}.cloudTwo{top: 300px !important;animation: opctiAni linear 3s infinite;animation-delay: 0.5s;}@keyframes opctiAni{0%{right: -130px;}73%{opacity: 1;}74%{opacity: 0.2;}80%{opacity: 1;}100%{right: 100%;}  }@keyframes cloudAni{0%{right: -130px;}100%{right: 100%;}}.cloud>div{width: 75px;height: 75px;position: absolute;top:0;border-radius: 50%;background-color: #fff;}.cloud>div:not(:first-child){top: 40px;}.cloud>div:nth-of-type(1){left: 50%;transform: translateX(-50%);}.cloud>div:nth-of-type(2){left: 0;}.cloud>div:nth-of-type(3){right: 0;}</style></head><body><div class="box"><div class="planes"><div></div><img src="./img/plane.png" /></div><div class="cloud cloundOne"><div></div><div></div><div></div></div><div class="cloud cloudTwo"><div></div><div></div><div></div></div><div class="ground"></div></div></body>
</html>

三、飞机素材

Css3飞机动画特效相关推荐

css3的动画特效--元素旋转（transition，animation）
css3的动画特效--元素旋转(transition,animation) 开发中,视觉要你实现一个元素的旋转问题,比如说如下图所示: 思路:首先动画动效肯定离不开anmimation动画. 和tra ...
CSS3: 常用动画特效及4个最流行的动画库
一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...
8种CSS3按钮动画特效【附源码】
这8款CSS3按钮动画特效.在该特效中,提供了8种按钮动画效果.每种动画在鼠标悬停到按钮上面的时候,都会触发按钮动画. 动画效果截图: 使用方法 HTML结构最简单的按钮HTML结构如下. < ...
css3波浪动画特效
css3波浪动画特效可根据需求添加修改波浪线和背景颜色全部代码如下 <!doctype html> <html> <head> <meta charset ...
html5语音闹钟代码,HTML5+CSS3闹钟动画特效源码
效果图各位朋友大家好,今天给大家带来的是 <HTML5+CSS3闹钟动画特效源码> 可以添加在网站里面作为一个炫酷的小装饰代码过长需要文档版源码来我的前端群581549454,已上传到 ...
纸飞机html,Flyaway.css-炫酷纯CSS3纸飞机动画特效
Flyaway.css是一款使用纯CSS3制作的炫酷纸飞机动画特效.Flyout模式可以应用于登录页面,信息发送成功,如果填的信息有误,可以使用Shake模式,代表信息输入有误. Flyaway.cs ...
css3 html5动画特效
转载自:http://www.html5tricks.com/8-html5-pure-css3-animation.html 8个超震撼的HTML5和纯CSS3动画源码 150 人浏览发表回复 H ...
css3的动画特效--动画序列（animation）
首先复习一下animation动画添加各种参数 (1)infinite参数,表示动画将无限循环.在速度曲线和播放次数之间还可以插入一个时间参数,用以设置动画延迟的时间.如希望使图标在1秒钟后再开始旋转 ...
html js css倒计时,js+css3倒计时动画特效
js代码 const nums = document.querySelectorAll('.nums span'); const counter = document.querySelector('. ...

Css3飞机动画特效

一、预览效果

二、全部代码

三、飞机素材

Css3飞机动画特效相关推荐

最新文章

热门文章