sublime加动画css3,CSS3 Sublime 代码编辑器模拟

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;

}

}