Animated Pyramid: CSS Tutorial (Day 20 of CSS3 in 30 Days)

preview_player
Показать описание
Create a small triangle that, once hovered over, animates into a pyramid comprised of several shapes!

⭐️Files you need ⭐️

--

  1. freeCodeCamp.org
  2. css
  3. pacman
  4. css tutorial
  5. css animation
  6. sticky footer
Рекомендации по теме
Animated Pyramid: CSS 0:13:01

Animated Pyramid: CSS Tutorial (Day 20 of CSS3 in 30 Days)

CSS Coding Challenge 0:26:15

CSS Coding Challenge - Pyramid Animation (INSANE)

How to build 0:29:14

How to build pyramid animation using HTML,CSS | 100 days CSS challenge day 3 challenge

How To Make 0:09:48

How To Make 3D Pyramid In HTML And CSS Animation

Ambient Light Effects 0:05:41

Ambient Light Effects | CSS 3D Glowing Pyramid Animation Effects

Pyramid - create 0:01:40

Pyramid - create using html and CSS 💻📝

Animated Pyramid Using 0:00:14

Animated Pyramid Using HTML and CSS #animated #pyramid #htmlandcss

Pyramid animation using 0:00:23

Pyramid animation using HTML , CSS | 100 days CSS day 3 challenge #shorts

Coding Triangle Animation 0:04:30

Coding Triangle Animation | CSS Effect

Dark web disturbing 0:00:23

Dark web disturbing videos #shorts

Let's Create a 0:00:50

Let's Create a 3D CSS art of Pyramid #programming #coding #developer #webdevelopment #css#html#...

How to build 0:00:50

How to build pyramid animation using HTML,CSS | 100 days CSS challenge day 3 challenge #shorts

Ana Tudor | 0:50:39

Ana Tudor | 3D Transforms | CSS Day 2014

Spinners: CSS Tutorial 0:17:49

Spinners: CSS Tutorial (Day 21 of CSS3 in 30 Days)

CSS Only Animated 0:04:36

CSS Only Animated Fancy Border Trick

Pyramid animation using 0:01:00

Pyramid animation using HTML and CSS #shorts

Pyramid animation css 0:00:53

Pyramid animation css | html

Pyramid 3d model 0:00:13

Pyramid 3d model animation css html #short #shorts #viral

The Pyramid Animation 0:01:00

The Pyramid Animation Pure CSS 2023.

Can you make 0:06:29

Can you make a pyramid using CSS ONLY ??|| creating shapes using CSS|| Alpha._. Tech

Modern Layouts: CSS 0:17:54

Modern Layouts: CSS Tutorial (Day 9 of CSS3 in 30 Days)

Folding a tetrahedron 0:29:19

Folding a tetrahedron (interactive, pure CSS 3D)

Energy Pyramid Using 0:00:11

Energy Pyramid Using Html Css Only

@supports Rule: CSS 0:01:13

@supports Rule: CSS Tutorial (Day 24 of CSS3 in 30 Days)

Комментарии
Автор

Your 'random' pyramid was so useful for my 'random' task!
Thank you very much! Great work!

stefanbirsan
Автор

I tried some of my understanding and tweaked code a little and it blew my mind. Not being pompous at all but the effect i got was amazing. Thanks for this BRAD !!!

IshanKesharwani
Автор

Your editor is definetly in the good mood =)

КонстантинКленков-це
Автор

Thank you Brad! good idea. You're a genius man, had a good laugh also.

nocturno
Автор

Just wow.... I'll definitely follow from now...

vishaal
Автор

Hi Brad, I am following this series for 2 weeks. And this is the first video that is beyond my comprehension. I couldn`t grasp it. I have a question why don`t you use predefined things like IDK how you hide the triangle parts but was it not possible by using visibility: hidden ???
This kind of questions arise when I see this video.
Kindly reply!

fahadkhanchughtai
Автор

This guy is very funny! Thanks, good video bro!

sacibrancooficial
Автор

great video. Howabout the :hover on the .triangle.top:hover{}.What do you think?

tolumideshopein
Автор

Oh, gosh, I thought it will a useless lesson. But it turns out to be excellent!

AdamSchelenbergCom
Автор

Do you have this series in a playlist? If not, that would be very helpful - thanks. :)

*Edit:* For anyone else who was wondering the playlist was placed in the video description. Thanks for your hard work freeCodeCamp.

makehumanitygreatagain
Автор

problem is that if the screen size (resolution) is higher then it no longer looks like a normal triangle.

JNET_Reloaded