Front End Technology Articles - Page 658 of 860

To create rotate out down left animation effect with CSS, you can try to run the following code −ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes rotateOutDownLeft {             0% {                -webkit-transform-origin: left bottom;                -webkit-transform: rotate(0);                opacity: 1;             }             100% {                -webkit-transform-origin: left bottom;                -webkit-transform: rotate(90deg);                opacity: 0;             }          }          @keyframes rotateOutDownLeft {             0% {                transform-origin: left bottom;                transform: rotate(0);                opacity: 1;             }             100% {                transform-origin: left bottom;                transform: rotate(90deg);                opacity: 0;             }          }          .rotateOutDownLeft {             -webkit-animation-name: rotateOutDownLeft;             animation-name: rotateOutDownLeft;          }                           Reload page                function myFunction() {             location.reload();          }          

To create rotate out animation effect with CSS, you can try to run the following code −ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes rotateOut {             0% {                -webkit-transform-origin: center center;                -webkit-transform: rotate(0);                opacity: 1;             }             100% {                -webkit-transform-origin: center center;                -webkit-transform: rotate(200deg);                opacity: 0;             }          }          @keyframes rotateOut {             0% {                transform-origin: center center;                transform: rotate(0);                opacity: 1;             }             100% {                transform-origin: center center;                transform: rotate(200deg);                opacity: 0;             }          }          .rotateOut {             -webkit-animation-name: rotateOut;             animation-name: rotateOut;          }                           Reload page                function myFunction() {             location.reload();          }          

To create a rotate in upright animation effect with CSS, you can try to run the following code −ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes rotateInUpRight {             0% {                -webkit-transform-origin: right bottom;                -webkit-transform: rotate(-90deg);                opacity: 0;             }             100% {                -webkit-transform-origin: right bottom;                -webkit-transform: rotate(0);                opacity: 1;             }          }          @keyframes rotateInUpRight {             0% {                transform-origin: right bottom;                transform: rotate(-90deg);                opacity: 0;             }             100% {                transform-origin: right bottom;                transform: rotate(0);                opacity: 1;             }          }          .rotateInUpRight {             -webkit-animation-name: rotateInUpRight;             animation-name: rotateInUpRight;          }                           Reload page                function myFunction() {             location.reload();          }          

To create a rotate in up left animation effect with CSS, you can try to run the following code −ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes rotateInUpLeft {             0% {                -webkit-transform-origin: left bottom;                -webkit-transform: rotate(0);                opacity: 1;             }             100% {                -webkit-transform-origin: left bottom;                -webkit-transform: rotate(-90deg);                opacity: 0;             }          }          @keyframes rotateInUpLeft {             0% {                transform-origin: left bottom;                transform: rotate(0);                opacity: 1;             }             100% {               -transform-origin: left bottom;               -transform: rotate(-90deg);               opacity: 0;             }          }          .rotateInUpLeft {             -webkit-animation-name: rotateInUpLeft;             animation-name: rotateInUpLeft;          }                           Reload page                        function myFunction() {             location.reload();          }          

Use the :first-line element to add special effects to the first line of elements in the document. ExampleYou can try to run the following code to add special styles to the first line of textLive Demo                    p:first-line {             text-decoration: underline;          }          p.noline:first-line {             text-decoration: none;          }                     This line would not have any underline because this ... Read More

To create a wobble animation effect with CSS, you can try to run the following code −ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: ... Read More

To flatten the color depth, you need to create an X-Ray.The following parameter is used in this filter −S.NoParameter & Description1XrayGrayscales and flattens the color depth.ExampleYou can try to run the following code to create an X-Ray effect −Live Demo                   CSS Tutorials    

To create a rotate in down animation effect with CSS, you can try to run the following code −ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes rotateInDownRight {             0% {                -webkit-transform-origin: right bottom;                -webkit-transform: rotate(90deg);                opacity: 0;             }             100% {                -webkit-transform-origin: right bottom;                -webkit-transform: rotate(0);                opacity: 1;             }          }          @keyframes rotateInDownRight {             0% {                transform-origin: right bottom;                transform: rotate(90deg);                opacity: 0;             }             100% {                transform-origin: right bottom;                transform: rotate(0);                opacity: 1;             }          }          .rotateInDownRight {             -webkit-animation-name: rotateInDownRight;             animation-name: rotateInDownRight;          }                           Reload page                function myFunction() {             location.reload();          }          

Use the :after element to add some content after an element. ExampleYou can try to run the following code to insert some content after an element with CSS −Live Demo                    p:after          {             content: url(/images/bullet.gif)          }                     This line will be succeeded by a bullet.       This line will be succeeded by a bullet.       This line will be succeeded by a bullet.    

To create a rotate in animation effect with CSS, you can try to run the following code −ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes rotateIn {             0% {                -webkit-transform-origin: center center;                -webkit-transform: rotate(-200deg);                opacity: 0;             }             100% {                -webkit-transform-origin: center center;                -webkit-transform: rotate(0);                opacity: 1;             }          }          @keyframes rotateIn {             0% {                transform-origin: center center;                transform: rotate(-200deg);                opacity: 0;             }             100% {                transform-origin: center center;                transform: rotate(0);                opacity: 1;             }          }          .rotateIn {             -webkit-animation-name: rotateIn;             animation-name: rotateIn;          }                           Reload page                       function myFunction() {             location.reload();          }