HTML CSS 循环辅助 [英] HTML CSS Loop Assistance

问题描述

希望能帮到你.我想知道您是否可以在循环中输入以下类型:

你知道这是否可能吗?

body {背景:#000；}/* 演示特定样式 */.打字机 h1 {颜色:#fff;字体系列:Bebas Neue；溢出:隐藏；/* 确保内容在动画播放前不显示 */右边框:0.15em 纯橙色；/* 打字机光标 */空白:nowrap；/* 将内容保持在一行 */边距:0 自动；/* 在打字时产生滚动效果 */字母间距:0.15em；/* 根据需要调整 */动画片:输入 3.5 秒的步骤(30，结束)，闪烁插入符号 .5s 步长无限；}/* 打字效果 */@keyframes 输入 {从{宽度:0}到 { 宽度:100% }}/* 打字机光标效果 */@keyframes 闪烁插入符 {从，到 { 边框颜色:透明 }50% { 边框颜色:橙色 }}

<h1><h1 class="m-size-54 text-align-left size-80"><span class="m-font-size-54 font-size-80" m-font-size-set="true" style="font-style: italic; font-family: 'Bebas Neue'; color:rgb(255, 255, 255); 显示: 初始;"no_space_b="true" no_space_e="true">你好世界！</h1>

解决方案

我想知道您是否可以在循环中制作以下类型

是的，您只需将 infinite 属性添加到您的 animation 速记中即可，就像您对 blink-caret 的动画所做的一样.

body {背景:#000；}/* 演示特定样式 */.打字机 h1 {颜色:#fff;字体系列:Bebas Neue；溢出:隐藏；/* 确保内容在动画播放前不显示 */右边框:0.15em 纯橙色；/* 打字机光标 */空白:nowrap；/* 将内容保持在一行 */边距:0 自动；/* 在打字时产生滚动效果 */字母间距:0.15em；/* 根据需要调整 */动画片:无限输入 3.5s 步(30，结束)，/* ^--- 添加了这个 */闪烁插入符号 .5s 步长无限；}/* 打字效果 */@keyframes 输入 {从{宽度:0}到 { 宽度:100% }}/* 打字机光标效果 */@keyframes 闪烁插入符 {从，到 { 边框颜色:透明 }50% { 边框颜色:橙色 }}

<h1><h1 class="m-size-54 text-align-left size-80"><span class="m-font-size-54 font-size-80" m-font-size-set="true" style="font-style: italic; font-family: 'Bebas Neue'; color:rgb(255, 255, 255); 显示: 初始;"no_space_b="true" no_space_e="true">你好世界！</h1>

Hope you can help. I'm wondering if you can make the following type in a loop:

Do you know if this is possible?

body {
  background: #000;
}

/* DEMO-SPECIFIC STYLES */
.typewriter h1 {
  color: #fff;
  font-family: Bebas Neue;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}

<div class="typewriter">
  <h1><h1 class="m-size-54 text-align-left size-80">
  <span class="m-font-size-54 font-size-80" m-font-size-set="true" style="font-style: italic; font-family: 'Bebas Neue'; color: rgb(255, 255, 255); display: initial;" no_space_b="true" no_space_e="true">
      Hello World!</h1>
</div>

解决方案

I'm wondering if you can make the following type in a loop

Yes you can by just adding the infinite property to your animation shorthand just like you did with the animation of the blink-caret.

body {
  background: #000;
}

/* DEMO-SPECIFIC STYLES */
.typewriter h1 {
  color: #fff;
  font-family: Bebas Neue;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(30, end) infinite,
    /*                           ^--- ADDED THIS */
    blink-caret .5s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}

<div class="typewriter">
  <h1><h1 class="m-size-54 text-align-left size-80">
  <span class="m-font-size-54 font-size-80" m-font-size-set="true" style="font-style: italic; font-family: 'Bebas Neue'; color: rgb(255, 255, 255); display: initial;" no_space_b="true" no_space_e="true">
      Hello World!</h1>
</div>

这篇关于HTML CSS 循环辅助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！