html5 计步器,HTML5 苹果手表户外运动计步器走马灯动效

CSS

语言：

CSSSCSS

确定

.pink {

color: #fa114f;

}

.red {

color: #ff3b30;

}

.orange {

color: #ff9500;

}

.yellow {

color: #ffe620;

}

.green {

color: #04de71;

}

.teal {

color: #00f5ea;

}

.blue-light {

color: #5ac8fa;

}

.blue {

color: #2094fa;

}

.purple {

color: #787aff;

}

body,

h1,

h2 {

font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

font-weight: 300;

background: #000;

color: #f2f4ff;

margin: 0;

padding: 0;

}

body {

width: 300px;

margin: 1em auto;

}

.title {

font-size: 35px;

color: rgba(255, 255, 255, 0.5);

margin-bottom: 1em;

}

.time {

text-align: right;

font-size: 60px;

margin-bottom: 1em;

}

.item {

height: 130px;

position: relative;

}

.active h1 {

font-size: 90px;

line-height: 1;

position: absolute;

/* Chrome, Safari, Opera */

top: 0;

overflow: hidden;

-webkit-animation: h1-shrink 1s;

animation: h1-shrink 1s;

}

@-webkit-keyframes h1-shrink {

0%, 50% {

max-height: 0;

top: -100%;

}

100% {

max-height: 120px;

top: 0;

}

}

@keyframes h1-shrink {

0%, 50% {

top: -100%;

}

100% {

top: 0;

}

}

.active h2 {

position: absolute;

top: 65%;

/* Chrome, Safari, Opera */

font-size: 40px;

line-height: 1;

-webkit-animation: h2-grow 1s;

animation: h2-grow 1s;

}

@-webkit-keyframes h2-grow {

0%, 50% {

font-size: 60px;

top: 0%;

}

100% {

font-size: 40px;

top: 65%;

}

}

@keyframes h2-grow {

0%, 50% {

font-size: 50px;

top: 0%;

}

100% {

font-size: 40px;

top: 65%;

}

}

#owl-demo .item img {

display: block;

/*

* Core Owl Carousel CSS File

*v1.3.3

*/

/* clearfix */

width: 100%;

height: auto;

}

.owl-carousel .owl-wrapper:after {

content: ".";

display: block;

clear: both;

visibility: hidden;

/* display none until init */

line-height: 0;

height: 0;

}

.owl-carousel {

display: none;

position: relative;

width: 100%;

-ms-touch-action: pan-y;

}

.owl-carousel .owl-wrapper {

display: none;

position: relative;

-webkit-transform: translate3d(0px, 0px, 0px);

}

.owl-carousel .owl-wrapper-outer {

overflow: hidden;

position: relative;

width: 100%;

}

.owl-carousel .owl-wrapper-outer.autoHeight {

-webkit-transition: height 500ms ease-in-out;

transition: height 500ms ease-in-out;

}

.owl-carousel .owl-item {

float: left;

}

.owl-controls .owl-page,

.owl-controls .owl-buttons div {

cursor: pointer;

}

.owl-controls {

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

/* mouse grab icon */

user-select: none;

-webkit-tap-highlight-color: transparent;

}

.grabbing {

cursor: url(grabbing.png) 8 8, move;

}

.owl-carousel .owl-wrapper,

.owl-carousel .owl-item {

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

-ms-backface-visibility: hidden;

-webkit-transform: translate3d(0, 0, 0);

/* Styling Pagination*/

-moz-transform: translate3d(0, 0, 0);

-ms-transform: translate3d(0, 0, 0);

}

.owl-theme .owl-controls .owl-page {

/*IE7 life-saver */

display: inline-block;

zoom: 1;

*display: inline;

}

.owl-theme .owl-controls .owl-page span {

display: block;

width: 12px;

/*IE7 fix*/

height: 12px;

margin: 5px 7px;

filter: Alpha(Opacity=50);

opacity: 0.5;

border-radius: 20px;

background: #869791;

}

.owl-theme .owl-controls .owl-page.active span,

.owl-theme .owl-controls.clickable .owl-page:hover span {

/* If PaginationNumbers is true */

filter: Alpha(Opacity=100);

opacity: 1;

}

.owl-pagination {

text-align: center;

padding: 1em 0;

}

.owl-theme .owl-controls .owl-page span.owl-numbers {

height: auto;

width: auto;

color: #fff;

padding: 2px 10px;

font-size: 12px;

border-radius: 30px;

}