पृष्ठभूमि वीडियो

1880 ASKMUHAMMAD_2K

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

29 September 2025

पृष्ठभूमि छवि के साथ CSS लोडिंग एनीमेशन

26 September 2025

पृष्ठभूमि छवि के साथ CSS लोडिंग एनीमेशन

28 November 2024

मैट्रिक्स एनिमेटेड पृष्ठभूमि

HTML

CSS

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: sans-serif;
  }
  
  .hero {
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(12, 3, 51, 0.3), rgba(12, 3, 51, 0.3));
    position: relative;
    padding: 0 5%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .content {
    text-align: center;
  }
  
  .content h1 {
    font-size: 160px;
    color: #fff;
    font-weight: 600;
    transition: 0.5s;
  }
  
  .content h1:hover {
    -webkit-text-stroke: 2px white;
    color: transparent;
  }
  
  .content a {
    text-decoration: none;
    display: inline-block;
    color: #fff;
    font-size: 24px;
    border: 2px solid white;
    padding: 14px 50px;
    margin-top: 20px;
    transition: 0.5s;
  }
  
  .content a:hover {
    background: #fff;
    color: #000;
  }
  
  .back-video {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
  }
  
  @media (min-aspect-ratio: 16/9) {
    .back-video {
      width: 100%;
      height: auto;
    }
  }
  
  @media (max-aspect-ratio: 16/9) {
    .back-video {
      width: auto;
      height: 100%;
    }
  }

अनुशंसित

पृष्ठभूमि छवि के साथ CSS लोडिंग एनीमेशन

पृष्ठभूमि छवि के साथ CSS लोडिंग एनीमेशन

मैट्रिक्स एनिमेटेड पृष्ठभूमि

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS