Scribd Logo
Upload

Welcome to Scribd!

  • Semn13 Iap

    Uploaded by

    Ralla Ioana
    9 views11 pages
    The document contains examples of using CSS animations and HTML5 canvas. Example 1 defines a CSS animation that changes the background color of a div over 5 seconds. Example 2 animates a 3D spinning cube using CSS transforms. Example 3 uses CSS transforms and animations to create a 3D spinning cube within a container. Example 4 draws a red rectangle on an HTML5 canvas element using JavaScript.

    Original Description:

    Original Title

    SEMN13_IAP

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document contains examples of using CSS animations and HTML5 canvas. Example 1 defines a CSS animation that changes the background color of a div over 5 seconds. Example 2 animates a 3D spinning cube using CSS transforms. Example 3 uses CSS transforms and animations to create a 3D spinning cube within a container. Example 4 draws a red rectangle on an HTML5 canvas element using JavaScript.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    9 views11 pages

    Semn13 Iap

    Uploaded by

    Ralla Ioana
    The document contains examples of using CSS animations and HTML5 canvas. Example 1 defines a CSS animation that changes the background color of a div over 5 seconds. Example 2 animates a 3D spinning cube using CSS transforms. Example 3 uses CSS transforms and animations to create a 3D spinning cube within a container. Example 4 draws a red rectangle on an HTML5 canvas element using JavaScript.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 11

    EXEMPLU 1.

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    div

    width:100px;

    height:100px;

    background:red;

    -webkit-animation:anim 5s; /* Chrome, Safari, Opera */

    animation:anim 5s;

    /* Chrome, Safari, Opera */

    @-webkit-keyframes anim

    0% {background:red;}

    25% {background:yellow;}

    50% {background:blue;}

    100% {background:green;}

    /* Standard syntax */

    @keyframes anim

    0% {background:red;}

    25% {background:yellow;}

    50% {background:blue;}

    100% {background:green;}
    }

    </style>

    </head>

    <body>

    <div>text

    </div>

    </body>

    </html>

    EXEMPLU 2.

    <html><head><style>

    @-webkit-keyframes spincube {

    from,to { }

    16% { -webkit-transform: rotateY(-90deg); }

    33% { -webkit-transform: rotateY(-90deg) rotateZ(90deg); }

    50% { -webkit-transform: rotateY(-180deg) rotateZ(90deg); }

    66% { -webkit-transform: rotateY(90deg) rotateX(90deg); }

    83% { -webkit-transform: rotateX(90deg); }

    @-moz-keyframes spincube {

    from, { -moz-transform: rotateY(-90deg); }

    33% to { }

    16% { -moz-transform: rotateY(-90deg) rotateZ(90deg); }

    50% { -moz-transform: rotateY(-180deg) rotateZ(90deg); }

    66% { -moz-transform: rotateY(90deg) rotateX(90deg); }

    83% { -moz-transform: rotateX(90deg); }

    ms-keyframes spincube {
    from,to { }

    16% { -ms-transform: rotateY(-90deg); }

    33% { -ms-transform: rotateY(-90deg) rotateZ(90deg); }

    50% { -ms-transform: rotateY(-180deg) rotateZ(90deg); }

    66% { -ms-transform: rotateY(90deg) rotateX(90deg); }

    83% { -ms-transform: rotateX(90deg); }

    .cubespinner {

    webkit-animation-name: spincube;

    webkit-animation-timing-function: ease-in-out;

    webkit-animation-iteration-count: infinite;

    webkit-animation-duration: 12s;

    webkit-transform-style: preserve-3d;

    webkit-transform-origin: 60px 60px 0;

    moz-animation-name: spincube;

    moz-animation-timing-function: ease-in-out;

    moz-animation-iteration-count: infinite;

    moz-animation-duration: 12s;

    moz-transform-style: preserve-3d;

    moz-transform-origin: 60px 60px 0;

    ms-animation-name: spincube;

    ms-animation-timing-function: ease-in-out;

    ms-animation-iteration-count: infinite;

    ms-animation-duration: 12s;

    ms-transform-style: preserve-3d;

    ms-transform-origin: 60px 60px 0;

    .cubespinner div {

    position: absolute;
    width: 120px;

    height: 120px;

    border: 1px solid #ccc;

    background: rgba(255,255,255,0.8);

    box-shadow: inset 0 0 20px rgba(0,0,0,0.2);

    text-align: center;

    font-size: 100px;

    .cubespinner.face4 {

    webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);

    moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);

    ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);

    .cubespinner.face6 {

    webkit-transform: rotateX(-90deg) translateZ(60px);

    moz-transform: rotateX(-90deg) translateZ(60px);

    ms-transform: rotateX(-90deg) translateZ(60px);

    </style>

    </head>

    <body>

    <div class="stage" style="width: 120px; height: 120px;">

    <div class="cubespinner">

    <div class="face4">44</div>

    <div class="face6">6</div>
    </div>

    </div>

    </body>

    </html>

    EXEMPLUL 3.

    <html>

    <head>

    <style>

    body {

    margin-top: 125px;

    @-moz-keyframes spinningH {

    from {

    -moz-transform: rotateX(0deg) rotateY(0deg);

    to{

    -moz-transform: rotateX(360deg) rotateY(360deg);

    @-webkit-keyframes spinningH {

    from {

    -webkit-transform: rotateX(0deg) rotateY(0deg);

    to{

    -webkit-transform: rotateX(360deg) rotateY(360deg);


    }

    @-o-keyframes spinningH {

    from {

    -o-transform: rotateX(0deg) rotateY(0deg);

    to{

    -o-transform: rotateX(360deg) rotateY(360deg);

    @-ms-keyframes spinningH {

    from {

    -ms-transform: rotateX(0deg) rotateY(0deg);

    to{

    -ms-transform: rotateX(360deg) rotateY(360deg);

    @keyframes spinningH {

    from {

    transform: rotateX(0deg) rotateY(0deg);

    to{

    transform: rotateX(360deg) rotateY(360deg);

    }
    #container {

    -webkit-perspective : 1000px;

    -moz-perspective : 1000px;

    -o-perspective : 1000px;

    -ms-perspective : 1000px;

    perspective : 1000px;

    -webkit-perspective-origin : 50% 50%;

    -moz-perspective-origin : 50% 50%;

    -moz-transform-origin : 50% 50%;

    -o-perspective-origin : 50% 50%;

    -ms-perspective-origin : 50% 50%;

    perspective-origin : 50% 50%;

    .animate {

    -webkit-animation : spinningH 6s infinite linear;

    -moz-animation : spinningH 6s infinite linear;

    -o-animation : spinningH 6s infinite linear;

    -ms-animation : spinningH 6s infinite linear;

    animation : spinningH 6s infinite linear;

    #cube {

    position: relative;

    margin: 0 auto;

    height: 400px;

    width: 400px;
    -webkit-transition : -webkit-transform 2s linear;

    -moz-transition : -moz-transform 2s linear;

    -o-transition : -o-transform 2s linear;

    -ms-transition : -ms-transform 2s linear;

    transition : transform 2s linear;

    -webkit-transform-style : preserve-3d;

    -moz-transform-style : preserve-3d;

    -o-transform-style : preserve-3d;

    -ms-transform-style : preserve-3d;

    transform-style : preserve-3d;

    #cube>div {

    position: absolute;

    height: 360px;

    width: 360px;

    padding: 20px;

    opacity: 0.9;

    background-position:center center;

    #cube div:nth-child(1) {

    -webkit-transform : translateZ(200px);

    -moz-transform : translateZ(200px);

    -o-transform : translateZ(200px);

    -ms-transform : translateZ(200px);

    transform : translateZ(200px); background-repeat : no-repeat;


    }

    #cube div:nth-child(2) {

    -webkit-transform : rotateY(90deg) translateZ(200px);

    -moz-transform : rotateY(90deg) translateZ(200px);

    -o-transform : rotateY(90deg) translateZ(200px);

    -ms-transform : rotateY(90deg) translateZ(200px);

    transform : rotateY(90deg) translateZ(200px);

    background-repeat : no-repeat;

    #cube div:nth-child(3) {

    -webkit-transform : rotateY(180deg) translateZ(200px);

    -moz-transform : rotateY(180deg) translateZ(200px);

    -o-transform : rotateY(180deg) translateZ(200px);

    -ms-transform : rotateY(180deg) translateZ(200px);

    transform : rotateY(180deg) translateZ(200px);

    background-color : #2D1C12;background-repeat : no-repeat;

    #cube div:nth-child(4) {

    -webkit-transform : rotateY(-90deg) translateZ(200px);

    -moz-transform : rotateY(-90deg) translateZ(200px);

    -o-transform : rotateY(-90deg) translateZ(200px);

    -ms-transform : rotateY(-90deg) translateZ(200px);

    transform : rotateY(-90deg) translateZ(200px);

    background-color : #693C1F;

    background-repeat : no-repeat;

    }
    #cube div:nth-child(5) {

    -webkit-transform : rotateX(-90deg) translateZ(200px) rotate(180deg);

    -moz-transform : rotateX(-90deg) translateZ(200px) rotate(180deg);

    -o-transform : rotateX(-90deg) translateZ(200px) rotate(180deg);

    -ms-transform : rotateX(-90deg) translateZ(200px) rotate(180deg);

    transform : rotateX(-90deg) translateZ(200px) rotate(180deg);

    background-color : #955122;

    background-repeat :no-repeat;

    #cube div:nth-child(6) {

    -webkit-transform : rotateX(90deg) translateZ(200px);

    -moz-transform : rotateX(90deg) translateZ(200px);

    -o-transform : rotateX(90deg) translateZ(200px);

    -ms-transform : rotateX(90deg) translateZ(200px);

    transform : rotateX(90deg) translateZ(200px);

    background-color : #E34C26;

    background-repeat :no-repeat;

    text-align:center;

    </style>

    </head>

    <body>

    <div id="container">

    <div id="cube" class="animate">

    <div></div>

    <div></div>

    <div></div>
    <div></div>

    <div></div>

    <div></div>

    </div>

    </div>

    </div>

    </div>

    </body>

    </html>

    EXEMPLUL 4.

    <html><head><title>exemple html5</title></head>

    <body>

    <canvas id="myCanvas" width="300" height="200" style="border:10px solid #FF0000;">

    Browser-ul nu suporta HTML5

    </canvas>

    <script>

    var c=document.getElementById("myCanvas");

    var ctx=c.getContext("2d");

    ctx.fillStyle="#FFF0000";

    ctx.fillRect(80,100,120,50);

    </script>

    <form action="Meniu.html">

    <input type="submit" value="Meniul principal">

    </body>

    </html>

    You might also like