Scribd
Upload
24 views11 pages

Semn13 Iap

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.

Uploaded by

Ralla Ioana
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
24 views11 pages

Semn13 Iap

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.

Uploaded by

Ralla Ioana
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 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