Saturday, January 27, 2018

Skptricks CSS html html5 web development Create Ripple Animation Effect Using Css

Create Ripple Animation Effect Using Css

by on January 27, 2018 in , , ,
In this tutorial we are going to learn how to create ripple animation on hover. All this animation effect is created with the help of CSS3 Keyframe property. Here we have provided three different type of ripple animation effect on hover the HTML element/button.
Create Ripple Animation Effect Using Css




Check out our blog archive on the topic if you’re looking to learn about Ripple Animation Effect.


Lets see the complete example to perform Ripple Animation Effect on hover HTML Element.
<html>

<head>
    <style>
        body {
            font-family: Verdana, Geneva, sans-serif;
            background-color: #EEE;
        }
        div {
            position: relative;
            margin: 12px;
            left: 22px;
        }
        #list {
            width: 300px;
            height: 55px;
            border: 1px solid #d6d7da;
            padding: 0px 15px 15px 15px;
            border-radius: 5px;
            font-family: arial;
            line-height: 16px;
            color: #333333;
            font-size: 14px;
            background: #ffffff;
            top: 12px;
            padding: 16px;
            border-radius: 2px;
            font-size: 28px;
            text-align: center;
        }
        .button1 {
            width: 200px;
            border: none;
            cursor: pointer;
            color: white;
            padding: 16px;
            border-radius: 2px;
            font-size: 28px;
            text-align: center;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
            background: #ff4040;
        }
        .button2 {
            width: 200px;
            border: none;
            cursor: pointer;
            color: white;
            padding: 16px;
            border-radius: 2px;
            font-size: 28px;
            text-align: center;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
            background: #ffa96b;
        }
        .animation1 {
            position: absolute;
            width: 75px;
            height: 75px;
            background-color: #FFF;
            top: 0;
            left: 55px;
            top: -13px;
            transform: scale(0);
            opacity: 0.5;
            border-radius: 300px;
        }
        .animation2 {
            position: absolute;
            width: 230px;
            height: 70px;
            background-color: #FFF;
            top: -14px;
            left: -10px;
            transform: scale(0);
            opacity: 0.5;
        }
        .animation3 {
            position: absolute;
            width: 330px;
            height: 90px;
            background-color: #FFCCCC;
            top: -14px;
            left: -10px;
            transform: scale(0);
            opacity: 0.5;
        }
        .button1:hover > .animation1 {
            animation: ripple1 2s;
        }
        .button2:hover > .animation2 {
            animation: ripple2 2s;
        }
        #list:hover > .animation3 {
            animation: ripple2 2s;
        }
        @keyframes ripple1 {
            0% {
                transform: scale(0);
            }
            20% {
                transform: scale(1);
                opacity: 0.3;
            }
            100% {
                transform: scale(1);
                opacity: 0;
            }
        }
        @keyframes ripple2 {
            0% {
                transform: scaleX(0);
            }
            20% {
                transform: scaleX(1);
                opacity: 0.3;
            }
            100% {
                transform: scaleX(1);
                opacity: 0;
            }
        }
    </style>
</head>

<body>

    <div class="button1">Animation 1
        <div class="animation1"></div>
    </div>
    <br>
    <div class="button2">Animation 2
        <div class="animation2"></div>
    </div>
    <br>
    <div id="list"> Animation 3
        <div class="animation3"></div>
    </div>
</body>

</html>

Output:

This all about the ripple animation effect on hover the HTML element/button. Let us know in case of any issues in comment section below.

Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/Create%20Ripple%20Animation%20Effect%20Using%20Css



By at
Tags: , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)