Skip to content

CSS Animation – Bulb

HTML CODE:

<!DOCTYPE html>
<html>
<head>
    <title>page</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="animation31.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
</head>
<body>

    <div class="card">
        <div class="imgBox">
            <div class="image"></div>
            <div class="details">
                <h2>HTML AND CSS</h2>
                Edin is a fully responsive theme that helps you to create a strong–yet beautiful–online presence for your business. Edin's layout adjusts itself depending on the device you are using. This means your site will look good not only on laptop browsers, but also on devices with smaller screens, such as the iPad and iPhone.
            </div>
        </div>
    </div>

</body>
</html>

CSS CODE:

@import url('https://fonts.googleapis.com/css?family=Quicksand');
body{
    margin: 0;
    padding: 0;
    background-color: #708c00;
    font-family: 'Quicksand', sans-serif;
}
.card{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 400px;
    background: #fff;
    transform-style: preserve-3d;
    transform: translate(-50%,-50%) perspective(2000px);
    box-shadow: inset 300px 0 50px rgba(0,0,0,.5), 0 20px 100px rgba(0,0,0,.5);
    transition: 1s;
}
.card:hover{
    transform: translate(-50%,-50%) perspective(2000px) rotate(-10deg);
    box-shadow: inset 20px 0 50px rgba(0,0,0,.5), 0 10px 100px rgba(0,0,0,.5);
}
.card:before{
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
    height: 5px;
    background: #475b02;
    transform-origin: bottom;
    transform: skewX(-45deg);
}
.card:after{
    content: "";
    position: absolute;
    top:0;
    right: -5px;
    width:5px;
    height: 100%;
    background: #7ea301;
    transform-origin: left;
    transform: skewY(-45deg);
}
.image{
    background: url(https://images.clipartlogo.com/files/istock/previews/1055/105568341-green-light-bulb-on-hand-drawn-business-icons-background.jpg);
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
    position: relative;
    transform-origin: left;
    transition: 1s cubic-bezier(.15,1.7,.84,.58);
    z-index: 1;
}
.card:hover .image{
    transform: rotateY(-135deg);
}
.card .details{
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    padding: 20px;
    z-index: -1;
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: