The first article after the New Year, everyone in the Year of ox good luck!!

preface

Notification bar component is a more common component, basically every site will have a component, the main is to notify the site of some changes or to inform some of the winning list and so on. Recently in review CSS3 animation part of the content, think usually notification bar component is mostly used JS to achieve, just take this component to review, the following three small examples to share here, welcome to watch, if you have questions, welcome to leave comments ha.

The first kind of

HTML part

<div class="notice"> <div class=" inner"> <div class="notice__box"> <div class=" item"> Congratulations &nbsp; <span style="color: red;" Word-wrap: break-word! Important; "> < span style =" max-width: 100%; <div class="notice__item"> <div class="notice__item"> <span style="color: red;" Word-wrap: break-word! Important; "> < span style =" max-width: 100%; <div class="notice__item"> <div class="notice__item"> <span style="color: red;" >Cooke_</span>&nbsp; <div class="notice__item"> <div class="notice__item"> <span style="color: red;" Word-wrap: break-word! Important; "> < span style =" max-width: 100%; <div class="notice__item"> <div class="notice__item"> <span style="color: red;" Word-wrap: break-word! Important; "> < span style =" max-width: 100%; <div class="notice__item"> <div class="notice__item"> <span style="color: red;" > < / span > immortal & have spent <div class="notice__item"> <div class="notice__item"> <span style="color: red;" "> < span style =" max-width: 100%; clear: both; <div class="notice__item"> <div class="notice__item"> <span style="color: red;" >Maboroshii</span>&nbsp; <div class="notice__item"> <div class="notice__item"> <span style="color: red;" Word-wrap: break-word! Important; "> < span style =" max-width: 100%; <div class="notice__item"> <div class="notice__item"> <span style="color: red;" Word-wrap: break-word! Important; "> < span style =" max-width: 100%; <div > <div class="notice__box"> <div class="notice__item"> congratulations &nbsp; <span style="color: red;" Word-wrap: break-word! Important; "> < span style =" max-width: 100%; <div class="notice__item"> <div class="notice__item"> <span style="color: red;" Word-wrap: break-word! Important; "> < span style =" max-width: 100%; <div class="notice__item"> <div class="notice__item"> <span style="color: red;" >Cooke_</span>&nbsp; <div class="notice__item"> <div class="notice__item"> <span style="color: red;" Word-wrap: break-word! Important; "> < span style =" max-width: 100%; <div class="notice__item"> <div class="notice__item"> <span style="color: red;" Word-wrap: break-word! Important; "> < span style =" max-width: 100%; <div class="notice__item"> <div class="notice__item"> <span style="color: red;" > < / span > immortal & have spent <div class="notice__item"> <div class="notice__item"> <span style="color: red;" "> < span style =" max-width: 100%; clear: both; <div class="notice__item"> <div class="notice__item"> <span style="color: red;" >Maboroshii</span>&nbsp; <div class="notice__item"> <div class="notice__item"> <span style="color: red;" Word-wrap: break-word! Important; "> < span style =" max-width: 100%; <div class="notice__item"> <div class="notice__item"> <span style="color: red;" Word-wrap: break-word! Important; "> < span style =" max-width: 100%; < div style = "box-sizing: border-box! Important; word-wrap: break-word! Important;"Copy the code

The CSS part

