50个前端入门练手项目，助你掌握前端基础知识

比眉伴天荒 2022-09-09 06:10 234阅读 0赞

![3bf9d91842d0efa3b94d889170ac3ef1.png][]

# 1.Expanding Cards    #

效果如图所示:

![7889a78acef19f02a392771a3fba23b9.png][] 1.png

*  源码\[1\]
 *  在线示例\[2\]

*  \[ \] 知识点总结:

CSS:弹性盒子布局中的`flex`属性:让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容。

JavaScript:利用`[].filter.call()`方法可快速实现简单的选项卡切换。如上述示例源码:

const panelItems = document.querySelectorAll(".container > .panel");
    panelItems.forEach(item => {
        item.addEventListener('click',() => {
            [].filter.call(item.parentElement.children,el => el !== item).forEach(el => el.classList.remove('active'));
            item.classList.add('active')
        });
    });
    
    复制代码

# 2.Progress Steps #

效果如图所示:

![3eb1af5547ebea99b00a8ea58883e2cd.gif][] 2.gif

*  源码\[3\]
 *  在线示例\[4\]

*  \[ \] 知识点总结:

CSS:`CSS`变量的用法以及弹性盒子垂直水平居中外加伪元素的用法。JavaScript:计算进度条的宽度，类名的操作。如上述示例部分源码如下:

function handleClass(el){
        let methods = {
            addClass,
            removeClass
        };
        function addClass(c){
            el.classList.add(c);
            return methods;
        };
        function removeClass(c){
            el.classList.remove(c);
            return methods;
        }
        return methods
    }
    复制代码

# 3.Rotating Navigation Animation #

效果如图所示:

![d2bfe44ffa40f7c0cf0b0add25ee0bb6.gif][] 3.gif

*  源码\[5\]
 *  在线示例\[6\]

*  \[ \] 知识点总结:

CSS:CSS弹性盒子布局加`rotate`动画。

JavaScript:添加和移除类名的操作。如上述示例部分源码如下:

const addClass = (el,className) => el.classList.add(className);
    const removeClass = (el,className) => el.classList.remove(className);
    复制代码

# 4.hidden-search-widget #

效果如图所示:

![f83ef92f031474f01025aa86fd5f669d.gif][] 4.gif

*  源码\[7\]
 *  在线示例\[8\]

*  \[ \] 知识点总结:

CSS:CSS过渡动画 + 宽度的更改 + `input`的`placeholder`样式。

JavaScript:添加和移除类名的操作。如上述示例部分源码如下:

.search.active > .input {
        width: 240px;
    }
    .search.active > .search-btn {
        transform: translateX(238px);
    }
    .search > .search-btn,.search > .input {
        border: none;
        width: 45px;
        height: 45px;
        outline: none;
        transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        border-radius: 8px;
    }
    复制代码

searchBtn.addEventListener('click',() => {
        searchContainer.classList.toggle('active');
        searchInput.focus();
    })
    复制代码

# 5.Blurry Loading #

效果如图所示:

![ff1522b9cabf38c17b37e43d6b1b6cf8.gif][]

5.gif

*  源码\[9\]
 *  在线示例\[10\]

*  \[ \] 知识点总结:

CSS:`CSS filter`属性的用法;。

JavaScript:定时器加动态设置样式。如上述示例部分源码如下:

let load = 0;
    let timer = null;
    let blurryLoadingHandler = function(){
        load++;
        if(load > 99){
            clearTimeout(timer)
        }else{
            timer = setTimeout(blurryLoadingHandler,20);
        }
        text.textContent = `页面加载${ load }%`;
        text.style.opacity = scale(load,0,100,1,0);
        bg.style.filter = `blur(${scale(load,0,100,20,0)}px)`;
    }
    blurryLoadingHandler();
    复制代码

这里有一个非常重要的工具函数(后续有好几个示例都用到了这个工具函数)，如下所示:

const scale = (n,inMin,inMax,outerMin,outerMax) => (n - inMin) * (outerMax - outerMin) / (inMax - inMin) + outerMin;
    复制代码

这个工具函数的作用就是将一个范围数字映射到另一个数字范围。比方说，将`1 ~ 100`的数字范围映射到`0 ~ 1`之间。详情\[11\]。

# 6.Scroll Animation #

效果如图所示:

![de33257062783466e3fd6f70ce551240.gif][]

6.gif

*  源码\[12\]
 *  在线示例\[13\]

*  \[ \] 知识点总结:

CSS:`CSS`位移动画。

JavaScript:动态创建元素+元素滚动事件监听+视图可见区域的判断 + 防抖函数。如上述示例部分源码如下:

function debounce(fn,time = 100){
        let timer = null;
        return function(){
            if(timer)clearTimeout(timer);
            timer = setTimeout(fn,time);
        }
    }
    let triggerBottom = window.innerHeight / 5 * 4;
    boxElements.forEach((box,index) => {
       const top = box.getBoundingClientRect().top;
       if(top <= triggerBottom){
           box.classList.add('show');
       }else{
          box.classList.remove('show');
       }
    })
    复制代码

# 7. Split Landing Page #

效果如图所示:

![ec40d1eef07969f896c65dfd0619c0a6.gif][]

7.gif

*  源码\[14\]
 *  在线示例\[15\]

*  \[ \] 知识点总结:

CSS:`CSS`过渡特效 + 弹性盒子垂直水平居中 + `CSS`定位 + 宽度的更改。

JavaScript:鼠标悬浮事件 + 类名的操作。如上述示例部分源码如下:

HTMLElement.prototype.addClass = function(className) {
        this.classList.add(className);
    };
    HTMLElement.prototype.removeClass = function(className){
        this.classList.remove(className);
    }
    const on = (el,type,handler,useCapture = false) => {
        if(el && type && handler) {
            el.addEventListener(type,handler,useCapture);
        }
    }
    on(leftSplit,'mouseenter',() => container.addClass('hover-left'));
    on(leftSplit,'mouseleave',() => container.removeClass('hover-left'));
    on(rightSplit,'mouseenter',() => container.addClass('hover-right'));
    on(rightSplit,'mouseleave',() => container.removeClass('hover-right'));
    复制代码

从这个示例，我也知道了`mouseenter、mouseleave`和`mouseover、mouseout`的区别，总结如下:

> 1.  enter只触发1次，只有等到鼠标离开了目标元素之后再进入才会继续触发，同理leave也是如此理解。而over与out就是不断的触发。
> 2.  enter进入子元素，通过e.target也无法区分是移入/移出子元素还是父元素，而over与out则可以区分。

# 8.Form Wave #

效果如图所示:

![e39e59bee62e0d0e7873d4c5e41ce213.gif][] 8.gif

*  源码\[16\]
 *  在线示例\[17\]

*  \[ \] 知识点总结:

CSS:`CSS`渐变 + 弹性盒子垂直水平居中 + `CSS`过渡动画 + `CSS`位移变换 + 关注焦点伪类选择器与同级元素选择器的用法。

JavaScript:字符串替换成标签 + 动态创建元素。如上述示例部分源码如下:

const createLetter = v => v.split("").map((letter,idx) => `<span style="transition-delay:${ idx * 50 }ms">${ letter }</span>`).join("");
    复制代码

