Web Code Logics

Improve your skills

January 18, 2017

How to Blink or Flashing Text or Image Using Simple CSS3 with Example

, , , No comments

Introduction:
In this article, we will learn about How to blink or flashing any text or image using simple CSS3 animation effect with example. or How to use animation effect in CSS3 to blink or flashing any text or image. 

The preview are shown as below-

How to Blink or Flashing Text or Image Using Simple CSS3 with Example


To blink/flash text or image write the code as shown below-

HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>How to Blink or Flashing Text or Image Using Simple CSS3 with Example | webcodelogics.com</title>
    <style>
        .blink {
            -webkit-animation-name: blinker;
            -webkit-animation-duration: 1s;
            -webkit-animation-timing-function: linear;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-name: blinker;
            -moz-animation-duration: 1s;
            -moz-animation-timing-function: linear;
            -moz-animation-iteration-count: infinite;
            animation-name: blinker;
            animation-duration: 1s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }

        @-moz-keyframes blinker {
            0% { opacity: 1.0; } 
            50% { opacity: 0.0; } 
            100% { opacity: 1.0; }
        }

        @-webkit-keyframes blinker {
            0% { opacity: 1.0; }
            50% { opacity: 0.0; }
            100% { opacity: 1.0; }
        }

        @keyframes blinker {
            0% { opacity: 1.0; } 
            50% { opacity: 0.0; } 
            100% { opacity: 1.0; }
        }
        
        .block { text-align: center; width: 100%; }
        .block span{ font-size:25px; font-family:Arial; }
        .block img{ vertical-align: middle; margin-right:25px; }
    </style>
</head>
<body style="background: #E0EDFA;">
    <div class="block">
        <img src="http://webcodelogics.com/Images/logo.png" class="blink" alt="webcodelogics.com" />
        <br />
        <span class="blink">webcodelogics.com</span>
    </div>
</body>
</html>

Now save the code and run on browser to view the blink/flash text animation effect.

Demo:

How to Blink or Flashing Text or Image Using Simple CSS3 with Example webcodelogics.com


Read More

January 10, 2017

Create Animated Pie Chart Using CSS3 and Simple jQuery with Example

, , , , , , No comments

In this article, we will learn about how to create animated pie chart using css3 and simple jQuery with example and live demo.

 The preview are shown as below-

create-animated-pie-chart-using-css3-and-simple-jquery-with-example | webcodelogics.com


To create animated pie chart write the code as shown below-

HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Create Animated Pie Chart Using CSS3 and Simple jQuery with Example | webcodelogics.com</title>
    <!-- jQuery Library Link -->
    <script src="https://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
    <style>
        .circular_chart_main {
            width: 330px;
            margin: 100px auto;
            border: 1px solid #ddd;
            font-family: Arial;
            padding: 15px;
        }

        .circular_chart_main h4.head {
            border-left: medium none;
            font-size: 12px;
            font-weight: bold;
            margin-bottom: 7px;
        }

        .circular_chart_main h4.head span {
            float: right;
        }

        @keyframes bake-graph {
            from {
                transform: rotate(0deg) translate3d(0,0,0);
            }
        }

        .chart {
            display: inline-block;
            vertical-align: middle;
        }

        .graph {
            height: 150px;
            width: 150px;
            margin-right: 15px;
            position: relative;
        }

        .graph::before {
            content: "";
            display: block;
            position: absolute;
            z-index: 1;
            width: 70px;
            height: 70px;
            background: #EEE;
            border-radius: 50%;
            top: 40px;
            left: 40px;
        }

        .slice {
            position: absolute;
            width: 150px;
            height: 150px;
            clip: rect(0px, 150px, 150px, 75px);
            animation: bake-graph 1s;
            color: #333;
        }

        .slice span {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            background-color: black;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            clip: rect(0px, 150px, 150px, 75px);
        }

        .legend {
            list-style-type: none;
            padding: 0;
            margin: 0;
            font-size: 13px;
            width: 155px;
        }

        .legend li {
            line-height: 12px;
            height: 12px;
            margin-bottom: 9px;
            padding-left: 7px;
            border-left: 12px solid #ddd;
        }

        .legend em {
            font-style: normal;
        }

        .legend span {
            float: right;
        }
    </style>
    <script>
        $(document).ready(function () {
            createGraph(".circular_chart_main .chart .legend", ".circular_chart_main .chart.graph");
        });

        function createGraph(dataElement, graphElement) {
            var listData = [];
            $(dataElement + " span").each(function () {
                listData.push(Number($(this).html()));
            });
            var listTotal = 0;
            for (var i = 0; i < listData.length; i++) {
                listTotal += listData[i];
            }
            var offset = 0;
            var color = ["#FF6347", "#6495ED", "#FFA500", "#6B8E23", "#CA6FF8"];
            for (var i = 0; i < listData.length; i++) {
                var size = sliceSize(listData[i], listTotal);
                iterateSlices(size, graphElement, offset, i, 0, color[i]);
                $(dataElement + " li:nth-child(" + (i + 1) + ")").css("border-color", color[i]);
                offset += size;
            }
        }

        function sliceSize(dataNum, dataTotal) {
            return (dataNum / dataTotal) * 360;
        }

        function addSlice(sliceSize, graphElement, offset, sliceID, color) {
            $(graphElement).append("<div class='slice " + sliceID + "'><span></span></div>");
            var offset = offset - 1;
            var sizeRotation = -179 + sliceSize;
            $(graphElement + " ." + sliceID).css({
                "transform": "rotate(" + offset + "deg) translate3d(0,0,0)"
            });
            $(graphElement + " ." + sliceID + " span").css({
                "transform": "rotate(" + sizeRotation + "deg) translate3d(0,0,0)",
                "background-color": color
            });
        }

        function iterateSlices(sliceSize, graphElement, offset, dataCount, sliceCount, color) {
            var sliceID = "s" + dataCount + "-" + sliceCount;
            var maxSize = 179;
            if (sliceSize <= maxSize) {
                addSlice(sliceSize, graphElement, offset, sliceID, color);
            } else {
                addSlice(maxSize, graphElement, offset, sliceID, color);
                iterateSlices(sliceSize - maxSize, graphElement, offset + maxSize, dataCount, sliceCount + 1, color);
            }
        }

    </script>
</head>
<body>
    <div class="circular_chart_main">
        <div class="chart graph"></div>
        <div class="chart">
            <h4 class="head">Total Vehicals <span>310</span></h4>
            <ul class="legend">
                <li><em>Cars </em><span>120</span></li>
                <li><em>Motorbikes </em><span>75</span></li>
                <li><em>Vans </em><span>45</span></li>
                <li><em>Buses </em><span>60</span></li>
                <li><em>Trains </em><span>10</span></li>
            </ul>
        </div>
    </div>
</body>
</html>

Now save the file and run on browser to view the animated pie chart.

 Live Demo:

Total Vehicals 310

  • Cars 120
  • Motorbikes 75
  • Vans 45
  • Buses 60
  • Trains 10


Read More

January 04, 2017

Pure CSS / CSS3 Text Typing Animation Effect with Example

, , , , No comments

In this article, we will discuss about how to implement text typing animation effect on our web page using CSS/CSS3 with example.
Write the code as shown below-

HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Pure CSS / CSS3 Text Typing Animation Effect with Example</title>
    <style>
        * {
            box-sizing: inherit;
        }

        body {
            background-color: #2a2a28;
            font-family: "Fira Mono", monospace;
        }

        .typewriter, .item {
            height: 30px;
            display: block;
        }

        .typewriter {
            overflow: hidden;
            color: lime;
        }

        .item {
            position: relative;
            font-size: 17px;
            animation: line_change_animation 18s steps(3) infinite;
        }

        .inner_item {
            display: inline-block;
            position: relative;
            line-height: 1;
        }

        .inner_item:after {
            content: "";
            position: absolute;
            top: -1px;
            right: 0;
            bottom: -2px;
            left: 0;
            border-left: 1px solid lime;
            background-color: #2a2a28;
            animation: typing_animation 3s steps(36) infinite alternate;
        }

        /* The typing animation effect */
        @keyframes typing_animation {
            0% {
                left: 0;
                margin-right: auto;
            }

            100% {
                left: 100%;
                margin-left: .6em;
                margin-right: -.6em;
            }
        }

        /* The line change animation effect */
        @keyframes line_change_animation {
            0% {
                top: 0;
            }

            100% {
                top: -90px;
            }
        }
    </style>
</head>
<body>
    <div class="typewriter">
        <span class="item"><span class="inner_item">Simple typing animation with css3.</span></span>
        <span class="item"><span class="inner_item">Created by www.webcodelogics.com :)</span></span>
        <span class="item"><span class="inner_item">Like & Share with your friends...</span></span>
    </div>
</body>
</html>

Now save the file and run on browser to view the text typing animation effect.

Preview:
pure-css-css3-text-typing-animation-effect-with-example


Live Demo:

Simple typing animation with css3. Created by www.webcodelogics.com :) Like & Share with your friends...




Read More
Subscribe to: Posts (Atom)

Subscribe for Latest Update

Popular Posts