sublime加动画css3,纯CSS3打造超逼真的Sublime编辑器界面

这是一款使用纯CSS3制作的超逼真的Sublime编辑器界面特效。该Sublime编辑器界面特效于真实的Sublime编辑器界面界面几乎一模一样，并且还带有一个光标闪动的效果。

制作方法

HTML结构

这个Sublime编辑器界面特效的HTML结构使用一个无序列表来制作，每一个列表项是界面中的一行代码。其中.buttons是编辑器界面的三个小圆点。

• $breakpoints: (phone: 320px, tablet: 768px, desktop: 1024px);
• /* Inclusive and exclusive operators for a finer control over the intervals */
• @include media(">phone", "<=tablet") {
  • width: 50%;
• }

CSS样式

这个Sublime编辑器界面特效的基本样式比较简单，最后光标闪动的效果是使用一个伪元素.cursor:before来制作光标，并使用@keyframes来制作光标的动画效果。

.sublime .cursor:before {

opacity: 0;

content: "|";

color: #f1f1f1;

-webkit-animation: blink 0.8s infinite;

animation: blink 0.8s infinite;

}

@-webkit-keyframes blink {

0% {

opacity: 0;

}

50% {

opacity: 1;

}

100% {

opacity: 0;

}

}

@keyframes blink {

0% {

opacity: 0;

}

50% {

opacity: 1;

}

100% {

opacity: 0;

}

}