Html5+Css3 Banner Animation 多方位移动特效
背景:朋友问我小米官网的mi4的特效会做吗,可能新接的一个小网站需要用到。一直有打算研究H5C3的一些效果,趁此机会,赶紧学习一下!
效果:如图 素材
HTML:
<div class="banner">
<div class="fea one ">
<div class="fea1 left-to-right"></div>
</div>
<div class="fea two hide">
<div class="fea2 top-to-bottom"></div>
</div>
<div class="fea three hide">
<div class="fea3 bottom-to-top"></div>
</div>
<div class="fea four hide">
<div class="fea4 right-to-left"></div>
</div>
<div class="btnwrap"><b class="cur"></b><b></b><b></b><b></b></div>
</div>
STYLE:
<style type="text/css">
@keyframes fea1{ 0% { left:-600px; } 100% { left:0; } }
@-webkit-keyframes fea1{ 0% { left:-600px; } 100% { left:0; } }
@-moz-keyframes fea1{ 0% { left:-600px; } 100% { left:0; } }
@-o-keyframes fea1{ 0% { left:-600px; } 100% { left:0; } }
.left-to-right{
animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea1;
-webkit-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea1;
-moz-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea1;
-o-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea1;
}
@keyframes fea2{ 0% { top:-600px; } 100% { top:-40px; } }
@-webkit-keyframes fea2{ 0% { top:-600px; } 100% { top:-40px; } }
@-moz-keyframes fea2{ 0% { top:-600px; } 100% { top:-40px; } }
@-o-keyframes fea2{ 0% { top:-600px; } 100% { top:-40px; } }
.top-to-bottom{
animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea2;
-webkit-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea2;
-moz-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea2;
-o-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea2;
}
@keyframes fea3{ 0% { bottom:-200px; } 100% { bottom:70px; } }
@-webkit-keyframes fea3{ 0% { bottom:-200px; } 100% { bottom:70px; } }
@-moz-keyframes fea3{ 0% { bottom:-200px; } 100% { bottom:70px; } }
@-o-keyframes fea3{ 0% { bottom:-200px; } 100% { bottom:70px; } }
.bottom-to-top{
animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea3;
-webkit-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea3;
-moz-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea3;
-o-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea3;
}
@keyframes fea4{ 0% { left:1400px; } 100% { left:100px; } }
@-webkit-keyframes fea4{ 0% { left:1400px; } 100% { left:100px; } }
@-moz-keyframes fea4{ 0% { left:1400px; } 100% { left:100px; } }
@-o-keyframes fea4{ 0% { left:1400px; } 100% { left:100px; } }
.right-to-left{
animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea4;
-webkit-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea4;
-moz-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea4;
-o-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea4;
}
*{ margin:0; padding:0; }
.banner{ width:800px; margin:0 auto; overflow:hidden; }
.fea { width:800px; height:320px; position:relative; }
.fea.hide { display:none; }
.one{ background:#099999; }
.fea1{ width:600px; height:231px; background:url(images/fea-1.png) center center; z-index:1; position:absolute; bottom:0; }
.two{ background:#ff8400; }
.fea2{ width:600px; height:339px; background:url(images/fea-2.png) center center; z-index:1; position:absolute; top:-40px; left:100px; }
.three{ background:#f10000; }
.fea3{ width:300px; height:172px; background:url(images/fea-3.png) center center; z-index:1; position:absolute; left:250px; bottom:70px; }
.four{ background:#f9f9f9; }
.fea4{ width:600px; height:249px; background:url(images/fea-4.png) center center; z-index:1; position:absolute; left:100px; top:40px; }
.btnwrap{ z-index:40; position:absolute; top:280px; margin-left:320px; }
.btnwrap b{ display:inline-block; background:#cccccc; width:30px; height:14px; cursor:pointer; margin:10px; }
.btnwrap b.cur{ background:#62CFEE; }
</style>
JAVASCRIPT:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var bannerwrap = function(o){
$(".btnwrap b").removeClass("cur");
$(".btnwrap b:eq("+o+")").addClass("cur");
$(".banner .fea").hide();
$(".banner .fea:eq("+o+")").fadeIn(800);
}
var i=0;
$(".btnwrap b").click(function(){
i=$(this).index();
bannerwrap(i);
});
var sid = setInterval(function(){ i++; if(i==4) i=0; bannerwrap(i); },4000);
$(".banner").hover(function(){
clearInterval(sid);
},function(){
sid = setInterval(function(){ i++; if(i==4) i=0; bannerwrap(i); },4000);
});
});
</script>
总结:Html5、Css3在近几年使用已经非常广泛了,特别在移动端,应用场景层出不穷,抓紧学习一下,不要凹凸曼啦!
Html5+Css3 Banner Animation 多方位移动特效的更多相关文章
- HTML5/CSS3(PrefixFree.js) 3D文字特效
之前在园子里看到一个HTML5/CSS3的文字特效(这里),觉得挺好玩的所以小小的研究了下,不过发现代码都是针对webkit以及FF的所以IE跪了. Runjs 我将示例中的代码进行了精简,后来发现C ...
- html5/CSS3鼠标滑过图片特效插件
在线演示 本地下载
- 基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效
本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: < ...
- 10款基于HTML5+CSS3实现的超酷源码动画
1.基于Bootstrap的jQuery登录表单 这是一款基于Bootstrap的登录表单,表单的外观自然不用说,沿用了Bootstrap的风格,非常漂亮.这款登录表单有一个经过CSS3处理过的头像图 ...
- html5和css3实现的3D滚动特效
今天给大家带来一款html5和css3实现的3D滚动特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="container"&g ...
- 9款超绚丽的HTML5/CSS3应用和动画特效
1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形 ...
- HTML5+CSS3鼠标悬停图片特效
点击预览效果 下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...
- 9款赏心悦目的HTML5/CSS3应用特效
经过几天的收集,在html5tricks网站上又增加了不少HTML5的教程和应用,今天我把几款赏心悦目的HTML5/CSS3应用特效总结了一下,一共9款HTML5特效,分享给大家. 1.HTML5 W ...
- 12种炫酷HTML5 SVG和CSS3表单浮动标签特效
这是一组效果非常炫酷的HTML5 SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,使用SVG和CSS3来制作完成.这些浮动标签效果部分在元素的伪元素上使用CSS transitions ...
随机推荐
- 利用AssetsManager实现在线更新脚本文件lua、js、图片等资源(免去平台审核周期)
转自:http://www.himigame.com/iphone-cocos2dx/1354.html 首先说明一个问题: 为什么要在线更新资源和脚本文件!? 对于此问题,那要说的太多了,简单概括, ...
- PHP+MySQL多语句执行<转自wooyun>
发起这个帖子,估计就很多人看到题目就表示不屑了.一直以来PHP+MySQL环境下,无论是写程序或者是注入攻击,是无法多语句执行的,这么广为人知的常识,没理由会有人不知道.可权威就是用来被挑战的,常识也 ...
- oracle批量导出AWR报告
工作需求:项目中需要把生产库中所有的AWR报告dump出来,然后导入到方便测试的数据库中.在测试库中的AWR报告需要根据dbid和实例名逐个导出,如果遇到很多再加上RAC系统,会很麻烦.在网上找了一些 ...
- C# 手动读写app config 的源码
public class ConfigOperator { public string strFileName; public string configName; public string con ...
- DB9 公头母头引脚定义及连接
1.实物及引脚简单介绍 在做开发的时候常常会用到串行接口,一般9针的串行接口居多.例如以下图所看到的: 公头母头用于连接线的採用上图封装.但用于开发板的时候採用90度弯角插针的封装.例如以下图: 各引 ...
- hdu 4099 Revenge of Fibonacci 字典树+大数
将斐波那契的前100000个,每个的前40位都插入到字典树里(其他位数删掉),然后直接查询字典树就行. 此题坑点在于 1.字典树的深度不能太大,事实上,超过40在hdu就会MLE…… 2.若大数加法时 ...
- Spark wordcount 编译错误 -- reduceByKey is not a member of RDD
Attempting to run http://spark.apache.org/docs/latest/quick-start.html#a-standalone-app-in-scala fro ...
- oracle 基本操作
1. 开启oralce和监听#su - oracle$sqlplus / as sysdba>startup>exit$lsnrctl start$ps -ef|grep oracle 一 ...
- C#综合揭秘——Entity Framework 并发处理详解
引言 在软件开发过程中,并发控制是确保及时纠正由并发操作导致的错误的一种机制.从 ADO.NET 到 LINQ to SQL 再到如今的 ADO.NET Entity Framework,.NET 都 ...
- C#_ajax fileupload
@{ ViewBag.Title = "Index"; Layout = null; } <h2>Index</h2> <script src=&qu ...