html5长按动画效果(HTML5自定义元素播放焦点图动画的实现)
类别:Web前端 浏览量:2369
时间:2021-10-06 01:01:07 html5长按动画效果
HTML5自定义元素播放焦点图动画的实现这是一款基于HTML5的焦点图动画,它和其他焦点图不同的地方在于,它播放的不仅仅是图片,而是可以自定义控制的网页元素。它不仅在图片间切换有过渡动画效果,而且在切换时图片中的元素也将出现动画效果,比如图中的文字移动、打散、重新组合等。这款HTML5动画图片播放器算得上是高端大气上档次。
HTML代码
<li class="parallax-bg" id="slider-wrap"> <li class="slider parallax-bg" id="slider"> <li class="slider-sections sandbox"> <section class="first"> <img alt="Kendo UI" src="images/home-banner-1.jpg" alt="html5长按动画效果(HTML5自定义元素播放焦点图动画的实现)" border="0" />
CSS代码:
这里列出的是这个焦点图相关的核心CSS代码。
.slider section {display: none;} .slider section.first {display: block;} .slider-sections, .slider-sections section {width: 861px; height: 335px;} .slider-sections {margin: 0 auto; position: relative;} .slider-sections section {position: absolute; top: 0; left: 0px; } .header-content h2 { font:400 32px/1.2 "microsoft yahei", Tahoma, arial, sans-serif; color: #fff; margin: 0 0 26px; } .header-content p { margin: 0 0 30px; } .header-content .centered-content { padding-top: 30px; padding-bottom: 10px; } .button { float: left; width: auto !important; list-style: none; } .button a, .button button, .button input { /* Standard black button */ font-size: 15px; /*font-family: 'lucida sans',arial,helvetica,sans-serif;*/ line-height: 18px; color: #fff !important; text-decoration: none; padding: 5px 14px 6px 13px; display: block; width: auto; position: relative; z-index: 2; border: none; -moz-border-radius: 3px; border-radius: 3px; cursor: pointer; background: #313131; /* Old browsers */ background: -moz-linear-gradient(top, #313131 0%, #222222 100%); /* FF3.6+ */ background: -webkit-linear-gradient(top, #313131 0%,#222222 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #313131 0%,#222222 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #313131 0%,#222222 100%); /* IE10+ */ background: linear-gradient(top, #313131 0%,#222222 100%); /* W3C */ -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .button a:hover, .button input:hover, .button button:hover, .button a:focus, .button input:focus, .button button:focus { background: #464646; /* Old browsers */ background: -moz-linear-gradient(top, #464646 0%, #393939 100%); /* FF3.6+ */ background: -webkit-linear-gradient(top, #464646 0%,#393939 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #464646 0%,#393939 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #464646 0%,#393939 100%); /* IE10+ */ background: linear-gradient(top, #464646 0%,#393939 100%); /* W3C */ } header .header-content .button a, #content .button a:hover { text-decoration: none; } .header-content .beta-ribbons { position: absolute; height: 120px; width: 85px; text-indent: -200px; overflow: hidden; background: url(../images/kendo-ribbons.jpg" alt="html5长按动画效果(HTML5自定义元素播放焦点图动画的实现)" border="0" />
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- html5div怎样居中(HTML5+CSS设置浮动却没有动反而在中间且错行的问题)
- html5 video标签
- html5自动静音(html5录音功能实战示例)
- html5按钮点击跳转(HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题)
- html5定位教学(Html5 webview元素定位工具的实现)
- html5新的表单元素新的特性(HTML5表单验证特性知识点小结)
- html5页面布局框架(html5移动端自适应布局的实现)
- vue加载html5动画(vue实现旋转木马动画)
- html5标签图片(HTML5图片层叠的实现示例)
- html5入门布局(吃透移动端 Html5 响应式布局)
- html5创作(HTML5录音实践总结Preact)
- html5的优点是什么
- 用html5的canvas绘制剪裁图像(Html5 canvas画图白板踩坑)
- html5怎么修改背景颜色(HTML5 body设置全屏背景图片的示例代码)
- html5基础知识入门(萌新HTML5 入门指南二)
- Html5新增的标签
- 网友很惭愧,自己写了很多年的字,到头来还不如一名小学生写的好(自己写了很多年的字)
- 中华第一楷 张瑞龄 86岁高龄,苦练楷书71年,一幅字卖593万(中华第一楷张瑞龄)
- 冯骥才 年意(冯骥才年意)
- ()
- 百事大吉蓝底 绿底手机高清壁纸(绿底手机高清壁纸)
- 蓝底证件照怎么制作 证件照换底色 换尺寸快速搞定(蓝底证件照怎么制作)
热门推荐
- css继承属性有哪些(CSS特殊性、继承与层叠)
- h1标签的作用
- vue自定义组件定义事件(基于Vue实现自定义组件的方式引入图标)
- 阿里云ecs安全设置(阿里云通过安全组实现不同账号下相同地域ECS内网互通)
- nodejs启动web服务器(使用NODE.JS创建一个WEBSERVER服务器的步骤)
- thinkphp5开发教程(thinkPHP5框架接口写法简单示例)
- springboot怎么设置docker(Docker如何给Springboot项目动态传参的实现方法)
- 织梦首页如何设置指定栏目(详解织梦模板DEDECMS搜索结果调用自定义字段的方法)
- php 处理html表单(PHP使用HTML5 FormData对象提交表单操作示例)
- vue2.0自定义指令(vue2实现provide inject传递响应式)