PokeVideoPlayer v23.9-app.js-020924_
0143ab93_videojs8_1563605_YT_2d24ba15 licensed under gpl3-or-later
ImmersiveAmbientModecolor: #c8c3da (color 2)
Video Format : (720p) openh264 ( https://github.com/cisco/openh264) mp4a.40.2 | 44100Hz
Audio Format: 140 ( High )
PokeEncryptID: 7d55f19234a42854cf105a42d629e614ecff78e09d723148b4260dcd6eb8c0b19b5f024afff6cfe8364c30a8f44cdd22
Proxy : eu-proxy.poketube.fun - refresh the page to change the proxy location
Date : 1740621362843 - unknown on Apple WebKit
Mystery text : TnFmNGJBOTdHdXMgaSAgbG92ICB1IGV1LXByb3h5LnBva2V0dWJlLmZ1bg==
143 : true
6 Views • Jan 31, 2024 • Click to toggle off description
#css
#css animation effects
#css animation tutorial
#html and #css
#html and #css animation
#html #css
#css animation examples
#css transition and animation
#pure html and #css animation
#animation
#css tutorial
#html and #css animation video shorts
#loading animation in html and #css
#css animations
#codecraft animation website
#codecraft animation beginner
#latest #css animation effects
#css loader animation
#css border animation
#css animation crash course
css and html animation creator
css and html animation
css animations for websites
animation with css and html
css code for animation
animation using css and html
html and css animations
html css cool animations
create animation with html and css
create an animation using html and css
html css keyframe animation
create animation with css
creative css and javascript effects and animation
css animation with js
css animation with javascript
html css java animation
css and javascript animation tutorial
html code for animation
html animation code notepad
css animation on scroll without javascript
2d animation in css
3d animation using css
css cool animation effects
coding for animation in html
css effects with code
best css animation with code
html animation on scroll
Views : 6
Genre: People & Blogs
License: Standard YouTube License
Uploaded At Jan 31, 2024 ^^
warning: returnyoutubedislikes may not be accurate, this is just an estiment ehe :3
Rating : 0 (0/0 LTDR)
0% of the users lieked the video!!
0% of the users dislieked the video!!
User score: 0.00- Overwhelmingly Negative
RYD date created : 2024-02-01T13:48:15.892275Z
See in json
3 Comments
Top Comments of this video!! :3
Awasome bro⚡✨🔥
|
Css:
/* basic style */
html,
body {
position: relative;
overflow: hidden;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: radial-gradient(circle at center, #222, #000);
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
margin: 0 -80px 0 0;
}
/* cube */
.cube {
position: relative;
width: 1px;
height: 1px;
margin: 0 80px 0 0;
transform-style: preserve-3d;
}
.wall {
width: 80px;
height: 80px;
position: absolute;
left: calc(-80px / 2);
top: calc(-80px / 2);
text-align: center;
line-height: 100px;
border: solid 1px #fff;
}
.front {
transform: translateZ(calc(80px / 2));
}
.back {
transform: translateZ(calc(-80px / 2)) rotateY(180deg);
}
.right {
transform: translateX(calc(80px / 2)) rotateY(90deg);
}
.left {
transform: translateX(calc(-80px / 2)) rotateY(-90deg);
}
.top {
transform: translateY(calc(-80px / 2)) rotateX(90deg);
}
.bottom {
transform: translateY(calc(80px / 2)) rotateX(-90deg);
}
/* animation */
.flex:nth-of-type(4) .cube:nth-of-type(1) {
animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s forwards;
}
.flex:nth-of-type(3) .cube:nth-of-type(1) {
animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s forwards;
}
.flex:nth-of-type(4) .cube:nth-of-type(2) {
animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s forwards;
}
.flex:nth-of-type(2) .cube:nth-of-type(1) {
animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s forwards;
}
.flex:nth-of-type(3) .cube:nth-of-type(2) {
animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s forwards;
}
.flex:nth-of-type(4) .cube:nth-of-type(3) {
animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards;
}
.flex:nth-of-type(1) .cube:nth-of-type(1) {
animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards;
}
.flex:nth-of-type(2) .cube:nth-of-type(2) {
animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards;
}
.flex:nth-of-type(3) .cube:nth-of-type(3) {
animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards;
}
.flex:nth-of-type(4) .cube:nth-of-type(4) {
animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards;
}
.flex:nth-of-type(1) .cube:nth-of-type(2) {
animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s forwards;
}
.flex:nth-of-type(2) .cube:nth-of-type(3) {
animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s forwards;
}
.flex:nth-of-type(3) .cube:nth-of-type(4) {
animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s forwards;
}
.flex:nth-of-type(1) .cube:nth-of-type(3) {
animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 1s forwards;
}
.flex:nth-of-type(2) .cube:nth-of-type(4) {
animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 1s forwards;
}
.flex:nth-of-type(1) .cube:nth-of-type(4) {
animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 1.1s forwards;
}
@keyframes rotation {
100% {
transform: rotateX(270deg) rotateY(270deg);
}
}
.wall{
animation: color 2s linear 1.5s forwards;
}
@keyframes color {
100% {
background-color: #fff;
}
}
|
@Codecraft001
1 year ago
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS FILE
</title>
<link rel="stylesheet" href="css6.css">
</head>
<body>
<div class="container">
<div class="flex">
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
</div>
<div class="flex">
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
</div>
<div class="flex">
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
</div>
<div class="flex">
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
</div>
</div>
|