html实现类似app的欢迎页,css3动画代替js脚本实现欢迎页面动画
1.使用脚本操作dom元素
在页面加载时,使用js控制dom的animationsetTimeout(function() {
$('.welcome').fadeOut(1000)
}, 5000)
setTimeout(function() {
$('.painted-scroll').css({ 'display': 'block'
})
$('.painted-scroll').find('span').animate({ 'left': '820px'
})
}, 5000)
setTimeout(function() {
$('.painted-scroll').fadeOut(1000)
}, 13000)
2.使用css3的animation实现
两个动画通过动画延时属性,实现连续加载/*小鱼*/
.welcome { background: rgba(255, 255, 255, 1); -webkit-animation: welcomeAnimation 5s linear; -moz-animation: welcomeAnimation 5s linear; -o-animation: welcomeAnimation 5s linear; -ms-animation: welcomeAnimation 5s linear; animation: welcomeAnimation 5s linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
@keyframes welcomeAnimation {
0% { opacity: 1; visibility: visible; -webkit-animation-timing-function: ease-in;
}
50% { opacity: 1; visibility: visible; -webkit-animation-timing-function: ease-in;
}
98% { opacity: 1; visibility: visible; -webkit-animation-timing-function: ease-in;
}
100% { opacity: 0; visibility: hidden; -webkit-animation-timing-function: ease-in;
}
} /*画轴*/
span { position: absolute; left: 80px; top: -13px; display: block; width: 800px; height: 540px; background: #ebe5d9 url('../img/scroll-right.jpg') no-repeat center left; -webkit-animation: imageAnimation 5s linear 6s; -moz-animation: imageAnimation 5s linear 6s; -o-animation: imageAnimation 5s linear 6s; -ms-animation: imageAnimation 5s linear 6s; animation: imageAnimation 5s linear 6s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
@keyframes imageAnimation {
0% { left: 80px; -webkit-animation-timing-function: ease-in-out;
}
50% { left: 410px; -webkit-animation-timing-function: ease-in-out;
}
100% { left: 820px; -webkit-animation-timing-function: ease-in-out;
}
}
20180809_111016 (1).gif
gif转换有点问题,效果不是很柔和
3.比较
两者都能实现类似效果,但是在css3动画中可以实现跟多的细节,通过transition-timing-function是不是可以做跟多的改变呢,现在流行的趋势中,mvvm的思想都是尽量不用dom操作,所以说将来的css3动画会右更多的发展空间
在现在流行的js库中,实现动画更多的使用的是css3的animation实现,还有浏览器对css3的支持度越来越高,在对比中提现css3将来的地位还是举足轻重的,3.1swiper
image.png3.2 bootstrap
image.png
作者:天天_哥
链接:https://www.jianshu.com/p/e66a06255e72
html实现类似app的欢迎页,css3动画代替js脚本实现欢迎页面动画相关推荐
- 功能引导 android,Flutter实现App功能引导页
App功能介绍页,主要是由介绍app功能的几张图片和当前页指示符组成,如下效果 我们来一步一步实现上面的界面,左右滑动切换显示功能页,这个可以通过PageView来实现,底部的指示符半透明覆盖在Pag ...
- HBuilder开发App教程06-首页
实战 前面几节基本是一些概念的普及, 正如前面提到的,本教程会以滴石作为范例进行讲解, 有兴趣的可以先行下载体验一下,或者下载源码研究下. 新建项目 打开HBuilder,在项目管理器中右键--新建- ...
- Flutter实现App功能引导页
Flutter实现App功能介绍页 App功能介绍页,主要是由介绍app功能的几张图片和当前页指示符组成,如下效果 我们来一步一步实现上面的界面,左右滑动切换显示功能页,这个可以通过PageView来 ...
- APP界面引导页设计注意事项
海淘科技与你分享<APP界面引导页设计注意事项> 一.什么内容需要引导 1. 产品特色 展示产品的核心竞争力及最有特色的点,让用户清晰地了解该产品和同类产品相比最突出的优势,有一个良好的第 ...
- Progressive Web App是一个利用现代浏览器的能力来达到类似APP的用户体验的技术——不就是chrome OS吗?...
什么是Progressive Web App? Progressive Web App是一个利用现代浏览器的能力来达到类似APP的用户体验的技术,由Google实现,让浏览器打开的网址像APP一样运行 ...
- APP启动引导页的制作,用ViewPager实现翻页动画
#Android网络与数据存储 第一章学习 ####一个启动引导页的制作#### 概要: 这次制作App的引导页,主要用到2个知识"SharedPreferences 和 ViewPager ...
- 使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等)
使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等) 传送门 转载于:https://www.cnblogs.com/momozjm/p/9389912.html
- 动漫App下载单页界面HTML源码带弹幕
简介: 带弹幕功能的动漫app下载单页源码非常好看二次元界面,很适合那些做二次元动漫网站或者做博客网站的app下载界面非常的好看实用,最主要的就是简洁. 解压上传即可! 二维码修改路径.images/ ...
- 电商APP商品详情页设计套路(分层PSD模板)!透析UI/UE必须懂的营销设计思维!
电商APP重点在于商品详情页,打造一个优秀的商品详情页,完全能够提高转化率! UI设计.交互体验.文案撰写.产品的商业模式来聊一聊电商app商品详情页是怎么"套路" 设计app商品 ...
最新文章
- JAVA-基础(Class对象及反射)
- 常用的Linux服务器各项性能指标查看方法!
- Apache Shiro 框架简介和下载导入
- 直接进入ORACLE12C插件数据库
- Kaggle Titanic补充篇
- 深入一致性哈希(Consistent Hashing)算法原理
- ssl2342-打击犯罪【并查集】
- 使用Spring MVC时的常见错误
- 智能音箱音效哪个好_华为支浩:音质好是底线,AI基本功扎实让智能音箱不再是“玩具”...
- python线性回归x可以数量不一样吗_R和Python中的线性回归 - 在同一问题上的结果不同...
- 分布式——ACID原则 CAP理论
- 《上海堡垒》改编电影发布 QQ阅读披露作者江南心声
- 怎样获取php页面get的值,PHP循环获取GET和POST值的代码
- U盘插入电脑无反应,坏了?不存在的
- 【转】【深度学习MobileNet】——深刻解读MobileNet网络结构
- 好书推荐_Windows程序设计(第五版)
- 关于软件测试的英语面试题,软件测试工程师英语面试题
- Android 11 状态栏电池图标的定制
- 【实例】VBA excel 隔行插入行与列
- 饥荒thegreywolf_infinite stars