Give Me Animation Coding That Use In Brainly app
Answers
Explanation:
[tex]<!DOCTYPE html>
<html lang="en">
<head>
<title>Captain America Shield</title>
</head>
<div class="container">
<div class="circle outer-lv3">
<div class="circle outer-lv2">
<div class="circle outer-lv1">
<div class="center">
<div class="arrow top"></div>
<div class="arrow left"></div>
<div class="arrow right"></div>
</div>
</div>
</div>
</div>
</div>
<style>
html, body {
background:#0846A8;
height: 500px;
}
.container {
width:100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.circle {
border-radius: 50%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border:1px solid #000;
}
.outer-lv3 {
background-image: linear-gradient(#870000,#FF4040,#870000);
height: 260px;
width: 260px;
-webkit-animation: turning 8s infinite linear;
animation: turning 8s infinite linear;
}
@-webkit-keyframes turning {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
@keyframes turning {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
<head>
<html>[/tex
[tx]<!DOCTYPE html>
<html lang="en">
<head>
<title>Mickey Mouse</title>
</head>
<body>
<div class="box">
<div class="mouse mouse-lavender"></div>
<div class="mouse mouse-mint"></div>
<div class="mouse mouse-purple"></div>
</div>
<style>
body {
animation: background 3s infinite;
}
.box * {
position: absolute;
}
.box {
margin: 0 auto;
height: 300px;
width: 300px;
top: 50%;
transform: translateY(50%);
}
.mouse {
height: 100px;
width: 100px;
border-radius: 50%;
}
.mouse::before,
.mouse::after{
content: '';
position: absolute;
display: block;
height: 60px;
width: 60px;
border-radius: 50%;
}
.mouse::before {
top: -30%;
left: -30%;
}
.mouse::after {
top: -30%;
right: -30%;
}
.mouse-lavender {
background-color: #9b99ff;
top: 50%;
left: 0;
animation: beat 3s 1s infinite;
}
.mouse-lavender::before,
.mouse-lavender::after {
background-color: #9b99ff;
}
.mouse-mint {
background-color: #82fff3;
top: 50%;
right: 0;
animation: beat 3s 2s infinite;
}
.mouse-mint::before,
.mouse-mint::after {
background-color: #82fff3;
}
.mouse-purple {
background-color: #e682ff;
top: 0%;
left: 35%;
animation: beat 3s 3s infinite;
}
.mouse-purple::before,
.mouse-purple::after {
background-color: #e682ff;
}
@keyframes background2 {
0% {
background: #c3b8fc;
}
50% {
background: #ccfff6;
}
100% {
background: #feccff;
}
}
@keyframes beat {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(.6);
opacity: .6;
}
}
</style>
</body>
</html>[/tex]