css3霓虹灯文字效果以及文字背景动画

忘是亡心i 2021-09-14 15:52 603阅读 0赞

一.注意点

1.[HTML5中rel属性的prefetch预加载功能][HTML5_rel_prefetch] :rel='stylesheet prefetch'

2.Google字体库载入（在family加入你要的字体）

![SouthEast][]

3.[了解CSS/CSS3原生变量var][CSS_CSS3_var]

4.[CSS3 will-change提高页面动画等渲染性能][CSS3 will-change]

5.[css3filter(滤镜)属性][css3filter]

6.[animation中的steps()逐帧动画][animation_steps]

二.css3霓虹灯文字效果

<!DOCTYPE html>
    <html lang="en" >
    
    <head>
    <meta charset="UTF-8">
    <title>HTML5/CSS3炫酷阴影发光文字特效组合DEMO演示</title>
    <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Bad+Script|Gruppo|Kumar+One+Outline|League+Script|Londrina+Outline|Monoton|Sriracha|Yellowtail&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789?+'>
    <style>
    html,body {
      min-height: 100vh;margin: 0;
    }
    html {
      background: #090000;
      font-size: calc(1em + 3vmax);
      line-height: 1.1;
      text-align: center;
    }
    body {
      display: grid;
      grid-gap: 1em;
      grid-template-columns: repeat(auto-fit, minmax(0, 12ch));
      align-items: center;
      align-content: center;
      justify-content: center;
    }
    span {
      display: block;
      text-shadow: 
        0 0 10px var(--color1),
        0 0 20px var(--color2),
        0 0 40px var(--color3),
        0 0 80px var(--color4);
      will-change: filter, color;
      filter: saturate(60%);
      animation: flicker steps(100)  1s infinite;
    }
    
    span:nth-of-type(1) {
      color: yellow;
      --color1: goldenrod;
      --color2: orangered;
      --color3: mediumblue;
      --color4: purple;
      font-family: Gruppo;
    }
    
    span:nth-of-type(2) {
      color: lightpink;
      --color1: pink;
      --color2: orangered;
      --color3: red;
      --color4: magenta;
      font-family: Bad Script;
    }
    span:nth-of-type(3) {
      color: lightyellow;
      --color1: yellow;
      --color2: lime;
      --color3: green;
      --color4: mediumblue;
      font-family: Kumar One Outline;
    }
    span:nth-of-type(4) {
      color:#009688;
      --color1: gold;
      --color2: firebrick;
      --color3: pink;
      --color4: red;
      font-family: Londrina Outline;
    }
    span:nth-of-type(5) {
      color: azure;
      --color1: azure;
      --color2: aqua;
      --color3: dodgerblue;
      --color4: blue;
      font-family: Sriracha;
    }
    span:nth-of-type(6) {
      color: tomato;
      --color1: orangered;
      --color2: firebrick;
      --color3: maroon;
      --color4: darkred;
      font-family: Yellowtail;
    }
    span:nth-of-type(7) {
      color: lightyellow;
      --color1: yellow;
      --color2: orange;
      --color3: brown;
      --color4: purple;
      font-family: Bad Script;
    }
    span:nth-of-type(8) {
      color: yellow;
      --color1: yellow;
      --color2: lime;
      --color3: green;
      --color4: darkgreen;
      font-family: Monoton;
    }
    span:nth-of-type(9) {
      color: lightyellow;
      --color1: yellow;
      --color2: gold;
      --color3: orange;
      --color4: darkred;
      font-family: Sriracha;
    }
    
    @keyframes flicker {
      50% {
        color: white;
        filter: saturate(200%) hue-rotate(20deg);
      }
    }
    </style>
    </head>
    <body>
    <span>League Script</span>
    <span>Gruppo</span>
    <span>Kumar One Outline</span>
    <span>Londrina Outline</span>
    <span>Sriracha</span>
    <span>Yes—they are bad</span>
    <span>FREE RADIOS</span>
    <span>Monoton</span>
    </body>
    </html>

