CSS
语言:
CSSSCSS
确定
/* Inspiration: http://drbl.in/lkMW */
@import url(http://fonts.googleapis.com/css?family=Raleway:100);
body {
background-color: #f36e5f;
}
body h1 {
font-family: 'Raleway', sans-serif;
font-weight: 100;
color: white;
font-size: 50px;
text-align: center;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.sublime-text {
margin: 25px auto 50px auto;
overflow: hidden;
width: 416px;
}
.sublime-text .screen {
position: relative;
height: 234px;
background-color: #404041;
border-radius: 8px;
color: white;
font-size: 30px;
}
.sublime-text .screen .top-bar {
width: 100%;
height: 30px;
position: absolute;
margin-top: 0;
background-color: #e6e7e8;
border-radius: 7px 7px 0 0;
}
.sublime-text .screen .top-bar .buttons {
position: absolute;
width: 8px;
height: 8px;
top: 12px;
background: #f36e5f;
border-radius: 50%;
left: 22px;
}
.sublime-text .screen .top-bar .buttons:after,
.sublime-text .screen .top-bar .buttons:before {
position: absolute;
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
}
.sublime-text .screen .top-bar .buttons:after {
left: 12px;
background-color: #5ec3af;
}
.sublime-text .screen .top-bar .buttons:before {
left: -12px;
background-color: #dc2510;
}
.sublime-text .screen .left-bar {
height: 100%;
width: 30px;
position: absolute;
padding-left: 8px;
background-color: #2e2e2f;
border-radius: 10px 0 0 7px;
}
.sublime-text .screen .left-bar:after {
position: absolute;
top: 24px;
content: ". . . . . . . . . .";
color: #59595b;
font-size: 42px;
line-height: 20px;
}
.sublime-text .screen .code {
position: absolute;
margin: 0 0 0 30px;
}
.sublime-text .screen .code .row {
position: relative;
padding: 8px;
height: 20px;
}
.sublime-text .screen .code .row p {
opacity: 0;
position: relative;
display: inline-block;
width: 90px;
height: 8px;
background-color: white;
border-radius: 4px;
}
.sublime-text .screen .code .row p.green {
width: 67px;
background-color: #5ec3af;
}
.sublime-text .screen .code .row p.orange {
width: 111px;
background-color: #f36e5f;
}
.sublime-text .screen .code .row p.blue {
width: 91px;
background-color: #43c7f4;
}
.sublime-text .screen .code .row p.purple {
width: 33px;
background-color: #9e76b4;
}
.sublime-text .screen .code .row p.yellow {
width: 66px;
background-color: #ffcc4e;
}
.sublime-text .screen .code .row p.transparent {
background-color: transparent;
width: 30px;
}
.sublime-text .screen .code .row p.cursor {
border-radius: 0;
margin-left: 1px;
background-color: #e6e7e8;
width: 2px;
-webkit-animation: blink 1s ease 4s infinite;
animation: blink 1s ease 4s infinite;
/* sublime text */
/* Input text animation */
}
.row1 > p:nth-child(1) {
-webkit-animation: show-text 100ms ease 500ms forwards;
animation: show-text 100ms ease 500ms forwards;
}
.row1 > p:nth-child(2) {
-webkit-animation: show-text 100ms ease 600ms forwards;
animation: show-text 100ms ease 600ms forwards;
}
.row1 > p:nth-child(3) {
-webkit-animation: show-text 100ms ease 700ms forwards;
animation: show-text 100ms ease 700ms forwards;
}
.row1 > p:nth-child(4) {
-webkit-animation: show-text 100ms ease 800ms forwards;
animation: show-text 100ms ease 800ms forwards;
}
.row1 > p:nth-child(5) {
-webkit-animation: show-text 100ms ease 900ms forwards;
animation: show-text 100ms ease 900ms forwards;
}
.row1 > p:nth-child(6) {
-webkit-animation: show-text 100ms ease 1000ms forwards;
animation: show-text 100ms ease 1000ms forwards;
}
.row1 > p:nth-child(7) {
-webkit-animation: show-text 100ms ease 1100ms forwards;
animation: show-text 100ms ease 1100ms forwards;
}
.row1 > p:nth-child(8) {
-webkit-animation: show-text 100ms ease 1200ms forwards;
animation: show-text 100ms ease 1200ms forwards;
}
.row1 > p:nth-child(9) {
-webkit-animation: show-text 100ms ease 1300ms forwards;
animation: show-text 100ms ease 1300ms forwards;
}
.row2 > p:nth-child(1) {
-webkit-animation: show-text 100ms ease 900ms forwards;
animation: show-text 100ms ease 900ms forwards;
}
.row2 > p:nth-child(2) {
-webkit-animation: show-text 100ms ease 1000ms forwards;
animation: show-text 100ms ease 1000ms forwards;
}
.row2 > p:nth-child(3) {
-webkit-animation: show-text 100ms ease 1100ms forwards;
animation: show-text 100ms ease 1100ms forwards;
}
.row2 > p:nth-child(4) {
-webkit-animation: show-text 100ms ease 1200ms forwards;
animation: show-text 100ms ease 1200ms forwards;
}
.row2 > p:nth-child(5) {
-webkit-animation: show-text 100ms ease 1300ms forwards;
animation: show-text 100ms ease 1300ms forwards;
}
.row2 > p:nth-child(6) {
-webkit-animation: show-text 100ms ease 1400ms forwards;
animation: show-text 100ms ease 1400ms forwards;
}
.row2 > p:nth-child(7) {
-webkit-animation: show-text 100ms ease 1500ms forwards;
animation: show-text 100ms ease 1500ms forwards;
}
.row2 > p:nth-child(8) {
-webkit-animation: show-text 100ms ease 1600ms forwards;
animation: show-text 100ms ease 1600ms forwards;
}
.row2 > p:nth-child(9) {
-webkit-animation: show-text 100ms ease 1700ms forwards;
animation: show-text 100ms ease 1700ms forwards;
}
.row3 > p:nth-child(1) {
-webkit-animation: show-text 100ms ease 1300ms forwards;
animation: show-text 100ms ease 1300ms forwards;
}
.row3 > p:nth-child(2) {
-webkit-animation: show-text 100ms ease 1400ms forwards;
animation: show-text 100ms ease 1400ms forwards;
}
.row3 > p:nth-child(3) {
-webkit-animation: show-text 100ms ease 1500ms forwards;
animation: show-text 100ms ease 1500ms forwards;
}
.row3 > p:nth-child(4) {
-webkit-animation: show-text 100ms ease 1600ms forwards;
animation: show-text 100ms ease 1600ms forwards;
}
.row3 > p:nth-child(5) {
-webkit-animation: show-text 100ms ease 1700ms forwards;
animation: show-text 100ms ease 1700ms forwards;
}
.row3 > p:nth-child(6) {
-webkit-animation: show-text 100ms ease 1800ms forwards;
animation: show-text 100ms ease 1800ms forwards;
}
.row3 > p:nth-child(7) {
-webkit-animation: show-text 100ms ease 1900ms forwards;
animation: show-text 100ms ease 1900ms forwards;
}
.row3 > p:nth-child(8) {
-webkit-animation: show-text 100ms ease 2000ms forwards;
animation: show-text 100ms ease 2000ms forwards;
}
.row3 > p:nth-child(9) {
-webkit-animation: show-text 100ms ease 2100ms forwards;
animation: show-text 100ms ease 2100ms forwards;
}
.row4 > p:nth-child(1) {
-webkit-animation: show-text 100ms ease 1700ms forwards;
animation: show-text 100ms ease 1700ms forwards;
}
.row4 > p:nth-child(2) {
-webkit-animation: show-text 100ms ease 1800ms forwards;
animation: show-text 100ms ease 1800ms forwards;
}
.row4 > p:nth-child(3) {
-webkit-animation: show-text 100ms ease 1900ms forwards;
animation: show-text 100ms ease 1900ms forwards;
}
.row4 > p:nth-child(4) {
-webkit-animation: show-text 100ms ease 2000ms forwards;
animation: show-text 100ms ease 2000ms forwards;
}
.row4 > p:nth-child(5) {
-webkit-animation: show-text 100ms ease 2100ms forwards;
animation: show-text 100ms ease 2100ms forwards;
}
.row4 > p:nth-child(6) {
-webkit-animation: show-text 100ms ease 2200ms forwards;
animation: show-text 100ms ease 2200ms forwards;
}
.row4 > p:nth-child(7) {
-webkit-animation: show-text 100ms ease 2300ms forwards;
animation: show-text 100ms ease 2300ms forwards;
}
.row4 > p:nth-child(8) {
-webkit-animation: show-text 100ms ease 2400ms forwards;
animation: show-text 100ms ease 2400ms forwards;
}
.row4 > p:nth-child(9) {
-webkit-animation: show-text 100ms ease 2500ms forwards;
animation: show-text 100ms ease 2500ms forwards;
}
.row5 > p:nth-child(1) {
-webkit-animation: show-text 100ms ease 2100ms forwards;
animation: show-text 100ms ease 2100ms forwards;
}
.row5 > p:nth-child(2) {
-webkit-animation: show-text 100ms ease 2200ms forwards;
animation: show-text 100ms ease 2200ms forwards;
}
.row5 > p:nth-child(3) {
-webkit-animation: show-text 100ms ease 2300ms forwards;
animation: show-text 100ms ease 2300ms forwards;
}
.row5 > p:nth-child(4) {
-webkit-animation: show-text 100ms ease 2400ms forwards;
animation: show-text 100ms ease 2400ms forwards;
}
.row5 > p:nth-child(5) {
-webkit-animation: show-text 100ms ease 2500ms forwards;
animation: show-text 100ms ease 2500ms forwards;
}
.row5 > p:nth-child(6) {
-webkit-animation: show-text 100ms ease 2600ms forwards;
animation: show-text 100ms ease 2600ms forwards;
}
.row5 > p:nth-child(7) {
-webkit-animation: show-text 100ms ease 2700ms forwards;
animation: show-text 100ms ease 2700ms forwards;
}
.row5 > p:nth-child(8) {
-webkit-animation: show-text 100ms ease 2800ms forwards;
animation: show-text 100ms ease 2800ms forwards;
}
.row5 > p:nth-child(9) {
-webkit-animation: show-text 100ms ease 2900ms forwards;
animation: show-text 100ms ease 2900ms forwards;
}
.row6 > p:nth-child(1) {
-webkit-animation: show-text 100ms ease 2500ms forwards;
animation: show-text 100ms ease 2500ms forwards;
}
.row6 > p:nth-child(2) {
-webkit-animation: show-text 100ms ease 2600ms forwards;
animation: show-text 100ms ease 2600ms forwards;
}
.row6 > p:nth-child(3) {
-webkit-animation: show-text 100ms ease 2700ms forwards;
animation: show-text 100ms ease 2700ms forwards;
}
.row6 > p:nth-child(4) {
-webkit-animation: show-text 100ms ease 2800ms forwards;
animation: show-text 100ms ease 2800ms forwards;
}
.row6 > p:nth-child(5) {
-webkit-animation: show-text 100ms ease 2900ms forwards;
animation: show-text 100ms ease 2900ms forwards;
}
.row6 > p:nth-child(6) {
-webkit-animation: show-text 100ms ease 3000ms forwards;
animation: show-text 100ms ease 3000ms forwards;
}
.row6 > p:nth-child(7) {
-webkit-animation: show-text 100ms ease 3100ms forwards;
animation: show-text 100ms ease 3100ms forwards;
}
.row6 > p:nth-child(8) {
-webkit-animation: show-text 100ms ease 3200ms forwards;
animation: show-text 100ms ease 3200ms forwards;
}
.row6 > p:nth-child(9) {
-webkit-animation: show-text 100ms ease 3300ms forwards;
animation: show-text 100ms ease 3300ms forwards;
}
.row7 > p:nth-child(1) {
-webkit-animation: show-text 100ms ease 2900ms forwards;
animation: show-text 100ms ease 2900ms forwards;
}
.row7 > p:nth-child(2) {
-webkit-animation: show-text 100ms ease 3000ms forwards;
animation: show-text 100ms ease 3000ms forwards;
}
.row7 > p:nth-child(3) {
-webkit-animation: show-text 100ms ease 3100ms forwards;
animation: show-text 100ms ease 3100ms forwards;
}
.row7 > p:nth-child(4) {
-webkit-animation: show-text 100ms ease 3200ms forwards;
animation: show-text 100ms ease 3200ms forwards;
}
.row7 > p:nth-child(5) {
-webkit-animation: show-text 100ms ease 3300ms forwards;
animation: show-text 100ms ease 3300ms forwards;
}
.row7 > p:nth-child(6) {
-webkit-animation: show-text 100ms ease 3400ms forwards;
animation: show-text 100ms ease 3400ms forwards;
}
.row7 > p:nth-child(7) {
-webkit-animation: show-text 100ms ease 3500ms forwards;
animation: show-text 100ms ease 3500ms forwards;
}
.row7 > p:nth-child(8) {
-webkit-animation: show-text 100ms ease 3600ms forwards;
animation: show-text 100ms ease 3600ms forwards;
}
.row7 > p:nth-child(9) {
-webkit-animation: show-text 100ms ease 3700ms forwards;
animation: show-text 100ms ease 3700ms forwards;
}
.row8 > p:nth-child(1) {
-webkit-animation: show-text 100ms ease 3300ms forwards;
animation: show-text 100ms ease 3300ms forwards;
}
.row8 > p:nth-child(2) {
-webkit-animation: show-text 100ms ease 3400ms forwards;
animation: show-text 100ms ease 3400ms forwards;
}
.row8 > p:nth-child(3) {
-webkit-animation: show-text 100ms ease 3500ms forwards;
animation: show-text 100ms ease 3500ms forwards;
}
.row8 > p:nth-child(4) {
-webkit-animation: show-text 100ms ease 3600ms forwards;
animation: show-text 100ms ease 3600ms forwards;
}
.row8 > p:nth-child(5) {
-webkit-animation: show-text 100ms ease 3700ms forwards;
animation: show-text 100ms ease 3700ms forwards;
}
.row8 > p:nth-child(6) {
-webkit-animation: show-text 100ms ease 3800ms forwards;
animation: show-text 100ms ease 3800ms forwards;
}
.row8 > p:nth-child(7) {
-webkit-animation: show-text 100ms ease 3900ms forwards;
animation: show-text 100ms ease 3900ms forwards;
}
.row8 > p:nth-child(8) {
-webkit-animation: show-text 100ms ease 4000ms forwards;
animation: show-text 100ms ease 4000ms forwards;
}
.row8 > p:nth-child(9) {
-webkit-animation: show-text 100ms ease 4100ms forwards;
animation: show-text 100ms ease 4100ms forwards;
}
.row9 > p:nth-child(1) {
-webkit-animation: show-text 100ms ease 3700ms forwards;
animation: show-text 100ms ease 3700ms forwards;
}
.row9 > p:nth-child(2) {
-webkit-animation: show-text 100ms ease 3800ms forwards;
animation: show-text 100ms ease 3800ms forwards;
}
.row9 > p:nth-child(3) {
-webkit-animation: show-text 100ms ease 3900ms forwards;
animation: show-text 100ms ease 3900ms forwards;
}
.row9 > p:nth-child(4) {
-webkit-animation: show-text 100ms ease 4000ms forwards;
animation: show-text 100ms ease 4000ms forwards;
}
.row9 > p:nth-child(5) {
-webkit-animation: show-text 100ms ease 4100ms forwards;
animation: show-text 100ms ease 4100ms forwards;
}
.row9 > p:nth-child(6) {
-webkit-animation: show-text 100ms ease 4200ms forwards;
animation: show-text 100ms ease 4200ms forwards;
}
.row9 > p:nth-child(7) {
-webkit-animation: show-text 100ms ease 4300ms forwards;
animation: show-text 100ms ease 4300ms forwards;
}
.row9 > p:nth-child(8) {
-webkit-animation: show-text 100ms ease 4400ms forwards;
animation: show-text 100ms ease 4400ms forwards;
}
.row9 > p:nth-child(9) {
-webkit-animation: show-text 100ms ease 4500ms forwards;
animation: show-text 100ms ease 4500ms forwards;
}
@-webkit-keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes show-text {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes show-text {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}