<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='zh-CN' xml:lang='zh-CN' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OSChina公司发展历程大事记时间轴</title>
<link rel="stylesheet" type="text/css" href="css/reset_y.css">
<style>
body {
font-family: 微软雅黑, Verdana, sans-serif, 宋体;
color: #fff;
background: #fff;
background-size: 110% 110%;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-ms-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
transition: all 1s ease-in;
_background:#fff url(images/bg01.jpg) no-repeat;
_background-attachment:fixed;
}
body.impress-not-supported {
line-height: 200%;
font-size: 18px;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
color: inherit;
text-decoration: none;
padding: 0 0.1em;
text-shadow: 1px 1px 5px rgba(100, 100, 100, 0.5);
border-radius: 0.2em;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
a:hover, a:focus {
text-shadow: 1px 1px 5px rgba(100, 100, 100, 0.2);
}
.mt10 {
margin-top: 10px;
}
.opacity7 {
opacity: 0.7;
}
.opacity9 {
opacity: 0.9;
}
.rotate45 {
-webkit-transform: rotate(720deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transition: rotate(360deg);
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.step {
position: relative;
width: 900px;
padding: 40px;
margin: 20px auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
font-size: 48px;
line-height: 1.5;
cursor: pointer;
}
.impress-not-supported .step {
font-size: 18px
}
.impress-enabled .step {
margin: 0;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.impress-enabled .step.active {
opacity: 1;
}
/* header */
header {
background:transparent;
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr=#51ffffff, endColorstr=#51ffffff);
background-color: rgba(255, 255, 255, 0.2);
_background-color:#f3f3f3;
padding: 10px 0;
top: 0;
left: 0;
width:100%;
z-index: 100;
}
.top h1 {
width: 1000px;
margin: 0 auto;
font-size: 28px;
-webkit-transition: all 1s ease-in-out 0.5s;
-moz-transition: all 1s ease-in-out 0.5s;
-ms-transition: all 1s ease-in-out 0.5s;
-o-transition: all 1s ease-in-out 0.5s;
transition: all 1s ease-in-out 0.5s;
}
.top h1 a {
display: inline-block;
}
.top h1 img {
display: inline-block;
zoom: 1;
width: 160px;
height: 47px;
border-right: 1px solid rgba(255, 255, 255, .1);
margin-right: 10px;
padding-right: 10px;
}
.top h1 em {
vertical-align: top;
display: inline-block;
color: #40AA53;
line-height: 48px;
font-style: normal;
-webkit-transition: all 1s ease-in-out 0.5s;
-moz-transition: all 1s ease-in-out 0.5s;
-ms-transition: all 1s ease-in-out 0.5s;
-o-transition: all 1s ease-in-out 0.5s;
transition: all 1s ease-in-out 0.5s;
}
/* bg */
.impress-supported .bg {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index: -100;
background:#fff url(images/bg04.jpg) no-repeat;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
.impress-not-supported .bg {
background: #333;
position: fixed;
top: 0;
left: 0;
z-index: -100;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
_display: none;
}
.impress-not-supported .bg img {
height:1200px;
}
.impress-supported .bg img {
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
/* timeline */
.impress-supported .timeline {
position: absolute;
bottom: 20%;
left: 0;
width: 100%;
padding: 0 100px;
font-size: 18px;
-webkit-transition: all 1s ease-in-out 1.5s;
-moz-transition: all 1s ease-in-out 0.5s;
-ms-transition: all 1s ease-in-out 0.5s;
-o-transition: all 1s ease-in-out 0.5s;
transition: all 1s ease-in-out 0.5s;
}
.impress-not-supported .timeline {
margin-top: 30px;
}
.impress-supported .line_white {
height: 5px;
width: 100%;
background: rgba(255, 255, 255, .2);
position: absolute;
bottom: 50%;
left: 0;
z-index: -10;
}
/* timeList_item */
.impress-supported .timeList_item {
position:relative;
float: left;
}
.impress-not-supported .timeList_item {
background:transparent;
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr=#51000000, endColorstr=#51000000);
background: rgba(0, 0, 0, .2);
_filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000', GradientType=0 );
_background-color:#333;
padding: 30px;
border-radius: 10px;
}
.impress-supported .present {
margin-top: -20px;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
.impress-supported .circle {
margin-right: 100px;
width:64px;
height: 64px;
background-color: rgba(0, 0, 0, 0.9);
border-radius: 50%;
border: 5px solid rgba(255, 255, 255, 0.8);
font-size: 20px;
color: #fff;
text-align: center;
line-height: 64px;
cursor: pointer;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
.impress-supported .present .circle {
width:90px;
height: 90px;
background-color: rgba(235, 0, 0, 0.9);
line-height:90px;
font-size: 24px;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
border: none;
}
.impress-not-supported .circle {
font-size: 48px;
}
.impress-supported .timeList_item_title {
width: 150px;
position: absolute;
top: 158px;
left: -84px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
text-align: right;
font-size: 14px;
letter-spacing: 1px;
-webkit-transition: all 1s ease-in-out 0.5s;
-moz-transition: all 1s ease-in-out 0.5s;
-ms-transition: all 1s ease-in-out 0.5s;
-o-transition: all 1s ease-in-out 0.5s;
transition: all 1s ease-in-out 0.5s;
}
.impress-not-supported .timeList_item_title {
font-size: 24px;
line-height: 200%;
color: #ff9900;
font-size: 30px;
}
.impress-supported .present .timeList_item_title {
width: 500px;
top: -10px;
left: 280px;
line-height: 100%;
-webkit-transfo
某公司大事记特效-HTML5时间轴.rar
5星 · 超过95%的资源 需积分: 50 127 浏览量
2019-07-10
12:38:51
上传
评论
收藏 3.06MB RAR 举报 
html5_Timeline.rar （46个子文件） 
codesc.net OSChina公司发展历程大事记时间轴 
index.html 33KB images 
event9.jpg 57KB event16.jpg 58KB guangzhou.jpg 77KB event20.jpg 93KB event11.jpg 44KB zhuhai.jpg 70KB bg04.jpg 137KB event10.jpg 70KB
event5.png 245KB event14.jpg 57KB event8.jpg 53KB event6.png 99KB event17.jpg 57KB event1.jpg 17KB top.png 6KB chengdu.jpg 117KB event23.png 106KB bg02.jpg 136KB bg03.jpg 137KB beijing.jpg 125KB event13.jpg 42KB event24.jpg 69KB xian.jpg 105KB event2.jpg 59KB event19.jpg 96KB xiamen.jpg 115KB event21.jpg 59KB hangzhou.jpg 67KB refress.png 3KB
Thumbs.db 149KB event7.jpg 95KB shenzhen.jpg 119KB event22.jpg 67KB event18.png 37KB event12.jpg 70KB event20_2.jpg 62KB event4.jpg 83KB nanjing.jpg 58KB 160_os_logo.png 3KB event3.png 65KB event15.jpg 70KB bg01.jpg 138KB js jquery-1.8.3.min.js 91KB impress.js 33KB music css reset_y.css 772B
普通网友
- 粉丝: 484
- 资源: 1万+
最新资源
- Screenshot_20240427_031602.jpg
- 网页PDF_2024年04月26日 23-46-14_QQ浏览器网页保存_QQ浏览器转格式(6).docx
- 直接插入排序，冒泡排序，直接选择排序.zip
- 在排序2的基础上，再次对快排进行优化，其次增加快排非递归，归并排序，归并排序非递归版.zip
- 实现了7种排序算法.三种复杂度排序.三种nlogn复杂度排序（堆排序，归并排序，快速排序）一种线性复杂度的排序.zip
- 冒泡排序 直接选择排序 直接插入排序 随机快速排序 归并排序 堆排序.zip
- 课设-内部排序算法比较 包括冒泡排序、直接插入排序、简单选择排序、快速排序、希尔排序、归并排序和堆排序.zip
- Python排序算法.zip
- C语言实现直接插入排序、希尔排序、选择排序、冒泡排序、堆排序、快速排序、归并排序、计数排序，并带图详解.zip
- 常用工具集参考用于图像等数据处理
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论1