Html 如何使用 CSS 3 制作闪烁/闪烁的文本

Question

提问by ojek

Currently, I have this code:

目前，我有这个代码：

@-webkit-keyframes blinker {
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

.waitingForConnection {
  -webkit-animation-name: blinker;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
  -webkit-animation-duration: 1.7s;
}

It blinks, but it only blinks in "one direction". I mean, it only fades out, and then it appears back with opacity: 1.0, then again fades out, appears again, and so on...

它闪烁，但它只向“一个方向”闪烁。我的意思是，它只会淡出opacity: 1.0，然后用重新出现，然后再次淡出，再次出现，依此类推......

I would like it to fade out, and then "raise" from this fade back again to opacity: 1.0. Is that possible?

我希望它淡出，然后从这个淡入淡出“提升”到opacity: 1.0. 那可能吗？

Answer 1

回答by Mr. Alien

You are first setting opacity: 1;and then you are ending it on 0, so it starts from 0%and ends on 100%, so instead just set opacity to 0at 50%and the rest will take care of itself.

您首先进行设置opacity: 1;，然后以结束0，因此它从开始0%并结束于100%，因此只需将不透明度设置为0at 50%，其余部分将自行处理。

Demo

演示

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

<div class="blink_me">BLINK ME</div>

Here, I am setting the animation duration to be 1 second, and then I am setting the timingto linear. That means it will be constant throughout. Last, I am using infinite. That means it will go on and on.

在这里，我将动画持续时间设置为1 second，然后将设置timing为linear。这意味着它将始终保持不变。最后，我正在使用infinite. 这意味着它会一直持续下去。

Note: If this doesn't work for you, use browser prefixes like -webkit, -mozand so on as required for animationand @keyframes. You can refer to my detailed code here

注：如果这不会为你工作，使用浏览器前缀喜欢 -webkit，-moz等按要求animation和 @keyframes。你可以参考我这里的详细代码

As commented, this won't work on older versions of Internet Explorer, and for that you need to use jQuery or JavaScript...

正如评论的那样，这不适用于旧版本的 Internet Explorer，为此您需要使用 jQuery 或 JavaScript ...

(function blink() {
  $('.blink_me').fadeOut(500).fadeIn(500, blink);
})();

^{Thanks to Alnitak for suggesting a better approach.}

^{感谢 Alnitak 提出更好的方法。}

Demo(Blinker using jQuery)

演示（使用 jQuery 的 Blinker）

Answer 2

回答by Ana

Use the alternatevalue for animation-direction(and you don't need to add any keframes this way).

使用alternate值 for animation-direction（并且您不需要以这种方式添加任何 keframe）。

alternate
The animation should reverse direction each cycle. When playing in reverse, the animation steps are performed backward. In addition, timing functions are also reversed; for example, an ease-in animation is replaced with an ease-out animation when played in reverse. The count to determinate if it is an even or an odd iteration starts at one.

alternate
动画应该在每个循环中反转方向。反向播放时，动画步骤向后执行。另外，定时功能也颠倒了；例如，当反向播放时，缓入动画会替换为缓出动画。确定它是偶数还是奇数迭代的计数从 1 开始。

CSS:

.waitingForConnection {
  animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
}
@keyframes blinker { to { opacity: 0; } }

I've removed the fromkeyframe. If it's missing, it gets generated from the value you've set for the animated property (opacityin this case) on the element, or if you haven't set it (and you haven't in this case), from the default value (which is 1for opacity).

我已经删除了from关键帧。如果它丢失，它将根据您为opacity元素上的动画属性（在本例中）设置的值生成，或者如果您尚未设置它（在本例中您没有设置），则从默认值生成（这是1为了opacity）。

And please don't use just the WebKit version. Add the unprefixed one after it as well. If you just want to write less code, use the shorthand.

并且请不要只使用 WebKit 版本。在它之后添加无前缀的。如果您只想编写更少的代码，请使用简写.

Answer 3

回答by Timmmm

The best way to get a pure "100% on, 100% off" blink, like the old <blink>is like this:

获得纯粹的“100% 开启，100% 关闭”闪烁的最佳方式，就像旧<blink>的一样：

.blink {
  animation: blinker 1s step-start infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

<div class="blink">BLINK</div>

Answer 4

回答by MattSturgeon

Alternatively if you do not want a gradual transition between show and hide (e.g. a blinking text cursor) you could use something like:

或者，如果您不想在显示和隐藏之间逐渐过渡（例如闪烁的文本光标），您可以使用以下内容：

/* Also use prefixes with @keyframes and animation to support current browsers */
@keyframes blinker {  
  from { visibility: visible }
  to { visibility: hidden }

  /* Alternatively you can do this:  
  0% { visibility: visible; }
  50% { visibility: hidden; }
  100% { visibility: visible; }
  if you don't want to use `alternate` */
}
.cursor {
  animation: blinker steps(1) 500ms infinite alternate;
}

Every 1s.cursorwill go from visibleto hidden.

每个1s.cursor都会从visible到hidden。

If CSS animation is not supported (e.g. in some versions of Safari) you can fallback to this simple JS interval:

如果不支持 CSS 动画（例如在某些版本的 Safari 中），您可以回退到这个简单的 JS 间隔：

(function(){
  var show = 'visible'; // state var toggled by interval
  var time = 500; // milliseconds between each interval

  setInterval(function() {
    // Toggle our visible state on each interval
    show = (show === 'hidden') ? 'visible' : 'hidden';

    // Get the cursor elements
    var cursors = document.getElementsByClassName('cursor');
    // We could do this outside the interval callback,
    // but then it wouldn't be kept in sync with the DOM

    // Loop through the cursor elements and update them to the current state
    for (var i = 0; i < cursors.length; i++) {
      cursors[i].style.visibility = show;
    }
  }, time);
})()

This simple JavaScript is actually very fast and in many cases may even be a better default than the CSS. It's worth noting that it is lots of DOM calls that make JS animations slow (e.g. JQuery's $.animate()).

这个简单的 JavaScript 实际上非常快，在许多情况下甚至可能是比 CSS 更好的默认值。值得注意的是，大量的 DOM 调用使 JS 动画变慢（例如 JQuery 的 $.animate()）。

It also has the second advantage that if you add .cursorelements later, they will still animate at exactly the same time as other .cursors since the state is shared, this is impossible with CSS as far as I am aware.

它还具有第二个优点，如果您.cursor稍后添加元素，.cursor由于状态是共享的，它们仍然会与其他s完全同时进行动画处理，据我所知，这在 CSS 中是不可能的。

Answer 5

回答by josketres

I don't know why but animating only the visibilityproperty is not working on any browser.

我不知道为什么，但仅对visibility属性进行动画处理在任何浏览器上都不起作用。

What you can do is animate the opacityproperty in such a way that the browser doesn't have enough frames to fade in or out the text.

您可以做的是以opacity浏览器没有足够的帧来淡入或淡出文本的方式为属性设置动画。

Example:

例子：

span {
  opacity: 0;
  animation: blinking 1s linear infinite;
}

@keyframes blinking {
  from,
  49.9% {
    opacity: 0;
  }
  50%,
  to {
    opacity: 1;
  }
}

<span>I'm blinking text</span>

Answer 6

回答by James Hilliard

Change duration and opacity to suit.

更改持续时间和不透明度以适应。

.blink_text { 
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blinker;
    -moz-animation-duration: 3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    animation-name: blinker;
    animation-duration: 3s;
    animation-timing-function: linear; 
    animation-iteration-count: infinite; color: red; 
} 

@-moz-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; } 
}

@-webkit-keyframes blinker { 
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; } 
} 

