制作个人网站之人生进度条

最新推荐文章于 2024-09-28 10:19:36 发布

huang_ftpjh

最新推荐文章于 2024-09-28 10:19:36 发布

阅读量1.8k

点赞数

分类专栏：前端文章标签：人生进度条

本文链接：https://blog.csdn.net/huang_ftpjh/article/details/107840730

版权

来源：  仿照  uTools里的人生进度条插件用页面的形式写出
目的：  做个人网站的目的就是把看到的变成自己实现的案例

这些值由后台数据库获取   这里写死了
你的名字   {}
你打算活到几岁
你的生日

时钟为罗盘时钟在jq插件网找到

life.html 与 clock.html放在同一目录下，源码在下面链接右键-- 查看源代码即可 /clock.html是时钟

http://www.junhao.host/life.html

2020-08-07

测试type.js等一些博客网站上存在的一些东西

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .typed-cursor{
            opacity: 1;
            -webkit-animation: blink 0.7s infinite;
            -moz-animation: blink 0.7s infinite;
            animation: blink 0.7s infinite;
        }
        @keyframes blink{
            0% { opacity:1; }
            50% { opacity:0; }
            100% { opacity:1; }
        }
        @-webkit-keyframes blink{
            0% { opacity:1; }
            50% { opacity:0; }
            100% { opacity:1; }
        }
        @-moz-keyframes blink{
            0% { opacity:1; }
            50% { opacity:0; }
            100% { opacity:1; }
        }



        .container {
            position: relative;
            left: 50%;
            right: 50%;
            width: 24px;
            height: 24px;
        }
        .chevron {
            position: absolute;
            width: 28px;
            height: 8px;
            opacity: 0;
            transform: scale3d(0.5, 0.5, 0.5);
            animation: move 3s ease-out infinite;
        }
        .chevron:first-child {
            animation: move 3s ease-out 1s infinite;
        }
        .chevron:nth-child(2) {
            animation: move 3s ease-out 2s infinite;
        }
        .chevron:before,
        .chevron:after {
            content: ' ';
            position: absolute;
            top: 0;
            height: 100%;
            width: 51%;
            background: #656060;
        }
        .chevron:before {
            left: 0;
            transform: skew(0deg, 30deg);
        }
        .chevron:after {
            right: 0;
            width: 50%;
            transform: skew(0deg, -30deg);
        }
        @keyframes move {
            25% {
                opacity: 1;
            }
            33% {
                opacity: 1;
                transform: translateY(30px);
            }
            67% {
                opacity: 1;
                transform: translateY(40px);
            }
            100% {
                opacity: 0;
                transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
            }
        }
        @keyframes pulse {
            to {
                opacity: 1;
            }
        }
        /*文字显示隐藏效果*/
        .text {
            display: block;
            margin-top: 75px;
            margin-left: -30px;
            font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
            font-size: 20px;
            color: #656060;
            text-transform: uppercase;
            white-space: nowrap;
            opacity: .25;
            animation: pulse 2s linear alternate infinite;
        }
    </style>
    <!--非重点  向下滚动内容弹出的-->
    <style>
        p{height: 10em;text-align: center; vertical-align: middle;line-height: 10em; font-size: 1.5em; margin: 2em 1em; }
        p.div1{ background: #A3C6BE; color: #403F31;}
        p.div2{ background: #87A18E; color: #000; }
    </style>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>


<div style="margin: 0 auto; width:100%;height:300px;">
    <span class="element"></span>
</div>


<script>
    // 方法一  慢   
    // var typed = new Typed('.element', {//停顿1S
    //     strings: ["纠正一个错误的方法有很多 ^1000 .", "而解决一个错误的终极方法，就是不给它发生的机会。"], //输入内容, 支持html标签
    //     typeSpeed: 30 //打字速度  200
    //     ,backSpeed: 500 //回退速度  100
    //     ,showCursor: true
    //     ,cursorChar: "_"
    //     // ,typeSpeed: 0
    // });

    //方法二   这个速度太快了
    // <div id="typed-strings"></div>
    // var writeContent = 'Huangbin I Love You Forver';//要书写的内容
    // var  displayContent = $('#typed-strings');//展示书写文字的容器
    // var index = 0;//索引
    // var length = writeContent.length;//书写内容的长度
    // var tiemerName = null;//定时器的名字
    // function start(){
    //     displayContent.text('');//清空展示容器的内容
    //     tiemerName=setInterval(function(){
    //         displayContent.append(writeContent.charAt(index));//charAt返回指定所应出的字符；
    //         if(index++ === length){//如果写道最后一个字符了，清除定时器，从第一个字符重新开始写；
    //             clearInterval(tiemerName);//清除定时器
    //             index = 0;
    //             start()//回调，自己调用自己
    //         }
    //     },100);
    // }
    // start();


    // 方法三 

    var typed=new Typed(".element",{
        strings:["  ","看时光飞逝 我回首从前 曾经是莽撞少年 曾经度日如年 我是如此平凡却又如此幸运 我要说声谢谢你 在我生命中的每一天&nbsp;"],
        cursorChar:"_",
        typeSpeed:70,