CSS3 Lingkaran Berputar di Hearder Blog

Yo Fans blogger,kali ini gw akan share cara membuat lingkaran berputar yang ada diheader blog gw dan tentunnya menggunakan CSS3 dan tanpa basa-basi lagi karena gw males ngetik =,=V ini dia tutorialnya:

1. CSS3 berputar yang pertama



- Taruh code CSS dibawah ini tepat diatas code ]]></b:skin>:

.ball{background-color:rgba(0,0,0,0); border:5px solid rgba(0,183,229,0.9); opacity:.9; border-top:5px solid rgba(0,0,0,0); border-left:5px solid rgba(0,0,0,0); border-radius:50px; box-shadow:0 0 35px #2187e7; width:50px; height:50px; margin:0 auto; -moz-animation:spin .5s infinite linear; -webkit-animation:spin .5s infinite linear}.ball1{background-color:rgba(0,0,0,0); border:5px solid rgba(0,183,229,0.9); opacity:.9; border-top:5px solid rgba(0,0,0,0); border-left:5px solid rgba(0,0,0,0); border-radius:50px; box-shadow:0 0 15px #2187e7; width:30px; height:30px; margin:0 auto; position:relative; top:-50px; -moz-animation:spinoff .5s infinite linear; -webkit-animation:spinoff .5s infinite linear}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(360deg)}}@-moz-keyframes spinoff{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(-360deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@-webkit-keyframes spinoff{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(-360deg)}}

- Taruh code HTML dibawah ini tepat dibawah code <div id='header-wrapper'>

<div class='ball'/>
<div class='ball1'/>

- Klik save template

2. CSS3 berputar yang ke-2



- Taruh code CSS dibawah ini tepat diatas code ]]></b:skin>:

.circle{background-color:rgba(0,0,0,0); border:5px solid rgba(0,183,229,0.9); opacity:.9; border-right:5px solid rgba(0,0,0,0); border-left:5px solid rgba(0,0,0,0); border-radius:50px; box-shadow:0 0 35px #2187e7; width:50px; height:50px; margin:0 auto; -moz-animation:spinPulse 1s infinite ease-in-out; -webkit-animation:spinPulse 1s infinite linear}.circle1{background-color:rgba(0,0,0,0); border:5px solid rgba(0,183,229,0.9); opacity:.9; border-left:5px solid rgba(0,0,0,0); border-right:5px solid rgba(0,0,0,0); border-radius:50px; box-shadow:0 0 15px #2187e7; width:30px; height:30px; margin:0 auto; position:relative; top:-50px; -moz-animation:spinoffPulse 1s infinite linear; -webkit-animation:spinoffPulse 1s infinite linear}@-moz-keyframes spinPulse{0%{-moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7}50%{-moz-transform:rotate(145deg); opacity:1}100%{-moz-transform:rotate(-320deg); opacity:0}}@-moz-keyframes spinoffPulse{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(360deg)}}@-webkit-keyframes spinPulse{0%{-webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7}50%{-webkit-transform:rotate(145deg); opacity:1}100%{-webkit-transform:rotate(-320deg); opacity:0}}@-webkit-keyframes spinoffPulse{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}

- Taruh code HTML dibawah ini tepat dibawah code <div id='header-wrapper'>

<div class='circle'/>
<div class='circle1'/>

- Klik save template

Sekian dulu tutorial dari FERNAN lebih dan kurangnya mohan maaf karena saya hanyalah manusia biasa yang masih harus belajar

Salam Blogger!