这是一款使用纯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;
}
}