# 9.Sound Board #

效果如图所示:

![f7cfbefd67406afa4deb98024b2a67fd.gif][] 9.gif

*  源码\[18\]
 *  在线示例\[19\]

*  \[ \] 知识点总结:

CSS:`CSS`渐变 + 弹性盒子垂直水平居中 + 基本样式。

JavaScript:动态创建元素 + 播放音频(`audio`标签)。如上述示例部分源码如下:

sounds.forEach(sound => {
        const btn = create('button');
        btn.textContent = sound;
        btn.type = "button";
        const audio = create('audio');
        audio.src = "./audio/" + sound + '.mp3';
        audio.id = sound;
        btn.addEventListener('click',() => {
            stopSounds();
            $('#' + sound).play();
        });
        buttonContainer.appendChild(btn);
        buttonContainer.insertAdjacentElement('beforebegin',audio);
    });
    复制代码

# 10. Dad Jokes #

效果如图所示:

![ed0dc5cab71547202ea06b3a7e117419.gif][] 10.gif

*  源码\[20\]
 *  在线示例\[21\]

*  \[ \] 知识点总结:

CSS:`CSS`渐变 + 弹性盒子垂直水平居中 + 基本样式。

JavaScript:事件监听 + `fetch API`请求接口。如上述示例部分源码如下:

const api = 'https://icanhazdadjoke.com';
    const on = (el,type,handler,useCapture = false) => {
        if(el && type && handler){
            el.addEventListener(type,handler,useCapture);
        }
    }
    on(getJokeBtn,'click',request);
    request();
    async function request(){
        const res = await fetch(api,headerConfig);
        const data = await res.json();
        content.innerHTML = data.joke;
    }
    复制代码

# 11. Event Keycodes #

效果如图所示:

![20c268381791a77108c301a5273eb005.gif][] 11.gif

*  源码\[22\]
 *  在线示例\[23\]

*  \[ \] 知识点总结:

CSS:`CSS`渐变 + 弹性盒子垂直水平居中 + 基本样式。

JavaScript:键盘事件监听 + 事件对象的属性。如上述示例部分源码如下:

const container = document.querySelector('#container');
    window.addEventListener("keydown",event => {
        createKeyCodeTemplate(event);
    });
    
    function createKeyCodeTemplate(e){
        const { key,keyCode,code } = e;
        let template = "";
        [
            {
                title:"event.key",
                content:key === " " ? "Space" : key
            },
            {
                title:"event.keyCode",
                content:keyCode
            },
            {
                title:"event.code",
                content:code
            }
        ].forEach(value => {
            template += `<div class="key"><small>${ value.title }</small>${ value.content }</div>`;
        });
        container.innerHTML = template;
    }
    复制代码

# 12. Faq Collapse #

效果如图所示:

![88dd0f2c211167debe7538110b4c828a.gif][] 12.gif

*  源码\[24\]
 *  在线示例\[25\]

*  \[ \] 知识点总结:

CSS:`font-awesome`字体库的使用 + 伪元素选择器 + 定位 + `CSS`渐变 + 基本样式。

JavaScript:动态创建元素 + 类名的切换 + 事件代理。如上述示例部分源码如下:

const faqs = document.querySelectorAll('.faq-container > .faq');
    container.addEventListener('click',e => {
       if(e.target.className.indexOf('faq-icon') > -1){
          faqs[[].indexOf.call(faqs,e.target.parentElement)].classList.toggle('active');
       }
    });
    复制代码

# 13. Random Choice Picker #

效果如图所示:

![92b447f95c57e2fef30c25337df548c9.gif][]

13.gif

*  源码\[26\]
 *  在线示例\[27\]

*  \[ \] 知识点总结:

CSS:基本样式。

JavaScript:动态创建元素 + 类名的切换 + 延迟定时器的用法 + 随机数 + 键盘事件的监听。如上述示例部分源码如下:

function createTags(value,splitSymbol){
        if(!value || !value.length)return;
        const words = value.split(splitSymbol).map(v => v.trim()).filter(v => v);
        tags.innerHTML = '';
        words.forEach(word => {
            const tag = document.createElement('span');
            tag.classList.add('tag');
            tag.innerText = word;
            tags.appendChild(tag);
        })
    }
    function randomTag(){
        const time = 50;
        let timer = null;
        let randomHighLight = () => {
            const randomTagElement = pickerRandomTag();
            highLightTag(randomTagElement);
            timer = setTimeout(randomHighLight,100);
            setTimeout(() => {
                unHighLightTag(randomTagElement);
            },100);
        }
        randomHighLight();
        setTimeout(() => {
            clearTimeout(timer);
            setTimeout(() => {
                const randomTagElement = pickerRandomTag();
                highLightTag(randomTagElement);
            },100);
        },time * 100);
    }
    function pickerRandomTag(){
        const tagElements = document.querySelectorAll('#tags .tag');
        return tagElements[Math.floor(Math.random() * tagElements.length)];
    }
    复制代码

# 14. Animated Navigation #

效果如图所示:

![938f4ab40db4766fd3b07fcadc9dfe6b.gif][] 14.gif

*  源码\[28\]
 *  在线示例\[29\]

*  \[ \] 知识点总结:

CSS:基本样式 + 定位 + 位移变换以及角度旋转。

JavaScript:类名的切换。如上述示例部分源码如下:

toggle.addEventListener('click',() => nav.classList.toggle('active'));
    复制代码

# 15. Incrementing Counter #

效果如图所示:

![b1d1898bade150884e7967aa39299abe.gif][] 15.gif

*  源码\[30\]
 *  在线示例\[31\]

*  \[ \] 知识点总结:

CSS:基本样式 + `CSS`渐变 + `font-awesome`字体库的使用。

JavaScript:动态创建元素 + 定时器实现增量相加。如上述示例部分源码如下:

function updateCounterHandler() {
        const counters_elements = document.querySelectorAll('.counter');
        counters_elements.forEach(element => {
            element.textContent = '0';
            const updateCounter = () => {
                const value = +element.getAttribute('data-count');
                const textContent = +element.textContent;
                const increment = value / 100;
                if (textContent < value) {
                    element.textContent = `${Math.ceil(increment + textContent)}`;
                    setTimeout(updateCounter, 10);
                } else {
                    element.textContent = value;
                }
            }
            updateCounter();
        });
    }
    复制代码

# 16. Drink Water #

效果如图所示:

![2134e615dc9567058a5ffbc14ce58ace.gif][]

16.gif

*  源码\[32\]
 *  在线示例\[33\]

*  \[ \] 知识点总结:

CSS:基本样式 + `CSS`渐变 + `CSS`过渡特效。

JavaScript:正则表达式 + 循环 + 样式与内容的设置。如上述示例部分源码如下:

if (actives.length === l) {
                    setHeightVisible('0', 'hidden', '350px', 'visible');
                    setTextContent("100%", "0L");
                } else if (actives.length === 0) {
                    setHeightVisible('350px', 'visible', '0', 'hidden');
                    setTextContent("12.5%", "2L");
                } else {
                    const h1 = unitHei * (l - actives.length) + 'px';
                    const h2 = unitHei * actives.length + 'px';
                    setHeightVisible(h1, 'visible', h2, 'visible');
                    const t1 = (unitHei * actives.length / 350) * 100 + "%";
                    const t2 = (cups[i].textContent.replace(/ml/, "").replace(/\s+/, "") - 0) * (l - actives.length) / 1000 + 'L';
                    setTextContent(t1, t2);
    }
    复制代码