.notice{ width: 300px; height: 300px; border-radius: 8px; border: 1px solid #eee; margin: 100px auto; } .notice__inner{ width: 100%; height: 100%; overflow: hidden; font-size: 14px; color: #666; } .notice__box{ animation: roll 10s linear infinite; } .notice__item{ width: 100%; height: 30px; line-height: 30px; padding: 0 12px; white-space: nowrap; } @keyframes roll { 0% { transform: translateY(0); } 100% { transform: translateY(-300px); }}Copy the code

  • Viewport container height should be fixed, beyond the viewport container hidden content;
  • To create a seamless scrolling back, the content needs to be prepared in two copies, following each other;
  • By moving the inner layertranslateYTo achieve the scrolling effect;
  • In the first content completely rolled out of the port container, immediately the content position to recover;
  • throughinfiniteTo cycle the process;

The second,

HTML part

<div class="notice"> <div class="notice__inner"> <div class="notice__item"> <div class="notice__item"> There are multiple versions of Vuecli in one computer. <div class="notice__item"> <div class="notice__item"> <div class="notice__item"> <div class="notice__item"> <div class=" Notice__item "> <div class=" Notice__item" <div class="notice__item"> <div class="notice__item"> <div class="notice__item"> <div class="notice__item"> <div class="notice__item"> <div class="notice__item"> <div class=" Notice__item "> <div class=" Notice__item "> <div class=" Notice__item" Class = "notice__item" > ordinary cutting figure wang | the nuggets a year annual essay < / div > < div class = "notice__item" > front end need to understand the browser cache (i.e., HTTP cache) | 🏆 technology project issue 8 essay < / div > < / div > </div>Copy the code

The CSS part

.notice{ width: 600px; height: 40px; border-radius: 8px; border: 1px solid #eee; margin: 100px auto; overflow: hidden; } .notice__inner{ animation: roll 36s linear infinite; margin-top: 0 } .notice__item{ font-size: 14px; height: 40px; line-height: 40px; padding: 0 12px; white-space: nowrap; text-decoration: underline; } @keyframes roll { 0% { margin-top: 0; } 4% { margin-top: 0; } 8% { margin-top: 0; } 12% { margin-top: -40px; } 16% { margin-top: -40px; } 20% { margin-top: -80px; } 24% { margin-top: -80px; } 28% { margin-top: -120px; } 32% { margin-top: -120px; } 36% { margin-top: -160px; } 40% { margin-top: -160px; } 44% { margin-top: -200px; } 48% { margin-top: -200px; } 52% { margin-top: -240px; } 56% { margin-top: -240px; } 60% { margin-top: -200px; } 64% { margin-top: -200px; } 68% { margin-top: -160px; } 72% { margin-top: -160px; } 76% { margin-top: -120px; } 80% { margin-top: -120px; } 84% { margin-top: -80px; } 88% { margin-top: -80px; } 92% { margin-top: -40px; } 96% { margin-top: -40px; } 100% { margin-top: 0; }}Copy the code

(GIF recording may be a little short, I suggest you try it!)

This form of rotation is a common one, but also a practical, perfect and simple one. By the way, it is easy and fast to implement in wechat applet with swiper component (don’t ask me how I know this -.-).

  • Viewport container height should be fixed, beyond the viewport container hidden content;
  • By moving the inner layermargin-topTo achieve the scrolling effect (withtranslateYAgain, just replace them all);
  • Note from the above HTML section that I have seven notification contents, so in@keyframesIn themargin-topWe move it seven times, and then we go back. If we add an eighth notification, we adjust it accordingly.

The third kind of

HTML part

<div class="notice"> <div class="notice__inner"> <span class="notice__item item-first">Vue is a progressive JavaScript <span class="notice__item -second">Vue is a progressive JavaScript framework </span> </div> </div>Copy the code

The CSS part

.notice{ width: 600px; height: 40px; border-radius: 8px; border: 1px solid #eee; margin: 100px auto; overflow: hidden; } .notice__inner{ height: 100%; font-size: 14px; color: #333; line-height: 40px; white-space: nowrap; position: relative; } .notice__item{ position: absolute; top: 0; left: 100%; height: 100%; } .notice__item-first{ padding-right: 70%; animation: rollFirst 25s linear infinite; } .notice__item-second{ padding-right: 53%; animation: rollSecond 25s linear 12s infinite; } @keyframes rollFirst { 0% { transform: translateX(0); } 100% { transform: translateX(-200%); } } @keyframes rollSecond { 0% { transform: translateX(0); } 100% { transform: translateX(-200%); }}Copy the code

This scrolling notification bar is also a more common one, it is more troublesome point is that the spacing is not good control, especially in a number of notification content, of course, with JS or better to achieve, now also have a lot of plug-ins can be used directly out of the box.

  • This viewport container height does not need to be fixed, it does not depend on, beyond the viewport container hidden content;
  • usingpadding-rightTo create gaps in percentage terms;
  • The content needs to be prepared in two copies and passedanimation-delayTo delay the appearance of the second piece of content, there is another idea here which is to move the inner container directlytranslateXIs the same as the first;

summary

You see here, itching to try? No? Ok.

Pure HTML+CSS is certainly not as flexible as JS, but the examples above are good for scenarios with fixed copy and quick interaction during the development phase.

Anyway, I found it interesting myself and I hope it will be more or less helpful to anyone reading this.