css闪烁字体点击出现文字

最新推荐文章于 2024-08-28 10:25:15 发布

蓝色最有调

最新推荐文章于 2024-08-28 10:25:15 发布

阅读量438

点赞数

分类专栏：玩具文章标签： css html jquery

本文链接：https://blog.csdn.net/weixin_43838853/article/details/112389759

版权

玩具专栏收录该内容

1 篇文章 0 订阅

订阅专栏

http://cmq521.com/wj/onclick.html 链接效果。

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           * {
               padding: 0;
               margin: 0;
           }

           html,
           body {
               height: 100%;
           }

           span {
               font-size: 36px;
               font-weight: bold;
               line-height: 280px;
               background: linear-gradient(to right, red, blue);
               -webkit-background-clip: text;
               color: transparent;
               animation: blink 2s linear infinite;
               -webkit-animation: blink 2s linear infinite;
               -moz-animation: blink 2s linear infinite;
               -ms-animation: blink 2s linear infinite;
               -o-animation: blink 2s linear infinite;
           }

           @keyframes blink {
               0% {
                   opacity: 1;
               }
               50% {
                   opacity: 0.1;
               }
               100% {
                   opacity: 0.3;
               }
           }

           @-webkit-keyframes blink {
               0% {
                   opacity: 1;
               }
               50% {
                   opacity: 0.1;
               }
               100% {
                   opacity: 0.3;
               }
           }

           @-moz-keyframes blink {
               0% {
                   opacity: 1;
               }
               50% {
                   opacity: 0.1;
               }
               100% {
                   opacity: 0.3;
               }
           }

           @-ms-keyframes blink {
               0% {
                   opacity: 1;
               }
               50% {
                   opacity: 0.1;
               }
               100% {
                   opacity: 0.3;
               }
           }

           @-o-keyframes blink {
               0% {
                   opacity: 1;
               }
               50% {
                   opacity: 0.1;
               }
               100% {
                   opacity: 0.3;
               }
           }
       </style>
       <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
       <script type="text/javascript">
           //定义获取词语下标
           var a_idx = 0;
           jQuery(document).ready(function($) {
               //点击body时触发事件
               $("body").click(function(e) {
                   //需要显示的词语
                   var colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'purple']
                   var num = Math.floor(Math.random() * 7);
                   var a = new Array("你在干什么", "唱歌啊", "你的童年", "我的童年", "好像都一样", "大大眼睛", "小小耳朵", "真呀真奇怪", "两只老虎", "两只老虎", "跑得慢",
                       "跑得慢", "山猪山豹山羊", "山上有只老羊", "看见老孙在发呆", "大笨象会跳舞", "小猴子会上树", "狐狸也会翻跟头", "嘿");
                   //设置词语给span标签
                   var i = $("<span/>").text(a[a_idx]);
                   //下标等于原来下标+1 余词语总数
                   a_idx = (a_idx + 1) % a.length;
                   //获取鼠标指针的位置，分别相对于文档的左和右边缘。
                   //获取x和y的指针坐标
                   var x = e.pageX,
                       y = e.pageY;
                   //在鼠标的指针的位置给$i定义的span标签添加css样式
                   i.css({
                       "z-index": 99999999999999999999,
                       "top": y-130,//兼容手机
                       "left": x,
                       "position": "absolute",
                       "font-weight": "bold",
                       "color": colors[num],

                   });
                   //在body添加这个标签
                   $("body").append(i);
               });
           });
       </script>
   </head>

</html>