# 17. movie-app #

效果如图所示:

![07a3238cccac60dc4f4657f624107fed.gif][]

17.gif

*  源码\[34\]
 *  在线示例\[35\]

*  \[ \] 知识点总结:

CSS:基本样式 + `CSS`渐变 + `CSS`过渡特效 + 清除浮动。

JavaScript:接口请求 + 键盘事件的监听。如上述示例部分源码如下:

search.addEventListener('keydown',e => {
            if(e.keyCode === 13){
                let value = e.target.value.replace(/\s+/,"");
                if(value){
                    getMovies(SEARCH_API + value);
                    setTimeout(() => {
                        e.target.value = "";
                    },1000);
                }else{
                    window.location.reload(true);
                }
            }
        })
    复制代码

> PS:这个示例效果由于接口访问受限，需要xx访问。

# 18. background-slider #

效果如图所示:

![d15ed0f097902df895fad4a527021113.gif][]

18.gif

*  源码\[36\]
 *  在线示例\[37\]

*  \[ \] 知识点总结:

CSS:基本样式 + `CSS`渐变 + 阴影效果 + 定位 + 伪元素选择器。

JavaScript:背景设置与类名的操作。如上述示例部分源码如下:

let currentActive = 0;
    function setBackgroundImage(){
        const url = slideItems[currentActive].style.backgroundImage;
        background.style.backgroundImage = url;
    }
    function setSlideItem(){
        const currentSlide = slideItems[currentActive];
        const siblings = [].filter.call(slideItems,slide => slide !== currentSlide);
        currentSlide.classList.add('active');
        siblings.forEach(slide => slide.classList.remove('active'));
    }
    复制代码

# 19. theme-clock #

效果如图所示:

![def52f66da67ea09e6f265fe430e2309.gif][] 19.gif

*  源码\[38\]
 *  在线示例\[39\]

*  \[ \] 知识点总结:

CSS:基本样式 + `CSS`变量 + 阴影效果 + 定位。

JavaScript:中英文的切换以及主题模式的切换，还有日期对象的处理。如上述示例部分源码如下:

function setCurrentDate(){
        const date = new Date();
        const month = date.getMonth();
        const day = date.getDay();
        const time = date.getDate();
        const hour = date.getHours();
        const hourForClock = hour % 12;
        const minute = date.getMinutes();
        const second = date.getSeconds();
        const amPm = hour >= 12 ? langText[currentLang]['time-after-text'] : langText[currentLang]['time-before-text'];
        const w = currentLang === 'zh' ? dayZHs : days;
        const m = currentLang === 'zh' ? monthZHs : months;
        const values = [
            `translate(-50%,-100%) rotate(${ scale(hourForClock,0,11,0,360) }deg)`,
            `translate(-50%,-100%) rotate(${ scale(minute,0,59,0,360) }deg)`,
            `translate(-50%,-100%) rotate(${ scale(second,0,59,0,360) }deg)`
        ];
        [hourEl,minuteEl,secondEl].forEach((item,index) => setTransForm(item,values[index]));
        timeEl.innerHTML = `${ hour }:${ minute >= 10 ? minute : '0' + minute } ${ amPm }`;
        dateEl.innerHTML = `${w[day]},${ m[month]}<span class="circle">${ time }</span>${ langText[currentLang]['date-day-text'] }`;
        timer = setTimeout(setCurrentDate,1000);
    }
    复制代码

> PS:本示例也用到了与示例5一样的工具函数`scale`函数

# 20. button-ripple-effect #

效果如图所示:

![5fd061ef7055d24a5f883dcd730a3943.gif][] 20.gif

*  源码\[40\]
 *  在线示例\[41\]

*  \[ \] 知识点总结:

CSS:基本样式 + `CSS`渐变 + `CSS`动画。

JavaScript:坐标的计算 + 偏移 + 定时器。如上述示例部分源码如下:

const x = e.clientX;
    const y = e.clientY;
    const left = this.offsetLeft;
    const top = this.offsetTop;
    
    const circleX = x - left;
    const circleY = y - top;
    const span = document.createElement('span');
    span.classList.add('circle');
    span.style.left = circleX + 'px';
    span.style.top = circleY + 'px';
    this.appendChild(span);
    setTimeout(() => span.remove(),1000);
    复制代码

# 21. drawing-app #

效果如图所示:

![d1bf2acf5dd693fe3c2f8cbabf105e4d.gif][] 21.gif

*  源码\[42\]
 *  在线示例\[43\]

*  \[ \] 知识点总结:

CSS:基本样式。

JavaScript:`canvas API` \+ `mouse`事件以及计算`x`与`y`坐标 + `ewColorPicker`的用法。如上述示例部分源码如下:

function mouseDownHandler(e){
        isPressed = true;
        x = e.offsetX;
        y = e.offsetY;
    }
    function throttle(fn,wait = 100){
        let done = false;
        return (...args) => {
            if(!done){
                fn.call(this,args);
                done = true;
            }
            setTimeout(() => {
                done = false;
            },wait);
        }
    }
    复制代码

# 22. drag-n-drop #

效果如图所示:

![f5814ea6206f52c964150d8cbe3dadc5.png][] 22.png

*  源码\[44\]
 *  在线示例\[45\]

*  \[ \] 知识点总结:

CSS:基本样式 + `CSS`渐变 + `CSS`弹性盒子布局。

JavaScript:`drag event API` \+ 随机生成图片。如上述示例部分源码如下:

function onDragStart(){
        this.classList.add('drag-move');
        setTimeout(() => this.className = "invisible",200);
    }
    function onDragEnd(){
        this.classList.add("drag-fill");
    }
    
    function onDragOver(e){
        e.preventDefault();
    }
    function onDragEnter(e){
        e.preventDefault();
        this.classList.add('drag-active');
    }
    function onDragLeave(){
        this.className = "drag-item";
    }
    function onDrop(){
        this.className = "drag-item";
        this.appendChild(dragFill);
    }
    复制代码

# 23. content-placholder #

效果如图所示:

![8c08d4f7a43fe98cca7e21b6cac9206d.gif][]

23.gif

*  源码\[46\]
 *  在线示例\[47\]

*  \[ \] 知识点总结:

CSS:基本样式 + `CSS`渐变 + `CSS`卡片样式。

JavaScript:骨架屏加载效果。如上述示例部分源码如下:

animated_bgs.forEach(bg => bg.classList.remove("animated-bg"));
    animated_bgs_texts.forEach(text => text.classList.remove("animated-bg-text"));
    复制代码

# 24. sticky-navbar #

效果如图所示:

![ad0520994e9e8caafe3e46bd2342012d.gif][]

24.gif

*  源码\[48\]
 *  在线示例\[49\]

*  \[ \] 知识点总结:

CSS:基本样式 + `CSS`渐变 + 固定定位导航。

JavaScript:滚动事件。如上述示例部分源码如下:

