html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF"-8"></meta>
<meta name="viewport"
content="width=device-width,
initial-scale=1.0"></meta>
<title>Rose Animation</title>
<link rel="stylesheet"
href="styles.css"></link>
</head>
<body>
<div class="rose container"></div>
<div class="rose"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
background-color: pink;
}
.rose-container{
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.rose {
position:relative;
width:200px;
height:200px;
border-radius:50%;
background-color:Wine;
box-shadow:0 0 10px rgba(0, 0, 0, 0.2);
animation: rose-animation 5s infinite;
}
@keyframes rose-animation {
0% {
transform:scale(1);
}
50% {
transform:scale(1.2);
}
100%{
Enter to Rename, Shift+Enter to Preview
js
js
1
alert ("happy valentines day pookie")
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run