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 ; }
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 ;
}
Trending now
This is a popular solution!
Step by step
Solved in 5 steps with 5 images
