CSS ANIMATIONS @Dr Tech |HTML| |CSS| |WEBSITE| |TUTORIAL| |SOURCE CODE| ...

0 HTML And CSS Cooding August 12, 2022

HTML SOURCE CODE

<!DOCTYPE html>

<html>

<head>

<title></title>

<link rel="stylesheet" type="text/css" href="b.css">

</head>

<body>

<div class="conic"></div>

<div class="conic conic-demo"><FONT color="red">Welcome To My Channel</FONT> <font color="Green" size="5">Dr Tech</font></div>

</body>

</html>

CSS SOURCE CODE

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background: #000;}

, ::before, *::after {

box-sizing: border-box;}

@-webkit-keyframes rotate {

100% {transform: rotate(1turn);}}

@keyframes rotate {

100% {transform: rotate(1turn);}}

.conic {

position: relative;

z-index: 0;

width: 400px;

height: 300px;

margin: 20px;

border-radius: 10px;

overflow: hidden;

padding: 2rem;}

.conic::before {

content: "";

position: absolute;

z-index: -2;

left: -50%;

top: -50%;

width: 200%;

height: 200%;

background-color: blue;

background-repeat: no-repeat;

background-position: 0 0;

background-image: conic-gradient(transparent, yellow, transparent 30%);

-webkit-animation: rotate 4s linear infinite;

animation: rotate 4s linear infinite;}

.conic::after {

content: "";

position: absolute;

z-index: -1;

left: 6px;

top: 6px;

width: calc(100% - 12px);

height: calc(100% - 12px);

background: #000;

border-radius: 5px;}

.conic-demo::after {

-webkit-animation: opacityChange 5s infinite linear;

animation: opacityChange 5s infinite linear;}

@-webkit-keyframes opacityChange {

50% {opacity: 0.5;}

100% {opacity: 1;}}

@keyframes opacityChange {

50% {opacity: 0.5;}

100% {opacity: 1;}}

Tags

HTML CSS CSS_GALLERY CSS_IMAGE_GALLERY CSS_ANIMATION

Post a Comment

* Please Don't Spam Here. All the Comments are Reviewed by Admin.