window.addEventListener("scroll",e => {
        if(window.scrollY > nav.offsetHeight + 100) {
            nav.classList.add("active");
        }else{
            nav.classList.remove("active");
        }
    })
    复制代码

> PS:这里也做了移动端的布局。

# 25. double-slider #

效果如图所示:

![ecea196ae8ce649d15fb9735d2931a8c.gif][]

25.gif

*  源码\[50\]
 *  在线示例\[51\]

*  \[ \] 知识点总结:

CSS:基本样式 + `CSS`渐变 + 位移变换。

JavaScript:轮播图的实现思路，主要还是利用`transformY`移动端使用`transformX`。如上述示例部分源码如下:

function setTransform(){
        let translate = isHorizontal() ? "translateX" : "translateY";
        leftSlide.style.transform = `${ translate }(${position * currentIndex}px)`;
        rightSlide.style.transform = `${ translate }(${-(position * currentIndex)}px)`;
    }
    复制代码

# 26. toast-notification #

效果如图所示:

![8baf81f6a0f9d5c05d1f106ee572ba97.gif][]

26.gif

*  源码\[52\]
 *  在线示例\[53\]

*  \[ \] 知识点总结:

CSS:基本样式 + 消息提示框的基本样式。

JavaScript:封装一个随机创建消息提示框。如上述示例部分源码如下:

function createNotification({message = null,type = null,auto = false,autoTime = 1000,left = 0,top = 0}){
        const toastItem = createEle("div");
        let closeItem = null;
        if(!auto){
            closeItem = createEle("span");
            closeItem.innerHTML = "×";
            closeIte.className = "toast-close-btn";
        }
        toastItem.className = `toast toast-${type}`;
        toastItem.textContent = message;
        if(closeItem)toastItem.appendChild(closeItem);
        container.appendChild(toastItem);
        const leftValue = (left - toastItem.clientWidth) <= 0 ? 0 : left - toastItem.clientWidth - 30;
        const topValue = (top - toastItem.clientHeight) <= 0 ? 0 : top - toastItem.clientHeight - 30;
        toastItem.style.left = leftValue + 'px';
        toastItem.style.top = topValue + 'px';
        if(auto){
            setTimeout(() => {
                toastItem.remove();
            },autoTime);
        }else{
            closeItem.addEventListener("click",() => {
                toastItem.remove();
            });
        }
        
    }
    复制代码

消息提示框实现思路可以参考这篇文章\[54\]。

# 27. github-profiles #

效果如图所示:

![7139a96d5726d0572e0189ccb697a895.gif][]

27.gif

*  源码\[55\]
 *  在线示例\[56\]

*  \[ \] 知识点总结:

CSS:基本样式。

JavaScript:`try-catch`处理异常语法 + `axios API`请求`github API` \+ `async-await`语法。如上述示例部分源码如下:

async function getRepoList(username){
        try {
            const { data } = await axios(githubAPI + username + '/repos?sort=created');
            addRepoList(data);
        } catch (error) {
            if(error.response.status == 404){
                createErrorCard("查找仓库出错!");
            }
        }
    }
    复制代码

# 28. double-click-heart #

效果如图所示:

![8a2c56c5f784dc47b5756f10df1e7a56.gif][]

28.gif

*  源码\[57\]
 *  在线示例\[58\]

*  \[ \] 知识点总结:

CSS:基本样式 + `CSS`画爱心。

JavaScript:事件次数的计算。如上述示例部分源码如下:

function clickHandler(e){
        if(clickTime === 0){
            clickTime = Date.now();
        }else{
            if(Date.now() - clickTime < 400){
                createHeart(e);
                clickTime = 0;
            }else{
                clickTime = Date.now();
            }
        }
    }
    复制代码

# 29. auto-text-effect #

效果如图所示:

![78a0f43c3ac172cfac94041180009f14.gif][]

29.gif

*  源码\[59\]
 *  在线示例\[60\]

*  \[ \] 知识点总结:

CSS:基本样式。

JavaScript:定时器 + 定时器时间的计算。如上述示例部分源码如下:

let time = 300 / speed.value;
    writeText();
    function writeText(){
        text.innerHTML = string.slice(0,idx);
        idx++;
        if(idx > string.length){
            idx = 1;
        }
        setTimeout(writeText,time);
    }
    speed.addEventListener("input",e => time = 300 / e.target.value);
    复制代码

# 30. password generator #

效果如图所示:

![454d0abb9df755469372fa96cd6c06f0.gif][]

30.gif

*  源码\[61\]
 *  在线示例\[62\]

*  \[ \] 知识点总结:

CSS:基本样式布局。

JavaScript:中英文切换 + 选择框事件监听 + 随机数 + `copy API`。如上述示例部分源码如下:

function getRandomLower(){
        // a ~ z 的code为 97 ~ 122
        // 可根据charCodeAt()方法获取
        return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
    }
    function getRandomUpper(){
        // A ~ Z 的code为 65 ~ 90
        // 可根据charCodeAt()方法获取
        return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
    }
    function getRandomNumber(){
        // 0 ~ 9的code为48 ~ 57
        // 可根据charCodeAt()方法获取
        return String.fromCharCode(Math.floor(Math.random() * 10) + 48);
    }
    复制代码

# 31. good-cheap-fast #

效果如图所示:

![9e2bf2b3d1955654021ad95cfe3e1463.gif][] 31.gif

*  源码\[63\]
 *  在线示例\[64\]

*  \[ \] 知识点总结:

CSS:`CSS`实现开关小组件样式 + 基本布局样式。

JavaScript:`input`的`change`事件的监听。如上述示例部分源码如下:

const checkBoxElements = document.querySelectorAll(".switch-container input[type='checkbox']");
    checkBoxElements.forEach(item => item.addEventListener("change",e => {
        const index = Array.from(checkBoxElements).indexOf(e.target);
        if(Array.from(checkBoxElements).every(v => v.checked)){
            if(index === 0){
                checkBoxElements[2].checked = false;
            }else if(index === 1){
                checkBoxElements[0].checked = false;
            }else{
                checkBoxElements[1].checked = false;
            }
        }
    }));
    复制代码

# 32. notes-app #

效果如图所示:

![5f630e108a9b771c5229415b356d1dd5.gif][]

32.gif

*  源码\[65\]
 *  在线示例\[66\]

*  \[ \] 知识点总结:

CSS:基本样式 + 卡片布局。

JavaScript:`marked.js`的使用 + `localStorage API`存储数据 + 鼠标光标位置的计算。如上述示例部分源码如下:

on($(".edit", note), "click", e => {
          const isFocus = textarea.getAttribute("data-focus");
          if (isFocus === "false") {
                textarea.setAttribute("data-focus","true");
                if(textarea.classList.contains("hidden")){
                    textarea.classList.remove("hidden");
                }
                if(!focusStatus){
                    textarea.value = notes[index].text;
                }
                const text = textarea.value.trim();
                // console.log(text);
                if (textarea.setSelectionRange) {
                    textarea.focus();
                    textarea.setSelectionRange(text.length, text.length);
                }else if (textarea.createTextRange) {
                    const range = textarea.createTextRange();
                    range.collapse(true);
                    range.moveEnd('character', text.length);
                    range.moveStart('character', text.length);
                    range.select();
                }
         } else {
            textarea.setAttribute("data-focus","false");
            notes[index].text = textarea.value;
            main.innerHTML = marked(notes[index].text);
            setData("notes", notes);
        }
    });
    复制代码