@keyframes blinker { 
    0% { opacity: 1.0; } 
    50% { opacity: 0.3; } 
    100% { opacity: 1.0; } 
}

Answer 7

回答by onon15

@-webkit-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

.blink {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  animation: blinker 2s linear infinite;
  background-color: red;
  margin-right: 5px;
}

.content {
  display: flex;
  flex-direction: row;
  align-items: center;
}

<div class="content">
  <i class="blink"></i>
  LIVE
</div>

Answer 8

回答by hsobhy

Late but wanted to add a new one with more keyframes ... here is an example on CodePensince there was an issue with the built-in code snippets:

晚了，但想添加一个具有更多关键帧的新...这是CodePen 上的一个示例，因为内置代码片段存在问题：

.block{
  display:inline-block;
  padding:30px 50px;
  background:#000;
}
.flash-me {
  color:#fff;
  font-size:40px;
  -webkit-animation: flash linear 1.7s infinite;
  animation: flash linear 1.7s infinite;
}

@-webkit-keyframes flash {
  0% { opacity: 0; } 
  80% { opacity: 1; color:#fff; } 
  83% { opacity: 0; color:#fff; } 
  86% { opacity: 1; color:#fff;}  
  89% { opacity: 0} 
  92% { opacity: 1; color:#fff;} 
  95% { opacity: 0; color:#fff;}
  100% { opacity: 1; color:#fff;}
}
@keyframes flash {
  0% { opacity: 0; } 
  80% { opacity: 1; color:#fff; } 
  83% { opacity: 0; color:#fff; } 
  86% { opacity: 1; color:#fff;}  
  89% { opacity: 0} 
  92% { opacity: 1; color:#fff;} 
  95% { opacity: 0; color:#fff;}
  100% { opacity: 1; color:#fff;}
}

<span class="block">
  <span class="flash-me">Flash Me Hard</span>
</span>

Answer 9

回答by Alpha

It works for me by using class=blinkfor the respective element(s)

它通过对相应元素使用class=blink对我有用

Simple JS Code

简单的 JS 代码

// Blink
      setInterval(function()
        {

        setTimeout(function()
        {

        //$(".blink").css("color","rgba(0,0,0,0.1)"); // If you want simply black/white blink of text
        $(".blink").css("visibility","hidden"); // This is for Visibility of the element  


        },900);


        //$(".blink").css("color","rgba(0,0,0,1)");  // If you want simply black/white blink of text
        $(".blink").css("visibility","visible");  // This is for Visibility of the element

        },1000);

Answer 10

回答by Shahaji

<style>
    .class1{
        height:100px;
        line-height:100px;
        color:white;
        font-family:Bauhaus 93;
        padding:25px;
        background-color:#2a9fd4;
        border:outset blue;
        border-radius:25px;
        box-shadow:10px 10px green;
        font-size:45px;
    }
     .class2{
        height:100px;
        line-height:100px;
        color:white;
        font-family:Bauhaus 93;
        padding:25px;
        background-color:green;
        border:outset blue;
        border-radius:25px;
        box-shadow:10px 10px green;
        font-size:65px;
    }
</style>
<script src="jquery-3.js"></script>
<script>
    $(document).ready(function () {
        $('#div1').addClass('class1');
        var flag = true;

        function blink() {
            if(flag)
            {
                $("#div1").addClass('class2');
                flag = false;
            }
            else
            { 
                if ($('#div1').hasClass('class2'))
                    $('#div1').removeClass('class2').addClass('class1');
                flag = true;
            }
        }
        window.setInterval(blink, 1000);
    });
</script>

Html 如何使用 CSS 3 制作闪烁/闪烁的文本

提问by ojek

回答by Mr. Alien

回答by Ana

`alternate`

`alternate`

回答by Timmmm

回答by MattSturgeon

回答by josketres

回答by James Hilliard

回答by onon15

回答by hsobhy

回答by Alpha

回答by Shahaji

相关推荐

最近更新

标签

Html 如何使用 CSS 3 制作闪烁/闪烁的文本

提问by ojek

回答by Mr. Alien

回答by Ana

alternate

alternate

回答by Timmmm

回答by MattSturgeon

回答by josketres

回答by James Hilliard

回答by onon15

回答by hsobhy

回答by Alpha

回答by Shahaji

相关推荐

Html 将滚动条放在带有自动溢出的 div 之外

SVG 图像未显示在 html 电子邮件中

Html 单击按钮时如何隐藏/显示 div？

Html 如何为html创建自定义标签

相关推荐

最近更新

标签

`alternate`

`alternate`