点击查看html编辑器说明文档

单个div纯CSS实现 控制台终端效果 terminaledit icon

|
|
Fork(复制)
|
|
作者:
lynn-ssk
提交反馈
嵌入
设置
下载
HTML
格式化
支持Emmet,输入 p 后按 Tab键试试吧!
<head> ...
展开
</head>
<body>
            
            <div id="rules"></div>
        
</body>
Stylus
格式化
            
            // #divtober 27: Rules
// a.singlediv.com/divtober2023

$rules-w = .6em
$rules-h = 1.25em

black(alpha)
  rgba(0,0,0,alpha)

white(alpha)
  rgba(255,255,255,alpha)

body
  min-height: 200px
  height: 100vh
  position: relative
  background-color: #222
  overflow: hidden

div
  position: absolute
  left: 50%
  top: 50%

#rules
  width: 16em
  height: 9.6em
  margin-left: -(@width/2)
  margin-top: -(@height/2)
  background: radial-gradient(circle, #555 50%, transparent 50.2%) .5em .4em / .8em .8em,
              radial-gradient(circle, #555 50%, transparent 50.2%) 1.3em .4em / .8em .8em,
              radial-gradient(circle, #555 50%, transparent 50.2%) 2.1em .4em / .8em .8em,
              linear-gradient(#333, #333) 0 0 / 100% 1.5em
  background-repeat: no-repeat
  border-radius: .6em
  box-shadow: 0 0 0 .1em white(.2),
              0 1em 1.5em -.6em black(.7),
              0 .6em .5em -.6em  black(.5),
              0 0 0 40em mediumpurple

  &::before,
  &::after
    content: ''
    display: block
    position: absolute
    top: $rules-h*1.45
    animation: 7s infinite linear
    z-index: -1

  &::before
    width: 100%
    height: 500%
    left: $rules-w*1
    content:'$ the web rules \A   html rules \A   css rules \A   html rules \A   css rules \A   html rules \A   css rules \A   html rules \A   css rules \A   html rules \A   css rules \A   html rules \A   css rules \A   html rules \A   css rules \A   html rules \A   css rules \A   html rules'
    font-family: 'Courier New', mono
    color: limegreen
    white-space: pre-wrap
    text-align: left
    line-height: 1.25
    animation-name: rulesText

  &::after
    width: $rules-w*41
    height: $rules-h*10
    left: $rules-w*-24
    background: linear-gradient(to top, limegreen .06em,
                                        transparent .06em) right $rules-w*13 top 0 / $rules-w $rules-h,
                linear-gradient(#222, #222) right top / $rules-w*14 $rules-h,
                linear-gradient(#222, #222) 0 $rules-h*2 / $rules-w*13 100%,
                linear-gradient(#222, #222) $rules-w*13 $rules-h / 100% 100%
    background-repeat: no-repeat
    animation-name: rulesPrinting

@keyframes rulesPrinting
  0%, 10%
    transform: translate(0,0)
  10.01%, 12%
    transform: translate($rules-w,0)
  12.01%, 14%
    transform: translate($rules-w*1,0)
  14.01%, 16%
    transform: translate($rules-w*2,0)
  16.01%, 18%
    transform: translate($rules-w*3,0)
  18.01%, 20%
    transform: translate($rules-w*4,0)
  20.01%, 22%
    transform: translate($rules-w*5,0)
  22.01%, 24%
    transform: translate($rules-w*6,0)
  24.01%, 26%
    transform: translate($rules-w*7,0)
  26.01%, 28%
    transform: translate($rules-w*8,0)
  28.01%, 30%
    transform: translate($rules-w*9,0)
  30.01%, 32%
    transform: translate($rules-w*10,0)
  32.01%, 34%
    transform: translate($rules-w*11,0)
  34.01%, 36%
    transform: translate($rules-w*12,0)
  36.01%, 40%
    transform: translate($rules-w*13,0)
  40.01%, 45%
    transform: translate(0,$rules-h)
  45.01%, 47%
    transform: translate($rules-w*24,0)
  47.01%, 49%
    transform: translate($rules-w*24,$rules-h)
  49.01%, 51%
    transform: translate($rules-w*24,$rules-h*2)
  51.01%, 53%
    transform: translate($rules-w*24,$rules-h*3)
  53.01%, 79%
    transform: translate($rules-w*24,$rules-h*4)
  79.01%, 81%
    transform: translate(0, $rules-h*5)
  81.01%, 83%
    transform: translate(0, $rules-h*4)
  83.01%, 85%
    transform: translate(0, $rules-h*3)
  85.01%, 87%
    transform: translate(0, $rules-h*2)
  87.01%, 89%
    transform: translate(0, $rules-h)
  89.01%, 100%
    transform: translate(0, 0)


@keyframes rulesText
  0%, 55%
    transform: translateY(0)
  55.01%, 57%
    transform: translateY($rules-h*-1)
  57.01%, 59%
    transform: translateY($rules-h*-2)
  59.01%, 61%
    transform: translateY($rules-h*-3)
  61.01%, 63%
    transform: translateY($rules-h*-4)
  63.01%, 65%
    transform: translateY($rules-h*-5)
  65.01%, 67%
    transform: translateY($rules-h*-6)
  67.01%, 69%
    transform: translateY($rules-h*-7)
  69.01%, 71%
    transform: translateY($rules-h*-8)
  71.01%, 73%
    transform: translateY($rules-h*-9)
  73.01%, 75%
    transform: translateY($rules-h*-10)
  75.01%, 77%
    transform: translateY($rules-h*-11)
  77.01%, 79%
    transform: translateY($rules-h*-12)
  79.01%, 81%
    transform: translateY($rules-h*-13)
  81.01%, 83%
    transform: translateY($rules-h*-14)
  83.01%, 85%
    transform: translateY($rules-h*-15)
  85.01%, 87%
    transform: translateY($rules-h*-16)
  87.01%, 89%
    transform: translateY($rules-h*-17)
  89.01%, 100%
    transform: translateY($rules-h*-18)

        
JS
格式化
            
            
        
预览
控制台