# 33. animated-countdown #

效果如图所示:

![c49e84df62658fff570de86828ca5392.gif][]

33.gif

*  源码\[67\]
 *  在线示例\[68\]

*  \[ \] 知识点总结:

CSS:基本样式 + 位移、旋转、缩放动画。

JavaScript:动画事件 + 动画的创建与重置。如上述示例部分源码如下:

function runAnimation(){
        const numArr = $$("span",numGroup);
        const nextToLast = numArr.length - 1;
        numArr[0].classList.add("in");
        numArr.forEach((num,index) => {
            num.addEventListener("animationend",e => {
                const {animationName} = e;
                if(animationName === "goIn" && index !== nextToLast){
                    num.classList.remove("in");
                    num.classList.add("out");
                }else if(animationName === "goOut" && num.nextElementSibling){
                    num.nextElementSibling.classList.add("in");
                }else{
                    counter.classList.add("hide");
                    final.classList.add("show");
                }
            })
        })
    }
    function resetAnimation(){
        counter.classList.remove("hide");
        final.classList.remove("show");
        const numArr = $$("span",numGroup);
        if(numArr){
            numArr.forEach(num => num.classList.value = '');
            numArr[0].classList.add("in");
        }
    }
    复制代码

# 34. image-carousel #

效果如图所示:

![00bb7c394e8cac6372a1c63151ad8feb.png][] 34.png

*  源码\[69\]
 *  在线示例\[70\]

*  \[ \] 知识点总结:

CSS:基本样式布局。

JavaScript:定时器实现轮播。如上述示例部分源码如下:

function changeCarouselItem(){
        if(currentIndex > carouselItems.length - 1){
            currentIndex = 0;
        }else if(currentIndex < 0){
            currentIndex = carouselItems.length - 1;
        }
            carousel.style.transform = `translateX(-${ currentIndex * carouselContainer.offsetWidth     }px)`;
    }
    复制代码

> PS:这里额外踩了一个定时器的坑，也就是说，比如我们使用setTimeout模拟实现setInterval方法在这里是会出现问题的，我在js代码里添加了注释说明。

// let interval = mySetInterval(run,1000);
    // Why use this method can't achieve the desired effect?
    // Use this method as follow to replace window.setInterval,clicked the prev button more to get the stranger effect.
    // Maybe this method does not conform to the specification,So make sure to use window.setInterval.
    // function mySetInterval(handler,time = 1000){
    //     let timer = null;
    //     const interval = () => {
    //         handler();
    //         timer = setTimeout(interval,time);
    //     }
    //     interval();
    //     return {
    //         clearMyInterval(){
    //             clearTimeout(timer);
    //         }
    //     }
    // }
    复制代码

这是因为我们用`setTimeout`实现的定时器并不符合规范，`setInterval`默认会有`10ms`的延迟执行。参考规范\[71\]。

# 35. hover board #

效果如图所示:

![dca171d557281cf7fb4376df4a80c75f.gif][]

35.gif

*  源码\[72\]
 *  在线示例\[73\]

*  \[ \] 知识点总结:

CSS:基本样式 + `CSS`渐变。

JavaScript:动态创建元素 + 悬浮事件。如上述示例部分源码如下:

function setColor(element){
        element.style.background = `linear-gradient(135deg, ${ randomColor() } 10%, ${ randomColor() } 100%)`;
        element.style.boxShadow = `0 0 2px ${ randomColor() },0 0 10px ${ randomColor() }`;
    }
    function removeColor(element){
        element.style.background = `linear-gradient(135deg, #1d064e 10%, #10031a 100%)`;
        element.style.boxShadow = `0 0 2px #736a85`;
    }
    复制代码

# 36. pokedex #

效果如图所示:

![bb751a498db4e1c14a55c3a465565be5.gif][]

36.gif

*  源码\[74\]
 *  在线示例\[75\]

*  \[ \] 知识点总结:

CSS:基本样式布局 + `CSS`渐变。

JavaScript:`fetch API`接口请求 + 创建卡片。如上述示例部分源码如下:

function createPokemon(pokemon){
        const pokemonItem = document.createElement("div");
        pokemonItem.classList.add("pokedex");
    
        const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1).toLowerCase();
        const id = pokemon.id.toString().padStart(3,"0");
        const poke_types = pokemon.types.map(type => type.type.name);
        const type = main_types.find(type => poke_types.indexOf(type) > -1);
        const color = colors[type];
        pokemonItem.style.background = `linear-gradient(135deg, ${ color } 10%, ${ randomColor() } 100%)`;
        pokemonItem.innerHTML = `
        <div class="pokedex-avatar">
            <img src="https://pokeres.bastionbot.org/images/pokemon/${pokemon.id}.png" alt="the pokemon">
        </div>
        <div class="info">
            <span class="number">#${ id }</span>
            <h3 class="name">${ name }</h3>
            <small class="type">Type:<span>${ type }</span></small>
        </div>`;
        container.appendChild(pokemonItem);
    }
    复制代码

> 特别说明:接口似乎不太稳定，也许是我网络原因，图片没有加载出来。

# 37. mobile-tab-navigation #

效果如图所示:

![e34321992f9a65dcaa2425ff87245a54.gif][]

37.gif

*  源码\[76\]
 *  在线示例\[77\]

*  \[ \] 知识点总结:

CSS:基本样式布局 + `CSS`渐变实现手机布局。2. JavaScript:感觉就是移动端实现一个轮播图切换，利用`opacity`的设置，没什么好说的。如上述示例部分源码如下:

function hideAllElement(nodeList){
        nodeList.forEach(item => item.classList.remove("active"));
    }
    navItems.forEach((item,index) => {
        item.addEventListener("click",() => {
            hideAllElement(navItems);
            hideAllElement(carouselItems);
            item.classList.add("active");
            carouselItems[index].classList.add("active");
        })
    })
    复制代码

# 38. password-strength-background #

效果如图所示:

![9a56ff678a31cd1a6673afda2e69eb53.gif][]

38.gif

*  源码\[78\]
 *  在线示例\[79\]

*  \[ \] 知识点总结:

CSS:其实主要是使用`tailwind.css`这个原子化`CSS`框架。

JavaScript:监听输入框事件，然后改变背景模糊度。如上述示例部分源码如下:

password.addEventListener("input",e => {
        const { value } = e.target;
        const blur = 20 - value.length * 2;
        background.style.filter = `blur(${ blur }px)`;
    });
    复制代码

# 39. 3D-background-boxes #

效果如图所示:

![caeca359beb2276b5e762e1dd830d621.gif][]

39.gif

*  源码\[80\]
 *  在线示例\[81\]

*  \[ \] 知识点总结:

CSS:`vw、vh`布局 + `skew`倾斜变换。

JavaScript:循环 + 背景图定位的设置。如上述示例部分源码如下:

function createBox(){
        for(let i = 0;i < 4;i++){
            for(let j = 0;j < 4;j++){
                const box = document.createElement("div");
                box.classList.add("box");
                box.style.backgroundPosition = `${ -j * 15 }vw ${ -i * 15 }vh`;
                boxContainer.appendChild(box);
            }
        }
    }
    复制代码

