HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercise 010 Animated Web page</title>
<link rel="stylesheet" href="Exercise 010 CSS.css">
</head>
<body>
<div> <h1 style="font-size:40px;"> Multimedia Arts </h1> </div> <br> <br> <br> <br> <br> <br> <br> <br>
<p style="text-align: justify; text-indent: 50px;"> Multimedia arts & design is the creation of images and content using the latest design techniques and technology. Multimedia art includes animation, audio, interactivity, still images, text, and video. Multimedia artists and designers may combine traditional forms of art such as painting or sculpture with any of the mediums mentioned above. <br> </p>
<p style="text-align: justify; text-indent: 50px;">A typical multimedia art & design program curriculum consists of a combination of general education courses, core courses, electives, and studios. General education courses may fall into a number of categories such as the arts, humanities, natural sciences, social and behavioral sciences, writing and speaking, health and wellness, integrative studies, and quantification.
Examples of core courses and electives include:
3D Digital Art and Design Fundamentals
Animation Fundamentals
Application Development Design Studio
Design Concepts
Digital Art and Design Criticism
Digital Arts: Computer Graphics</p>
</body>
</html>
CSS
div {
width: 300px;
height: 50px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}
@keyframes example {
0% {background-color:orange; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:pink; left:0px; top:0px;}
}
}
No comments:
Post a Comment