204 lines
7.1 KiB
CSS
204 lines
7.1 KiB
CSS
/*
|
|
Important:
|
|
|
|
This is sample code demonstrating API, technology or techniques in development.
|
|
Although this sample code has been reviewed for technical accuracy, it is not
|
|
final. Apple is supplying this information to help you plan for the adoption of
|
|
the technologies and programming interfaces described herein. This information
|
|
is subject to change, and software implemented based on this sample code should
|
|
be tested with final operating system software and final documentation. Newer
|
|
versions of this sample code may be provided with future seeds of the API or
|
|
technology. For information about updates to this and other developer
|
|
documentation, view the New & Updated sidebars in subsequent documentation seeds.
|
|
*/
|
|
|
|
/*
|
|
File: leaves.css
|
|
Abstract: Defines CSS properties for the leaves sample.
|
|
Applies animations to the leaves. Defines the appearance, position, and dimensions of
|
|
all div elements on the "Falling Leaves -- Using CSS Animations and Transforms" page.
|
|
|
|
Version: 1.0
|
|
|
|
Disclaimer: IMPORTANT: This Apple software is supplied to you by
|
|
Apple Inc. ("Apple") in consideration of your agreement to the
|
|
following terms, and your use, installation, modification or
|
|
redistribution of this Apple software constitutes acceptance of these
|
|
terms. If you do not agree with these terms, please do not use,
|
|
install, modify or redistribute this Apple software.
|
|
|
|
In consideration of your agreement to abide by the following terms, and
|
|
subject to these terms, Apple grants you a personal, non-exclusive
|
|
license, under Apple's copyrights in this original Apple software (the
|
|
"Apple Software"), to use, reproduce, modify and redistribute the Apple
|
|
Software, with or without modifications, in source and/or binary forms;
|
|
provided that if you redistribute the Apple Software in its entirety and
|
|
without modifications, you must retain this notice and the following
|
|
text and disclaimers in all such redistributions of the Apple Software.
|
|
Neither the name, trademarks, service marks or logos of Apple Inc.
|
|
may be used to endorse or promote products derived from the Apple
|
|
Software without specific prior written permission from Apple. Except
|
|
as expressly stated in this notice, no other rights or licenses, express
|
|
or implied, are granted by Apple herein, including but not limited to
|
|
any patent rights that may be infringed by your derivative works or by
|
|
other works in which the Apple Software may be incorporated.
|
|
|
|
The Apple Software is provided by Apple on an "AS IS" basis. APPLE
|
|
MAKES NO WARRANTIES, EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION
|
|
THE IMPLIED WARRANTIES OF NON-INFRINGEMENT, MERCHANTABILITY AND FITNESS
|
|
FOR A PARTICULAR PURPOSE, REGARDING THE APPLE SOFTWARE OR ITS USE AND
|
|
OPERATION ALONE OR IN COMBINATION WITH YOUR PRODUCTS.
|
|
|
|
IN NO EVENT SHALL APPLE BE LIABLE FOR ANY SPECIAL, INDIRECT, INCIDENTAL
|
|
OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
|
|
SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
|
|
INTERRUPTION) ARISING IN ANY WAY OUT OF THE USE, REPRODUCTION,
|
|
MODIFICATION AND/OR DISTRIBUTION OF THE APPLE SOFTWARE, HOWEVER CAUSED
|
|
AND WHETHER UNDER THEORY OF CONTRACT, TORT (INCLUDING NEGLIGENCE),
|
|
STRICT LIABILITY OR OTHERWISE, EVEN IF APPLE HAS BEEN ADVISED OF THE
|
|
POSSIBILITY OF SUCH DAMAGE.
|
|
|
|
Copyright (C) 2008 Apple Inc. All Rights Reserved.
|
|
|
|
*/
|
|
|
|
body
|
|
{
|
|
background-color: #4E4226;
|
|
}
|
|
|
|
#container {
|
|
position: relative;
|
|
height: 700px;
|
|
width: 500px;
|
|
margin: 50px auto;
|
|
overflow: hidden;
|
|
border: 4px solid #5C090A;
|
|
background: #4E4226 url('images/backgroundLeaves.jpg') no-repeat top left;
|
|
}
|
|
|
|
/* Defines the position and dimensions of the leafContainer div */
|
|
#leafContainer
|
|
{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Defines the appearance, position, and dimensions of the message div */
|
|
#message
|
|
{
|
|
position: absolute;
|
|
top: 160px;
|
|
width: 100%;
|
|
height: 300px;
|
|
background:transparent url('images/textBackground.png') repeat-x center;
|
|
color: #5C090A;
|
|
font-size: 220%;
|
|
font-family: 'Georgia';
|
|
text-align: center;
|
|
padding: 20px 10px;
|
|
-webkit-box-sizing: border-box;
|
|
-webkit-background-size: 100% 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
p {
|
|
margin: 15px;
|
|
}
|
|
|
|
a
|
|
{
|
|
color: #5C090A;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Sets the color of the "Dino's Gardening Service" message */
|
|
em
|
|
{
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
}
|
|
|
|
.phone {
|
|
font-size: 150%;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* This CSS rule is applied to all div elements in the leafContainer div.
|
|
It styles and animates each leafDiv.
|
|
*/
|
|
#leafContainer > div
|
|
{
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 100px;
|
|
|
|
/* We use the following properties to apply the fade and drop animations to each leaf.
|
|
Each of these properties takes two values. These values respectively match a setting
|
|
for fade and drop.
|
|
*/
|
|
-webkit-animation-iteration-count: infinite, infinite;
|
|
-webkit-animation-direction: normal, normal;
|
|
-webkit-animation-timing-function: linear, ease-in;
|
|
}
|
|
|
|
/* This CSS rule is applied to all img elements directly inside div elements which are
|
|
directly inside the leafContainer div. In other words, it matches the 'img' elements
|
|
inside the leafDivs which are created in the createALeaf() function.
|
|
*/
|
|
#leafContainer > div > img {
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 100px;
|
|
|
|
/* We use the following properties to adjust the clockwiseSpin or counterclockwiseSpinAndFlip
|
|
animations on each leaf.
|
|
The createALeaf function in the Leaves.js file determines whether a leaf has the
|
|
clockwiseSpin or counterclockwiseSpinAndFlip animation.
|
|
*/
|
|
-webkit-animation-iteration-count: infinite;
|
|
-webkit-animation-direction: alternate;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
-webkit-transform-origin: 50% -100%;
|
|
}
|
|
|
|
|
|
/* Hides a leaf towards the very end of the animation */
|
|
@-webkit-keyframes fade
|
|
{
|
|
/* Show a leaf while into or below 95 percent of the animation and hide it, otherwise */
|
|
0% { opacity: 1; }
|
|
95% { opacity: 1; }
|
|
100% { opacity: 0; }
|
|
}
|
|
|
|
|
|
/* Makes a leaf fall from -300 to 600 pixels in the y-axis */
|
|
@-webkit-keyframes drop
|
|
{
|
|
/* Move a leaf to -300 pixels in the y-axis at the start of the animation */
|
|
0% { -webkit-transform: translate(0px, -50px); }
|
|
/* Move a leaf to 600 pixels in the y-axis at the end of the animation */
|
|
100% { -webkit-transform: translate(0px, 650px); }
|
|
}
|
|
|
|
/* Rotates a leaf from -50 to 50 degrees in 2D space */
|
|
@-webkit-keyframes clockwiseSpin
|
|
{
|
|
/* Rotate a leaf by -50 degrees in 2D space at the start of the animation */
|
|
0% { -webkit-transform: rotate(-50deg); }
|
|
/* Rotate a leaf by 50 degrees in 2D space at the end of the animation */
|
|
100% { -webkit-transform: rotate(50deg); }
|
|
}
|
|
|
|
|
|
/* Flips a leaf and rotates it from 50 to -50 degrees in 2D space */
|
|
@-webkit-keyframes counterclockwiseSpinAndFlip
|
|
{
|
|
/* Flip a leaf and rotate it by 50 degrees in 2D space at the start of the animation */
|
|
0% { -webkit-transform: scale(-1, 1) rotate(50deg); }
|
|
/* Flip a leaf and rotate it by -50 degrees in 2D space at the end of the animation */
|
|
100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }
|
|
}
|