# 40. Verify Your Account #

效果如图所示:

![1f28a213086058f48c249f3d4755c72f.gif][]

40.gif

*  源码\[82\]
 *  在线示例\[83\]

*  \[ \] 知识点总结:

CSS:基本样式布局 + `input`的一些特别样式设置。

JavaScript:`JavaScript focus`事件。如上述示例部分源码如下:

.code-container .code:focus {
        border-color: #2397ef;
    }
    .code::-webkit-outer-spin-button,
    .code::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    .code:valid {
        border-color: #034775;
        box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.25);
    }
    复制代码

function onFocusHandler(nodeList){
        onFocus(nodeList[0]);
        nodeList.forEach((node,index) => {
            node.addEventListener("keydown",e => {
                // console.log(e.key);
                if(e.key >= 0 && e.key <= 9){
                    nodeList[index].value = "";
                    setTimeout(() => onFocus(nodeList[index + 1]),0);
                }else{
                    setTimeout(() => onFocus(nodeList[index - 1]),0);
                }
            })
        });
    }
    function onFocus(node){
        if(!node)return;
        const { nodeName } = node;
        return nodeName && nodeName.toLowerCase() === "input" && node.focus();
    }
    复制代码

# 41. live-user-filter #

效果如图所示:

![1b4ce1eb4daeea6be1a9d3c0213def9c.gif][]

41.gif

*  源码\[84\]
 *  在线示例\[85\]

*  \[ \] 知识点总结:

CSS:基本样式布局 + 滚动条样式。

JavaScript:`fetch API`接口请求 + `input`事件过滤数据。如上述示例部分源码如下:

async function requestData(){
        const res = await fetch('https://randomuser.me/api?results=50');
        const { results } = await res.json();
        result.innerHTML = "";
    
        results.forEach(user => {
            const listItem = document.createElement("li");
            filterData.push(listItem);
            const { picture:{ large },name:{ first,last },location:{ city,country } } = user;
            listItem.innerHTML = `
                <img src="${ large }" alt="${ first + ' ' + last }" />
                <div class="user-info">
                    <h4>${ first }  ${ last }</h4>
                    <p>${ city },${ country }</p>
                </div>
            `;
            result.appendChild(listItem);
        })
    }
    复制代码

# 42. feedback-ui-design #

效果如图所示:

![0432b45ba726df1aaa87c5268613ca26.gif][] 42.gif

*  源码\[86\]
 *  在线示例\[87\]

*  \[ \] 知识点总结:

CSS:`CSS`画爱心 + 基本样式布局。

JavaScript:选项卡切换功能的实现。如上述示例部分源码如下:

ratingItem.forEach(item => {
        item.addEventListener("click",e => {
            siblings(item).forEach(sib => sib.classList.remove("active"));
            item.classList.add("active");
            selectRating = item.innerText;
        })
    });
    send.addEventListener("click",() => {
        selectRatingItem.innerText = selectRating;
        sendPage.classList.add("hide");
        receivePage.classList.remove("hide");
    });
    back.addEventListener("click",() => {
        selectRating = $(".rating.active").innerText;
        selectRatingItem.innerText = $(".rating.active").innerText;
        sendPage.classList.remove("hide");
        receivePage.classList.add("hide");
    });
    复制代码

# 43. custom-range-slider #

效果如图所示:

![49144e6790d12660f5668a9cd869f44e.gif][] 43.gif

*  源码\[88\]
 *  在线示例\[89\]

*  \[ \] 知识点总结:

CSS:`input`元素的样式设置(兼容写法) + 基本样式布局。

JavaScript:`input range`元素的`input`事件监听。如上述示例部分源码如下:

