How can I extend the codebase to include CSS animations and one more CSS element (A STAR) See my HTML AND CSS Transforms and Transitions & Animations CSS CSS: .cloud, .cloudshadow { width: 350px; height: 120px; background: #3498db; border-radius: 100px; position: relative; margin: 150px 50px; } .cloud:after, .cloud:before, .cloudshadow:after, .cloudshadow:before { content: ''; position: absolute; background: #3498db; z-index: 1 } .cloudshadow, .cloudshadow:after, .cloudshadow:before { margin: 0; z-index: -99; } .cloud:after, .cloudshadow:after { width: 100px; height: 100px; top: -50px; left: 50px; border-radius: 100px; } .cloud:before, .cloudshadow:before { width: 180px; height: 180px; top: -90px; right: 50px; border-radius: 200px; } /* add to animate cloud */ @keyframes yourKeyframe { } .cloud{ -webkit-animation: yourKeyframe ; -moz-animation: yourKeyframe ; animation: yourKeyframe ; }

Database System Concepts
7th Edition
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Chapter1: Introduction
Section: Chapter Questions
Problem 1PE
icon
Related questions
Question

How can I extend the codebase to include CSS animations and one more CSS element (A STAR)                          See my HTML AND CSS

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Transforms and Transitions & Animations CSS</title>

    <link rel="stylesheet" href="./css/cloud.css">
</head>
<body>
   <div class="wrapper">

    <div class="cloud">
        <div class="cloudshadow"></div>
    </div>
   </div>
</body>
</html>

 

 

CSS:

 


.cloud, .cloudshadow {
    width: 350px; height: 120px;
    background: #3498db;
    border-radius: 100px;
    position: relative;
    margin: 150px 50px;
}
.cloud:after, .cloud:before, .cloudshadow:after, .cloudshadow:before {
    content: '';
    position: absolute;
    background: #3498db;
    z-index: 1
}
.cloudshadow, .cloudshadow:after, .cloudshadow:before {
    margin: 0;
    z-index: -99;
}
.cloud:after, .cloudshadow:after {
    width: 100px; height: 100px;
    top: -50px; left: 50px;
    border-radius: 100px;
}
.cloud:before, .cloudshadow:before  {
    width: 180px; height: 180px;
    top: -90px; right: 50px;
    border-radius: 200px;
}


/* add to animate cloud */
@keyframes yourKeyframe {
   
}

.cloud{
    -webkit-animation: yourKeyframe ;
    -moz-animation: yourKeyframe ;
    animation: yourKeyframe ;
    

}

Expert Solution
trending now

Trending now

This is a popular solution!

steps

Step by step

Solved in 5 steps with 5 images

Blurred answer
Knowledge Booster
Hyperlinks
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.
Similar questions
  • SEE MORE QUESTIONS
Recommended textbooks for you
Database System Concepts
Database System Concepts
Computer Science
ISBN:
9780078022159
Author:
Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:
McGraw-Hill Education
Starting Out with Python (4th Edition)
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
Digital Fundamentals (11th Edition)
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
C How to Program (8th Edition)
C How to Program (8th Edition)
Computer Science
ISBN:
9780133976892
Author:
Paul J. Deitel, Harvey Deitel
Publisher:
PEARSON
Database Systems: Design, Implementation, & Manag…
Database Systems: Design, Implementation, & Manag…
Computer Science
ISBN:
9781337627900
Author:
Carlos Coronel, Steven Morris
Publisher:
Cengage Learning
Programmable Logic Controllers
Programmable Logic Controllers
Computer Science
ISBN:
9780073373843
Author:
Frank D. Petruzella
Publisher:
McGraw-Hill Education