search

kingcos / kingcos.github.io

kingcos.me
https://kingcos.me
2 stars 0 forks source link

posts/2019/coding_with_vs_code/ #8

Open utterances-bot opened 5 years ago

utterances-bot commented 5 years ago

与 Visual Studio Code 共舞 :: iBlog — github.com/kingcos

Date Notes 2019-08-30 首次提交，涵盖 Debug Go/Ruby 配置、设置、插件 2019-11-12 增加 Debug CocoaPods & 插件 Preface VS Code（全称 Visual Studio Code），是微软推出的一款插件化编辑器。比 IDE 轻量，又比终端更容易上手，本文将罗列一些我在使用的设置、配置、插件等，也欢迎大家建言献策～ Debug Settings Name Effect Auto Save 自动保存，防止意外 Format On Save 保存时自动进行代码格式化 Go ➡️ 插件：ms-vscode.Go // launch.json { "version": "0.2.0", "configurations": [ { "name": "Debug Go Local File by maimieng.

https://maimieng.com/posts/2019/coding_with_vs_code/

QiuJueqin commented 5 years ago

啊~我想问下站点 logo 那个光标动画是怎么实现的？直接在 css 里面定义一个 class 吗？

kingcos commented 5 years ago

@QiuJueqin 这个主题并非我个人设计的哈～不过看了下源码，是用的 CSS 3 Animation 做的，我把相关代码抽离出如下 Demo 可以参考：

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      .logo__cursor {
        display: inline-block;
        width: 10px;
        height: 1rem;
        background: #fe5186;
        margin-left: 5px;
        border-radius: 1px;
        -webkit-animation: cursor 1s infinite;
        animation: cursor 1s infinite;
      }

      @-webkit-keyframes cursor {
        0% {
          opacity: 0;
        }

        50% {
          opacity: 1;
        }

        to {
          opacity: 0;
        }
      }

      @keyframes cursor {
        0% {
          opacity: 0;
        }

        50% {
          opacity: 1;
        }

        to {
          opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <span class="logo__cursor"></span>
  </body>
</html>
QiuJueqin commented 5 years ago

@kingcos 嗯嗯我昨天也研究了一下，后来仿照着弄了一个 logo 光标，https://ridiqulous.com/ 感谢你的启发~