input[type="range"]::-webkit-slider-runnable-track {
        background-image: linear-gradient(135deg, #E2B0FF 10%, #9F44D3 100%);
        width: 100%;
        height: 12px;
        cursor: pointer;
        border-radius: 4px;
    }
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-image: linear-gradient(135deg, #d9e2e6 10%, #e4e1e4 100%);
        border: 1px solid #b233e4;
        cursor: pointer;
        margin-top: -6px;
    }
    复制代码

range.addEventListener("input",e => {
        // string to the number
        const value = +e.target.value;
        const label = e.target.nextElementSibling;
    
        const range_width = getStyle(e.target,"width");//XXpx
        const label_width = getStyle(label,"width");//XXpx
    
        // Due to contain px,slice the width
        const num_width = +range_width.slice(0,range_width.length - 2);
        const num_label_width = +label_width.slice(0,label_width.length - 2);
    
        const min = +e.target.min;
        const max = +e.target.max;
    
        const left = value * (num_width / max) - num_label_width / 2 + scale(value,min,max,10,-10);
    
        label.style.left = `${left}px`;
        label.innerHTML = value;
    });
    复制代码

# 44. netflix-mobile-navigation #

效果如图所示:

![f05e1c0c13e46b41db7fdadf2a223bcd.gif][] 44.gif

*  源码\[90\]
 *  在线示例\[91\]

*  \[ \] 知识点总结:

CSS:导航宽度的变化 + `CSS`渐变 + 基本样式布局。

JavaScript:点击按钮切换导航栏的显隐。如上述示例部分源码如下:

function changeNav(type){
        navList.forEach(nav => nav.classList[type === "open" ? "add" : "remove"]("visible"));
    }
    复制代码

# 45. quiz-app #

效果如图所示:

![be2b79a0e48bb394db698bd046280c94.gif][]

45.gif

*  源码\[92\]
 *  在线示例\[93\]

*  \[ \] 知识点总结:

CSS:卡片布局 + 基本样式。

JavaScript:表单提交 + 选择题的计算。如上述示例部分源码如下:

submit.addEventListener("click",() => {
        const answer = getSelected();
        if(answer){
            if(answer === quizData[currentQuestion].correct){
                score++;
            }
            currentQuestion++;
            if(currentQuestion > quizData.length - 1){
                quizContainer.innerHTML = `
                    <h2>You answered ${ score } / ${ quizData.length } questions correctly!</h2>
                    <button type="button" class="btn" onclick="location.reload()">reload</button>
                `
            }else{
                loadQuiz();
            }
        }
    })
    复制代码

# 46. testimonial-box-switcher #

效果如图所示:

![e914ce3fead400a963f36812d5d50e93.gif][]

46.gif

*  源码\[94\]
 *  在线示例\[95\]

*  \[ \] 知识点总结:

CSS:`CSS`动画 + 宽度的改变实现进度条 + `font-awesome`字体库的使用 + 基本样式布局。

JavaScript:定时器的用法,注意定时器的执行时间与设置进度条的执行动画时间一样。如上述示例部分源码如下:

.progress-bar {
        width: 100%;
        height: 4px;
        background-color: #fff;
        animation: grow 10s linear infinite;
        transform-origin: left;
    }
    @keyframes grow {
        0% {
            transform: scaleX(0);
        }
    }
    复制代码

function updateTestimonial(){
        const { text,name,position,photo } = testimonials[currentIndex];
        const renderElements = [testimonial,username,role];
        userImage.setAttribute("src",photo);
        order.innerHTML = currentIndex + 1;
        [text,name,position].forEach((item,index) => renderElements[index].innerHTML = item);
        currentIndex++;
        if(currentIndex > testimonials.length - 1){
            currentIndex = 0;
        }
    }
    复制代码

> 特别说明:CSS也是可以实现进度条的。

# 47. random-image-feed #

效果如图所示:

![55db9bee9345aa56146fbfa77365cea2.gif][]

47.gif

*  源码\[96\]
 *  在线示例\[97\]

*  \[ \] 知识点总结:

CSS:图片布局 + 基本样式布局 + `CSS`提示框的实现(定位 + 伪元素) + `CSS`实现回到顶部效果。

JavaScript:随机数 + (滚动事件的监听)控制回到顶部按钮的显隐。如上述示例部分源码如下:

function onLoad(rows = 5) {
        container.innerHTML = "";
        for (let i = 0; i < rows * 3; i++) {
            const imageItem = document.createElement("img");
            imageItem.src = `${refreshURL}${getRandomSize()}`;
            imageItem.alt = "random image-" + i;
            imageItem.loading = "lazy";
            container.appendChild(imageItem);
        }
    }
    function getRandomSize() {
        return `${getRandomValue()}x${getRandomValue()}`;
    }
    function getRandomValue() {
        return Math.floor(Math.random() * 10) + 300;
    }
    window.onload = () => {
        changeBtn.addEventListener("click", () => onLoad());
        window.addEventListener("scroll", () => {
            const { scrollTop, scrollHeight } = document.documentElement || document.body;
            const { clientHeight } = flexCenter;
            back.style.display = scrollTop + clientHeight > scrollHeight ? 'block' : 'none';
        })
        onLoad();
    }
    复制代码

# 48. todo-list #

效果如图所示:

48.gif

*  源码\[98\]
 *  在线示例\[99\]

*  \[ \] 知识点总结:

CSS:基本样式布局 + `CSS`渐变。

JavaScript:`keydown`与`contextmenu`事件的监听 + `localStorage API`存储数据。如上述示例部分源码如下:

function addTodo(todo){
        let inputValue = input.value;
        if(todo){
            inputValue = todo.text;
        }
        if(inputValue){
            const liItem = document.createElement("li");
            liItem.innerText = inputValue;
            if(todo && todo.complete){
                liItem.classList.add("complete");
            }
            liItem.addEventListener("click",() => {
                liItem.classList.toggle("complete");
                updateList();
            });
            liItem.addEventListener("contextmenu",(e) => {
                e.preventDefault();
                liItem.remove();
                updateList();
            });
            todoList.appendChild(liItem);
            input.value = "";
            updateList();
        }
    }
    function updateList(){
        const listItem = $$("li",todoList);
        const saveTodoData = [];
        listItem.forEach(item => {
            saveTodoData.push({
                text:item.innerText,
                complete:item.classList.contains("complete")
            })
        });
        localStorage.setItem("todoData",JSON.stringify(saveTodoData));
    }
    复制代码

# 49. insect-catch-game #

效果如图所示:

49.gif

*  源码\[100\]
 *  在线示例\[101\]

*  \[ \] 知识点总结:

CSS:基本样式布局。

JavaScript:中英文切换 + 替换元素中的文本(不包含标签元素) + 定时器的用法。如上述示例部分源码如下:

function replaceText(el,text,wrapSymbol = ""){
        let newText = [];
        if(wrapSymbol){
            // why not use split method?,because it can filter the wrap symbol.
            const getIndex = (txt) => txt.search(new RegExp("\\" + wrapSymbol));
            let searchIndex = getIndex(text),i = 0,len = text.length;
            while(searchIndex !== -1){
                newText.push(text.slice(i,searchIndex) + wrapSymbol);
                i = searchIndex;
                if(getIndex(text.slice(searchIndex + 1)) === -1){
                    newText.push(text.slice(searchIndex + 1,len));
                }
                searchIndex = getIndex(text.slice(searchIndex + 1));
            }
        }
        const walk = (el,handler) => {
            const children = Array.from(el.childNodes);
            let wrapIndex = children.findIndex(node => node.nodeName.toLowerCase() === "br");
            children.forEach((node,index) => {
                if(node.nodeType === 3 && node.textContent.replace(/\s+/,"")){
                    wrapSymbol ? handler(node,newText[index - wrapIndex < 0 ? 0 : index - wrapIndex]) : handler(node,text);;
                }
            });
        }
        walk(el,(node,txt) => {
            const parent = node.parentNode;
            parent.insertBefore(document.createTextNode(txt),node);
            parent.removeChild(node);
        });
    }
    复制代码

以上工具函数的实现参考这里来实现的\[102\]。

> 特别说明:这个示例算是一个比较综合的示例了。

# 50. kinetic-loader #

效果如图所示:

![f3d18eac88372e94fc1eae3a33180cc3.gif][]

50.gif

*  源码\[103\]
 *  在线示例\[104\]

*  \[ \] 知识点总结:

CSS:CSS旋转动画 + 基本样式布局。

如上述示例部分源码如下:

@keyframes rotateA {
        0%,25% {
            transform: rotate(0deg);
        }
        50%,75% {
            transform: rotate(180deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    @keyframes rotateB {
        0%,25% {
            transform: rotate(90deg);
        }
        50%,75% {
            transform: rotate(270deg);
        }
        100% {
            transform: rotate(450deg);
        }
    }
    复制代码

最后一天，额外的实现了一个`404`效果，算是特别结尾吧，是不是很花哨(`^_^`)。这算是一个`CSS`动画的综合使用，如下所示:

# 51. 404 page #

效果如图所示:

![2421fd8410de54f10bdc3dfb901b2181.gif][]51.gif

*  源码\[105\]
 *  在线示例\[106\]

*  \[ \] 知识点总结:

1.  CSS:`CSS`动画的用法 + 基本样式布局 + `svg`图标元素的样式设置。

如上述示例部分源码如下:

@keyframes background {
        from {
            background: linear-gradient(135deg,#e0e0e0 10%,#ffffff 90%);
        }
        to {
            background: linear-gradient(135deg,#ffffff 10%,#e0e0e0 90%);
        }
    }
    @keyframes stampSlide {
        0% {
            transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
        }
        100% {
            transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-4000px);
        }
    }
    @keyframes slide {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-200px);
        }
    }
    @keyframes roll {
        0% {
            transform: rotateZ(0deg);
        }
        85% {
            transform: rotateZ(90deg);
        }
        87% {
            transform: rotateZ(88deg);
        }
        90% {
            transform: rotateZ(90deg);
        }
        100% {
            transform: rotateZ(90deg);
        }
    }
    @keyframes zeroFour {
        0% {
            content:"4";
        }
        100% {
            content:"0";
        }
    }
    @keyframes draw {
        0% {
            stroke-dasharray: 30 150;
            stroke-dashoffset: 42;
        }
        100% {
            stroke:rgba(8, 69, 131, 0.9);
            stroke-dasharray: 224;
            stroke-dashoffset: 0;
        }
    }
    复制代码

> # 来源：夕水 #
> 
> https://segmentfault.com/a/1190000040481518
> 
> 示例源码地址：https://github.com/eveningwater/my-web-projects/tree/master/js

[3bf9d91842d0efa3b94d889170ac3ef1.png]: /images/20220829/af1f6dd470364cd7be98772a9a3dd610.png
[7889a78acef19f02a392771a3fba23b9.png]: /images/20220829/88b254409bc643679febf189585db512.png
[3eb1af5547ebea99b00a8ea58883e2cd.gif]: /images/20220829/a2736137a77d4b5a8f32b0b1c2ca8fb1.png
[d2bfe44ffa40f7c0cf0b0add25ee0bb6.gif]: /images/20220829/9337c8d8f7704c1aa9450bcfe4e6c573.png
[f83ef92f031474f01025aa86fd5f669d.gif]: /images/20220829/f0ef33f96f114c2dbc00701ae551cef7.png
[ff1522b9cabf38c17b37e43d6b1b6cf8.gif]: /images/20220829/4a6cde1353ef41d0abff5349ea6a6bb5.png
[de33257062783466e3fd6f70ce551240.gif]: /images/20220829/92b72bd898534c768e6492d67a8ee7a2.png
[ec40d1eef07969f896c65dfd0619c0a6.gif]: /images/20220829/509ecffd7321462e8c0d3592d4a0f8cb.png
[e39e59bee62e0d0e7873d4c5e41ce213.gif]: /images/20220829/96fd1c6700974675b24fff30c2784bc3.png
[f7cfbefd67406afa4deb98024b2a67fd.gif]: /images/20220829/9d932dd7806647d2b2a3b184b65b55d5.png
[ed0dc5cab71547202ea06b3a7e117419.gif]: /images/20220829/7747b61a55264e8ea1e9ea13711b03b4.png
[20c268381791a77108c301a5273eb005.gif]: /images/20220829/5acf89b9b7a940ad9bd4b103936b3fe3.png
[88dd0f2c211167debe7538110b4c828a.gif]: /images/20220829/f8ad3a30738546fdac0f3e6a05319a3b.png
[92b447f95c57e2fef30c25337df548c9.gif]: /images/20220829/cfa87a4fcd5448daa1de1aa5a19ffcdf.png
[938f4ab40db4766fd3b07fcadc9dfe6b.gif]: /images/20220829/65a59e05566f41d9838aeb8e3ab4070a.png
[b1d1898bade150884e7967aa39299abe.gif]: /images/20220829/be77a0b52c784834ae5846e40fa0894f.png
[2134e615dc9567058a5ffbc14ce58ace.gif]: /images/20220829/6dd26b7ab906494b86689542da5c82b9.png
[07a3238cccac60dc4f4657f624107fed.gif]: /images/20220829/e95922b7ee4340b19bcc9c42689511da.png
[d15ed0f097902df895fad4a527021113.gif]: /images/20220829/92547074d44d471fa1a8bcd60305fe7f.png
[def52f66da67ea09e6f265fe430e2309.gif]: /images/20220829/edd1c9be1bc440fa920b8ccfc1a861a3.png
[5fd061ef7055d24a5f883dcd730a3943.gif]: /images/20220829/c5e6ad47608744b9ac9bf9993d2faaee.png
[d1bf2acf5dd693fe3c2f8cbabf105e4d.gif]: /images/20220829/43669d87bd15470e99e649a8aee7889a.png
[f5814ea6206f52c964150d8cbe3dadc5.png]: /images/20220829/559b82459b1c450a8a288acbeb21fb9a.png
[8c08d4f7a43fe98cca7e21b6cac9206d.gif]: /images/20220829/d985ddb9807e4ead89ef4cf68e5bd043.png
[ad0520994e9e8caafe3e46bd2342012d.gif]: /images/20220829/0c13d4ddb0c9423f9fe4fcf3acf77432.png
[ecea196ae8ce649d15fb9735d2931a8c.gif]: /images/20220829/cd91119bf3324df7a8ae9b52500c1c3c.png
[8baf81f6a0f9d5c05d1f106ee572ba97.gif]: /images/20220829/55a0c34c8c94465483ecf33de2c28869.png
[7139a96d5726d0572e0189ccb697a895.gif]: /images/20220829/17e3958bc5034a25bd97996646d04e3f.png
[8a2c56c5f784dc47b5756f10df1e7a56.gif]: /images/20220829/59abeed829c647d6bba4137d7b7d79f9.png
[78a0f43c3ac172cfac94041180009f14.gif]: /images/20220829/e71580b827b64d40bd29a18ab568ebcc.png
[454d0abb9df755469372fa96cd6c06f0.gif]: /images/20220829/6d16a38a1863452c812a3b459c4b86aa.png
[9e2bf2b3d1955654021ad95cfe3e1463.gif]: /images/20220829/6dd75a5d60164c68a419f962acf641cc.png
[5f630e108a9b771c5229415b356d1dd5.gif]: /images/20220829/3b6527cb0a14492aaa409fa6ddec7160.png
[c49e84df62658fff570de86828ca5392.gif]: /images/20220829/a7bb60be627f4463a9410684788109ba.png
[00bb7c394e8cac6372a1c63151ad8feb.png]: /images/20220829/f7b0f69d8af94b94b47a50828250ad88.png
[dca171d557281cf7fb4376df4a80c75f.gif]: /images/20220829/20f5e4d44a0d43479f3005ca2c5af32c.png
[bb751a498db4e1c14a55c3a465565be5.gif]: /images/20220829/916cde1e13f34226a6c7ac3ce2679c4f.png
[e34321992f9a65dcaa2425ff87245a54.gif]: /images/20220829/804de7cc8b1342bcb227bbab247e6d84.png
[9a56ff678a31cd1a6673afda2e69eb53.gif]: /images/20220829/99fdc39c9c6745aab423f2bb7a052746.png
[caeca359beb2276b5e762e1dd830d621.gif]: /images/20220829/09ca28babfe645bba694395111869f00.png
[1f28a213086058f48c249f3d4755c72f.gif]: /images/20220829/b21e80eb08df4807ae6459b5b35b69dc.png
[1b4ce1eb4daeea6be1a9d3c0213def9c.gif]: /images/20220829/b28dd2b446b24f38b0062a29a08aea01.png
[0432b45ba726df1aaa87c5268613ca26.gif]: /images/20220829/d753939d7cdd4de68391bd3ab068bc3f.png
[49144e6790d12660f5668a9cd869f44e.gif]: /images/20220829/5b18c145762e4fe9b8f65b362079c37c.png
[f05e1c0c13e46b41db7fdadf2a223bcd.gif]: /images/20220829/e4906d0faf5344f3a9f3e6fca46633ad.png
[be2b79a0e48bb394db698bd046280c94.gif]: /images/20220829/233a269916a94a7bbb0f8179bddc950b.png
[e914ce3fead400a963f36812d5d50e93.gif]: /images/20220829/0a40b8ae7c91419d9aa0702abd242b23.png
[55db9bee9345aa56146fbfa77365cea2.gif]: /images/20220829/20f425a0d13845d08b8fe6480a70d93b.png
[f3d18eac88372e94fc1eae3a33180cc3.gif]: /images/20220829/a06700da4e124606bedee6facacc8c9b.png
[2421fd8410de54f10bdc3dfb901b2181.gif]: /images/20220829/ac946d605a2a4ca886d575a2d7b53f3f.png