नेविगेशन होवर प्रभाव शुद्ध सीएसएस

अनुशंसित

22 April 2023

सीएसएस एनिमेटेड आतिशबाज़ी, जुगनू, सूरजमुखी

HTML

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');
* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #000;
    overflow: hidden;
}
ul li {
    list-style: none;
}
ul li a {
    position: relative;
    display: block;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    font-size: 6.5em;
    font-weight: 900;
    text-decoration: none;
    line-height: 1.2em;
}
ul li a:hover {
    color: #f4f400;
    -webkit-text-stroke: 1px #000;
    transition: 0.5s;
}

ul li a:before,
ul li a:after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
  transition: 0.5s;}

ul li a:hover:before {
    color: #f00;
    z-index: 1;
    -webkit-text-stroke: 1px #000;
    transform: translate(10px,-10px);
}
ul li a:hover:after {
    color: #0ff;
    z-index: 2;
    -webkit-text-stroke: 1px #000;
    transform: translate(20px,-20px);
}

नेविगेशन होवर प्रभाव शुद्ध सीएसएस

अनुशंसित

सीएसएस ड्रॉपडाउन मेन्यू

सीएसएस सोशल आइकन्स टॉग्लर

सीएसएस एनिमेटेड आतिशबाज़ी, जुगनू, सूरजमुखी

HTML

CSS

JS

अनुशंसित

सीएसएस ड्रॉपडाउन मेन्यू

सीएसएस सोशल आइकन्स टॉग्लर

सीएसएस एनिमेटेड आतिशबाज़ी, जुगनू, सूरजमुखी

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS