├── img ├── sd.webp ├── whit.jpg └── AdobeStock_628261693_Preview.jpeg ├── index.html └── style.css /img/sd.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iqtidartara/Css-Animation-Card-Img/HEAD/img/sd.webp -------------------------------------------------------------------------------- /img/whit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iqtidartara/Css-Animation-Card-Img/HEAD/img/whit.jpg -------------------------------------------------------------------------------- /img/AdobeStock_628261693_Preview.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iqtidartara/Css-Animation-Card-Img/HEAD/img/AdobeStock_628261693_Preview.jpeg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Landing Page with Animations 8 | 9 | 10 | 11 |
12 |

Welcome to Our Website

13 |

This is a simple landing page with animations.

14 | 15 |
16 | 17 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | width: 100vw; 9 | height: 100vh; 10 | background: #222; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | } 15 | .cube{ 16 | position: relative; 17 | width: 300px; 18 | height: 300px; 19 | transform-style: preserve-3d; 20 | 21 | transform: rotateX(-30deg); 22 | animation: animate 8s linear infinite; 23 | } 24 | @keyframes animate{ 25 | 0%{ 26 | transform: rotateX(-30deg) rotateY(0deg); 27 | } 28 | 100%{ 29 | transform:rotateX(-30deg) rotateY(360deg); 30 | } 31 | } 32 | 33 | .cube div{ 34 | top: 0; 35 | left: 0; 36 | width: 100%; 37 | height: 100%; 38 | transform-style: preserve-3d; 39 | } 40 | .cube div span { 41 | position: absolute; 42 | color: white; 43 | font-size: 50px; 44 | font-weight: 600; 45 | text-align: center; 46 | display: flex; 47 | align-items: center; 48 | justify-content: center; 49 | top: 0; 50 | left: 0; 51 | width: 100%; 52 | height: 100%; 53 | background: linear-gradient(#151515,#00ce00); 54 | transform: rotate Y( calc(90deg * var(--i))) translate Z(150px); 55 | } 56 | .cube div span img { 57 | width: 400px; 58 | height: 400px; 59 | border-radius: 12rex; 60 | } 61 | .top{ 62 | position: absolute; 63 | top: 0; 64 | left: 0; 65 | width: 300px; 66 | height: 300px; 67 | background: #222; 68 | transform: rotate X(90deg) translate Z(150px); 69 | } 70 | 71 | .top::before{ 72 | content: ""; 73 | position: absolute; 74 | top: 0; 75 | left: 0; 76 | width: 300px; 77 | height: 300px; 78 | background: #0f0; 79 | transform: translate Z(-380px); 80 | filter: blur(20px); 81 | box-shadow: 0 0 120px rgba( 0,255 , 0 ,0.2), 0 0 200px rgba(0,255,0 , 0.4), 0 0 300px rgba(0,255,0,0.6), 0 0 400px rgba(0,255,0,0.8), 0 0 500px rgba(0, 255 , 0 ,1); 82 | 83 | } --------------------------------------------------------------------------------