VN-Lives: Thiết kế thẻ div với hiệu ứng động ánh sáng lazer bằng CSS.

Bài viết này mình sẽ hướng dẫn cách tạo một hiệu ứng động ánh sáng lazer chạy qua chạy lại nên một thẻ div, bài mẫu này tuy hơi xấu nhưng nêu các bạn chịu edit lại cho phù hợp với blog hoặc website của mình thì nó cũng là một hiệu khá ấn tượng.

CSS Design DIV Animation Lazer Light:

<!DOCTYPE html>
<html>

    <head>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title> VNLIVES.NET - Div Animation Lazer Light</title>

        <style type="text/css">
            .polling_message {
            color:white;
            float:left;
            margin-right:2%;
            }

            .view_port {
            background-color:black;
            height:25px;
            width:100%;
            overflow: hidden;
            }

            .cylon_eye {
            color:white;
            height: 100%;
            width: 20%;

            background-color: red;
            background-image: -webkit-linear-gradient(left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
            background-image:    -moz-linear-gradient(left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
            background-image:      -o-linear-gradient(left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
            background-image:         linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);

            -webkit-animation: move_eye 4s linear 0s infinite alternate;
                -moz-animation: move_eye 4s linear 0s infinite alternate;
                   -o-animation: move_eye 4s linear 0s infinite alternate;
                    animation: move_eye 4s linear 0s infinite alternate;
            }

            @-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } }
               @-moz-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } }
                @-o-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } }
                    @keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } }
        </style>

    </head>

    <body>
        <div class="view_port">
        <div class="polling_message">
            Listening for dispatches
        </div>
        <div class="cylon_eye"></div>
        </div>
    </body>

</html>

Live Demo:

Listening for dispatches

VN-Lives

Thiết kế thẻ div với hiệu ứng động ánh sáng lazer bằng CSS. | CSS design lazer light animation on DIV.

No comments:

Post a Comment