CSS एनिमेटेड प्रोफ़ाइल और अधिसूचना

833 byby.createsite

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

अनुशंसित

23 August 2025

CSS ग्रिड एनीमेशन उदाहरण

15 May 2025

ईकॉमर्स वेबसाइट टेम्पलेट HTML CSS

2 October 2025

CSS एनीमेशन कंटेनर HTML संरचना

HTML

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #1F2434;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
}

.codigo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #272822;
    color: #F8F8F2;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 18px;
    padding: 20px;
    border-radius: 8px;
    white-space: pre-line;
    text-align: left;
    line-height: 1.6;
    max-height: 50%;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.selector       { color: #F92672; }
.property       { color: #66D9EF; }
.value-number   { color: #AE81FF; }
.value-string   { color: #E6DB74; }
.value-color    { color: #A6E22E; }
.brace          { color: #F8F8F2; }
.comment        { color: #75715E; }
.function       { color: #A6E22E; }

.animation-container {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50%;
    overflow: hidden;
    background: transparent;
}

.animation-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath opacity='0.1' fill='none' stroke='%23c0df9e' stroke-width='10' d='M0 0 L100 0 L100 100 L0 100 Z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center / cover;
    animation: scroll-warp 10s linear infinite; 
}

@keyframes scroll-warp {
  0% { transform: translateY(-50%) translateX(-50%) scale(1); }
  50% { transform: translateY(0) translateX(0) scale(1.1); }
  100% { transform: translateY(50%) translateX(50%) scale(1); }
}

अनुशंसित

CSS ग्रिड एनीमेशन उदाहरण

ईकॉमर्स वेबसाइट टेम्पलेट HTML CSS

CSS एनीमेशन कंटेनर HTML संरचना

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS