KOMPOOS.NL

dots - css

home » css » dots.html

sitemap


dots .....

uitleg dots procedure

Deze pagina is niets meer dan een leuke gadget. IE kan niet overweg met keyframes, en opera is ook niet van de partij. Tot het moment dat alle browsers deze code kunnen parsen, is het niet meer dan een leuke demonstratie. Hieronder staat de CSS- en de html-code.

html code dots procedure


<div id="css-dots">
    dots <span><span>.</span><span>.</span><span>.</span><span>.</span><span>.</span></span>
</div>

stylesheet van de dots procedure


<style type="text/css">
        @-webkit-keyframes dot-bounce{
                0%{top:0}
                55%{top:0;
                        text-shadow:0px 0px 0px rgba(0,0,0,0.5)}
                60%{top:-20px;
                        text-shadow:5px 20px 5px rgba(0,0,0,0.5)}
                80%{top:4px;
                        text-shadow:0px 0px 0px rgba(0,0,0,0.5)}
                90%{top:-3px;
                        text-shadow:0px 3px 1px rgba(0,0,0,0.5)}
                95%{top:1px;
                        text-shadow:0px 0px 0px rgba(0,0,0,0.5)}
                100%{top:0;
                        text-shadow:0px 0px 0px rgba(0,0,0,0.5)}}
        @-moz-keyframes dot-bounce{
                0%{top:0}
                55%{top:0;
                        text-shadow:0px 0px 0px rgba(0,0,0,0.5)}
                60%{top:-20px;
                        text-shadow:5px 20px 5px rgba(0,0,0,0.5)}
                80%{top:4px;
                        text-shadow:0px 0px 0px rgba(0,0,0,0.5)}
                90%{top:-3px;
                        text-shadow:0px 3px 1px rgba(0,0,0,0.5)}
                95%{top:1px;
                        text-shadow:0px 0px 0px rgba(0,0,0,0.5)}
                100%{top:0;
                        text-shadow: 0px 0px 0px rgba(0,0,0,0.5)}}
        #css-dots{
                background:#a00;
                width:220px;
                padding:30px;
                border-radius:15px;
                text-align:center;
                font-size:28px;
                font-style:italic;
                color:#fff;
                left:40%}
        #css-dots span{
                font-size:60px; 
                line-height:10px;
                text-shadow:0px 0px 0px rgba(0,0,0,0.5)}
        #css-dots span span{
                -webkit-animation-duration:1800ms;
                -webkit-animation-iteration-count:infinite;
                -webkit-animation-name:dot-bounce;
                -moz-animation-duration:1800ms;
                -moz-animation-iteration-count:infinite;
                -moz-animation-name:dot-bounce;
                padding:1px;
                position:relative}
        #css-dots span span:nth-child(1){
                -webkit-animation-delay:1000ms;
                -moz-animation-delay:1000ms}
        #css-dots span span:nth-child(2){
                -webkit-animation-delay:1200ms;
                -moz-animation-delay:1200ms}
        #css-dots span span:nth-child(3){
          -webkit-animation-delay:1400ms;
          -moz-animation-delay:1400ms}
        #css-dots span span:nth-child(4){
                -webkit-animation-delay:1600ms;
                -moz-animation-delay:1600ms}
        #css-dots span span:nth-child(5){
                -webkit-animation-delay:1800ms;
                -moz-animation-delay:1800ms}
</style>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.