<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery+CSS3苹果产品介绍自动切换展示动画特效</title>
<script src="js/jquery.min.js"></script>
<style>
body {
margin: 0;
}
.wrapper {
display: flex;
width: 100%;
height: 100vh;
overflow: hidden;
background: #4E057E;
}
.artboard {
position: relative;
margin: auto;
width: 60vmin;
height: 60vmin;
}
.quote {
position: relative;
margin: auto;
width: 60vmin;
text-transform: uppercase;
color: #fff;
font-family: 'Luckiest Guy', cursive;
font-size: 6vmin;
letter-spacing: .2vmin;
}
.quote span {
opacity: .1;
transition: .5s ease-in-out;
}
.quote span.highlight {
opacity: 1;
}
#watch {
position: absolute;
left: 18vmin;
top: 7.7vmin;
transition: 0.5s cubic-bezier(0.42, 0, 0.57, 1.38);
transform-origin: 12vmin 13.8vmin;
opacity: 1;
transform: scale(1) rotate(0);
}
#watch div {
transform: scale(1) rotate(0) translate(0, 0);
opacity: 1;
transition: 0.4s cubic-bezier(0.6, 0.04, 0.08, 1.3);
}
#watch.out div {
opacity: 0;
transform: scale(0.1) rotate(90deg);
}
#watch.ready div {
opacity: 0;
transform: scale(0.1) rotate(-90deg);
}
#watch #outline {
position: absolute;
top: 8.5vmin;
width: 24vmin;
height: 27.6vmin;
border-radius: 4.5vmin;
background: #FFC8C3;
display: flex;
transform-origin: center center;
}
#watch #screen {
width: 21.6vmin;
height: 25vmin;
background: #FF766D;
border-radius: 3.6vmin;
margin: auto;
transition-delay: 50ms;
transform-origin: center center;
}
#watch #band-up {
position: absolute;
left: 4.9vmin;
width: 14.2vmin;
height: 8.5vmin;
background: linear-gradient(#FFC8C3, #FF766D);
border-radius: 1vmin 1vmin 0 0;
transform-origin: center 18.05vmin;
}
#watch #band-bottom {
position: absolute;
left: 4.9vmin;
top: 36vmin;
width: 14.2vmin;
height: 8.5vmin;
background: linear-gradient(#FF766D, #FFC8C3);
border-radius: 0 0 1vmin 1vmin;
transform-origin: center -1.75vmin;
}
#watch #crown {
position: absolute;
left: 23.25vmin;
top: 14vmin;
width: 1.6vmin;
height: 4.8vmin;
background: #FF766D;
border-radius: 0 .8vmin .8vmin 0;
transition-delay: 50ms;
transform-origin: -11.3vmin 8.3vmin;
}
#watch #button {
position: absolute;
left: 23.8vmin;
top: 23vmin;
width: .6vmin;
height: 7.2vmin;
background: #FF766D;
border-radius: 0 .4vmin .4vmin 0;
transition-delay: 100ms;
transform-origin: -11.7vmin -0.7vmin;
}
#phone {
position: absolute;
left: 16.65vmin;
top: 3.2vmin;
}
#phone div {
transform: scale(1) rotate(0) translate(0, 0);
opacity: 1;
transition: 0.4s cubic-bezier(0.6, 0.04, 0.08, 1.3);
}
#phone.out div {
opacity: 0;
transform: scale(0.1) rotate(90deg);
}
#phone.ready div {
opacity: 0;
transform: scale(0.1) rotate(-90deg);
}
#phone #outline {
position: absolute;
width: 26.7vmin;
height: 53.6vmin;
background: #D8F5FF;
border-radius: 3.8vmin;
display: flex;
transform-origin: center center;
}
#phone #screen {
margin: auto;
width: 23.5vmin;
height: 41.6vmin;
background: #91E3FF;
transform-origin: center center;
transition-delay: 100ms;
}
#phone #home {
position: absolute;
left: 11.6vmin;
top: 48.8vmin;
width: 3.8vmin;
height: 3.8vmin;
background: #91E3FF;
border-radius: 100vmin;
transition-delay: 50ms;
transform-origin: 1.9vmin -22vmin;
}
#phone #camera {
position: absolute;
left: 13vmin;
top: 2vmin;
width: .7vmin;
height: .7vmin;
background: #91E3FF;
border-radius: 100vmin;
transform-origin: 0 24.8vmin;
}
#phone #sensor {
position: absolute;
left: 9.2vmin;
top: 3.4vmin;
width: 1vmin;
height: 1vmin;
background: #91E3FF;
border-radius: 100vmin;
transform-origin: 3.65vmin 23.4vmin;
}
#phone #speaker {
position: absolute;
left: 10.85vmin;
top: 3.6vmin;
width: 5vmin;
height: .6vmin;
background: #91E3FF;
border-radius: 100vmin;
transition-delay: 100ms;
transform-origin: 0vmin 23.2vmin;
}
#phone #lock {
position: absolute;
left: 26.7vmin;
top: 9.6vmin;
width: .3vmin;
height: 3.5vmin;
background: #91E3FF;
border-radius: 0 10vmin 10vmin;
transform-origin: -13.35vmin 17.2vmin;
}
#phone #silent {
position: absolute;
left: -.3vmin;
top: 6.6vmin;
width: .3vmin;
height: 2.5vmin;
background: #91E3FF;
border-radius: 10vmin 0 0 10vmin;
transition-delay: 100ms;
transform-origin: 13.35vmin 20.2vmin;
}
#phone #volume-up {
position: absolute;
left: -.3vmin;
top: 10.6vmin;
width: .3vmin;
height: 3.5vmin;
background: #91E3FF;
border-radius: 10vmin 0 0 10vmin;
transition-delay: 50ms;
transform-origin: 13.35vmin 16.2vmin;
}
#phone #volume-down {
position: absolute;
left: -.3vmin;
top: 14.6vmin;
width: .3vmin;
height: 3.5vmin;
background: #91E3FF;
border-radius: 10vmin 0 0 10vmin;
transform-origin: 13.35vmin 12.2vmin;
}
#laptop {
position: absolute;
left: 0;
top: 10vmin;
}
#laptop div {
transform: scale(1) rotate(0) translate(0, 0);
opacity: 1;
transition: 0.4s cubic-bezier(0.6, 0.04, 0.08, 1.3);
}
#laptop.out div {
opacity: 0;
transform: scale(0.1) rotate(90deg);
}
#laptop.ready div {
opacity: 0;
transform: scale(0.1) rotate(-90deg);
}
#laptop #outline {
position: absolute;
left: 6vmin;
width: 48vmin;
height: 33vmin;
border-radius: 1vmin;
background: #FFD568;
display: flex;
transform-origin: center center;
}
#laptop #screen {
width: 44vmin;
height: 29vmin;
background: #FFF2D1;
margin: auto;
transition-delay: 50ms;
transform-origin: center center;
}
#laptop #keyboard {
position: absolute;
top: 33vmin;
width: 60vmin;
height: 1.3vmin;
border-radius: .5vmin .5vmin 0 0;
background: #FFD568;
transform-origin: center -8vmin;
}
#laptop #back {
position: absolute;
top: 34.3vmin;
width: 60vmin;
height: .8vmin;
background: #FFF2D1;
border-radius: 0 0 .5vmin .5vmin;
transform-origin: center -10vmin;
}
#laptop #notch {
position: absolute;
top: 33vmin;
left: 25.7vmin;
width: 8.6vmin;
height: .5vmin;
background: #FFF2D1;
border-radius: 0 0 .5vmin .5vmin;
transition-delay: 100ms;
transform-origin: center -8vmin;
}
#laptop #camera {
position: absolute;
top: .5vmin;
left: 29.7vmin;
width: .8vmin;
height: .8vmin;
background: #FFF2D1;
border-radius: .4vmin;
transition-delay: 50ms;
transform-origin: center 20vmin;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="artboard">
<div id="watch">
<div id="crown"></div>
<div id="button"></div>
<div id="band-up"></div>
<div id="band-bottom"></div>
<div id="outline">
<div id="screen"></div>
</div>
</div>
<div id="phone" class="ready">
<div id="outline">
<div id="screen"></div>
</div>
<div id="home"></div>
<div id="camera"></div>
<div id="sensor"></div>
<div id="speaker"></div>
<div id="lock"></div>
<div id="silent"></div>
<div id="volume-up"></div>
<div id="volume-down"></div>
</div>
<div id="laptop" class="out">
<div id="outline">
<div id="screen"></div>
</div>
<div id="keyboard"></div>
<div id="notch"></div>
<div id="back"></div>
<div id="camera"></div>
</div>
</div>
<div class="quote">
<span class="highlight">Apple's<br/></span>
<span>conquering<br/></span>
<span>my life.</span>
</div>
</div>
<script>
var num=0;
window.setInterval(function(){
num++;
var classes=['','out','ready'];
$('#watch').removeClass();
$('#watch').addClass(classes[num%3])