三.文字背景动画

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>CSS粒子效果</title>
    <style>
    body{
      padding: 40px 0;
      font-family: 'bebas', sans-serif;
      background-color: #00BCD4;
      color: #fff;
    }
    .cnt{
    	 padding: 40px 0;
      text-align: center;
    }
    .cnt-text{
      font-size: 48px;
      position: relative;
    }
    /*泡沫*/
    .cnt-text_hearts--blue{
    	opacity: 0;
      position: absolute;
      background-color: rgba(33, 150, 243, 0.5);
      border-radius: 50%;
      animation:bubbles 3s ease-in infinite ;
      -webkit-animation:bubbles 3s ease-in infinite ;
    }
    /*爱心*/
    .cnt-text_hearts--red{
    	opacity: 0;
      position: absolute;
    	background: #cc2a5d;
    	  animation:hearts 3s ease-in infinite ;
      -webkit-animation:hearts 3s ease-in infinite ;
    }
    .cnt-text_hearts--red:before,.cnt-text_hearts--red:after{
    	position: absolute;
    	top: 0;
    	left: 0;
    	content: '';
    	width: 100%;
    	height: 100%;
    	border-radius: 50%;
    	background: #cc2a5d;
    }
    .cnt-text_hearts--red:before{
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
    }
    .cnt-text_hearts--red:after{
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
    }
    /*//火*/
    .cnt-text_fire--hua {
      position: absolute;
      background-color: rgba(255, 193, 7, 0.5);
      border-radius: 40px;
      border-top-right-radius: 0px;
      -webkit-animation: fires 0.8s linear infinite;
              animation: fires 0.8s linear infinite;
      -webkit-transform: rotate(-45deg);
              transform: rotate(-45deg);
      opacity: 0;
    }
    .cnt-text_fire--hua:after{
      position: absolute;
      content: '';
      top: 60%;
      left: 40%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      width: 50%;
      height: 50%;
      border-radius: 40px;
      border-top-right-radius: 0px;
      background-color: rgba(251, 140, 0, 0.5);
    }
    .cnt-text_Confetti--blue{
      opacity: 0;
      position: absolute;
      -webkit-animation: confetti 3s ease-in infinite;
              animation: confetti 3s ease-in infinite;
    }
    @-webkit-keyframes bubbles{
    	0% {
        opacity: 0;
      }
      20% {
        opacity: 1;
        -webkit-transform: translate(0, -20%);
                transform: translate(0, -20%);
      }
      100% {
        opacity: 0;
        -webkit-transform: translate(0, -1000%);
                transform: translate(0, -1000%);
      }
    }
    @-webkit-keyframes hearts{
    	0% {
        opacity: 0;
      }
      20% {
        opacity: 1;
        -webkit-transform: translate(0, -20%) rotate(45deg);
                transform: translate(0, -20%) rotate(45deg);
      }
      100% {
        opacity: 0;
        -webkit-transform: translate(0, -1000%) rotate(45deg);
                transform: translate(0, -1000%) rotate(45deg);
      }
    }
    @-webkit-keyframes fires {
      0% {
        -webkit-transform: rotate(-70deg) translateY(0%);
                transform: rotate(-70deg) translateY(0%);
      }
      25% {
        -webkit-transform: rotate(-20deg) translateY(-5%);
                transform: rotate(-20deg) translateY(-5%);
        opacity: 1;
      }
      50% {
        -webkit-transform: rotate(-70deg) translateY(-10%);
                transform: rotate(-70deg) translateY(-10%);
      }
      75% {
        -webkit-transform: rotate(-20deg) translateY(-20%);
                transform: rotate(-20deg) translateY(-20%);
      }
      100% {
        -webkit-transform: rotate(-70deg) translateY(-40%);
                transform: rotate(-70deg) translateY(-40%);
        opacity: 1;
      }
    }
    @-webkit-keyframes confetti {
      0% {
        opacity: 0;
        -webkit-transform: translateY(0%) rotate(0deg);
                transform: translateY(0%) rotate(0deg);
      }
      10% {
        opacity: 1;
      }
      35% {
        -webkit-transform: translateY(-800%) rotate(270deg);
                transform: translateY(-800%) rotate(270deg);
      }
      80% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        -webkit-transform: translateY(2000%) rotate(1440deg);
                transform: translateY(2000%) rotate(1440deg);
      }
    }
    </style>
    </head>
    <body>
    <div class="cnt">
       <a class="cnt-text js-cnt-text_bubbles">Bubbles</a>
    </div>
    <div class="cnt">
       <a class="cnt-text cnt-text_hearts">Hearts</a>
    </div>
    <div class="cnt">
       <a class="cnt-text cnt-text_fire">Fire</a>
    </div>
    <div class="cnt">
       <a class="cnt-text cnt-text_Confetti">Confetti</a>
    </div>
    <script type="text/javascript" src="js/jQuery-2.1.4.min.js"></script>
    <script>
    bubbles();
    hearts();
    fire();
    confetti();
    //泡沫
    function bubbles(){
    	$.each($(".js-cnt-text_bubbles"), function() {
    		var num = Math.ceil($(this).width()/50)*10;
    		for(var i = 0; i <= num; i++) {
         	var size = Math.ceil(rnd(40,80)/10);
         	$(this).append('<span class="cnt-text_hearts--blue" style="top:' + rnd(20,80) + '%; left:' + rnd(0,95) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + (rnd(0,30)/10) + 's; background-color:#'+ Math.floor(Math.random()*0xffffff).toString(16) + ';"></span>');
      	}		
    	});
    }
    //爱心
    function hearts(){
    	$.each($(".cnt-text_hearts"), function() {
    		var num = Math.ceil($(this).width()/50)*10;
    		for(var i = 0; i <= num; i++) {
         	var size = Math.ceil(rnd(40,80)/10);
         	$(this).append('<span class="cnt-text_hearts--red" style="top:' + rnd(20,80) + '%; left:' + rnd(0,95) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + (rnd(0,30)/10) + 's;"></span>');
      	}		
    	});
    }
    //火
    function fire(){
    	$.each($(".cnt-text_fire"), function() {
    		var num = Math.ceil($(this).width()/50)*10;
    		for(var i = 0; i <= num; i++) {
         	var size =rnd(8,12);
          $(this).append('<span class="cnt-text_fire--hua" style="top:' + rnd(40,70) + '%; left:' + rnd(-10,100) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + (rnd(0,20)/10) + 's;"></span>');
        }
    	});
    }
    function confetti(){
       $.each($(".cnt-text_Confetti"), function(){
          var confetticount = ($(this).width()/50)*10;
          for(var i = 0; i <= confetticount; i++) {
             $(this).append('<span class="cnt-text_Confetti--blue" style="top:' + rnd(10,50) + '%; left:' + rnd(0,100) + '%;width:' + rnd(6,8) + 'px; height:' + rnd(3,4) + 'px;animation-delay: ' + (rnd(0,30)/10) + 's;background-color:#'+ Math.floor(Math.random()*0xffffff).toString(16) +';"></span>');
          }
       });
    }
    //产生随机数
    function rnd(m,n) {
          m = parseInt(m);
          n = parseInt(n);
          return Math.floor( Math.random() * (n - m + 1) ) + m;
    }
    </script>
    </body>
    </html>

[HTML5_rel_prefetch]: https://www.cnblogs.com/suyuwen1/p/5506397.html
[SouthEast]: /images/20210813/21fa0c58df034ebab5022b3ea3ed902f.png
[CSS_CSS3_var]: http://blog.csdn.net/gao_xu_520/article/details/79217210
[CSS3 will-change]: http://blog.csdn.net/gao_xu_520/article/details/79236498
[css3filter]: http://blog.csdn.net/gao_xu_520/article/details/79257752
[animation_steps]: http://blog.csdn.net/gao_xu_520/article/details/79263408