zhishaofei3
/ dabblet.css
Created
August 5, 2016 04:44
— forked from csssecrets/dabblet.css
Typing animation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Typing animation | |
| */ | |
| @keyframes typing { | |
| from { width: 0 } | |
| } | |
| @keyframes caret { | |
| 50% { border-right-color: transparent; } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ul { | |
| list-style: none; | |
| width: 880px; | |
| } | |
| ul li { | |
| width: 200px; | |
| height: 150px; | |
| background-color: #888; | |
| margin: 10px; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body, p, img, dl, dt, dd, ul, ol, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } | |
| body { position: relative; font: 12px/1.2em Simsun, Arial; color: #666; text-align: left; background: #000; } | |
| ul, ol { list-style: none; } | |
| img { border: 0 none; } | |
| input, select { vertical-align: middle; } | |
| table { border-collapse: collapse; } | |
| s, em, i { font-style: normal; text-decoration: none; } | |
| a { outline: none; text-decoration: none; } | |
| a:hover { text-decoration: underline; } | |
| .clear { *zoom: 1; } |
zhishaofei3
/ index.html
Created
August 2, 2016 15:59
Isotropolis - 3D City Landscape with pure CSS3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="world" class="world"> | |
| <h1 class="ground">ground</h1> | |
| <ul class="building block-1">Building | |
| <li class="top">roof</li> | |
| <li class="west">west wall</li> | |
| <li class="north">north wall</li> | |
| <li class="east">east wall</li> | |
| <li class="south">south wall</li> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @keyframes go { | |
| from { background: hsl(0,100%,50%); } | |
| 12.5% { background: hsl(45,100%,50%); } | |
| 25% { background: hsl(90,100%,50%); } | |
| 37.5% { background: hsl(135,100%,50%); } | |
| 50% { background: hsl(180,100%,50%); } | |
| 62.5% { background: hsl(225,100%,50%); } | |
| 75% { background: hsl(270,100%,50%); } | |
| 87.5% { background: hsl(315,100%,50%); } | |
| to { background: hsl(360,100%,50%); } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .clock { | |
| width: 100px; | |
| height: 100px; | |
| background-color: #333; | |
| position: relative; | |
| border-radius: 50%; | |
| } | |
| .clock:after { | |
| content: ""; | |
| width: 50px; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .clock { | |
| width: 100px; | |
| height: 100px; | |
| background-color: #333; | |
| position: relative; | |
| border-radius: 50%; | |
| } | |
| .clock:after { | |
| content: ""; | |
| width: 50px; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| img { | |
| -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); | |
| webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); | |
| transform: rotate(0deg); | |
| transition: 1s; | |
| } | |
| img:hover { | |
| transform: rotate(360deg); | |
| -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); | |
| webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| img { | |
| margin: 50%; | |
| -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); | |
| transform: rotate(0deg); | |
| transition: 1s; | |
| } | |
| img:hover { | |
| transform: rotate(360deg); | |
| -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); | |
| } |
zhishaofei3
/ dabblet.css
Created
July 26, 2016 07:07
— forked from csssecrets/dabblet.css
Marching ants border
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Marching ants border | |
| */ | |
| @keyframes ants { to { background-position: 100% 100% } } | |
| div { | |
| padding: 1em; | |
| border: 1px solid transparent; | |
| background: linear-gradient(white, white) padding-box, |