![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端(demo)
主要是对前端各知识点的实战
illion-78
志向远大程序猿
展开
-
CSS hover 蛇边界动画
实现效果: HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet"原创 2021-02-09 17:10:00 · 145 阅读 · 1 评论 -
前端小练习:canvas实现旋转时钟
canvas实现旋转时钟 效果展示: 代码为: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2020-04-06 20:40:17 · 205 阅读 · 0 评论 -
前端小练习:canvas实现验证码登录
canvas实现验证码登录 实现效果: HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...原创 2020-04-05 22:09:07 · 326 阅读 · 0 评论 -
前端小练习:原生JS实现许愿墙
原生js实现许愿墙 实现效果: HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2020-04-05 12:28:22 · 1433 阅读 · 2 评论 -
前端小练习:原生js实现关不掉的广告
原生js实现关不掉的广告 一次性定时器:先等待一段时间,再自动执行一次任务 何时使用: 1、如果任务只是执行一次 2、如果用动画的启动、停止、变化规律随意的情况 如何使用:三件事 1、任务函数 function task(){} 2、启动一次性定时器 timer=setTimerout(teak,wait) 3、停止一次性定时器:停止等待不再执行 clearTimerout(ti...原创 2020-04-04 19:03:28 · 275 阅读 · 0 评论 -
前端小练习:纯css菜单栏
纯css实现菜单栏 二级菜单有旋转效果,效果如下图: HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1...原创 2020-04-04 13:23:58 · 373 阅读 · 0 评论 -
前端小练习:原生js实现自动生成乘法表
原生js自动生成乘法表 效果展示: HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2020-04-02 21:56:20 · 272 阅读 · 0 评论 -
前端小练习:jQuery实现酷炫照片墙
jQuery酷炫照片墙 效果展示: HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2020-04-02 21:52:23 · 794 阅读 · 0 评论 -
前端小练习:抽奖转盘
抽奖小转盘 效果图: HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...原创 2020-04-01 20:49:55 · 640 阅读 · 0 评论 -
前端小练习:loading动画效果
loading动画效果 效果图 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...原创 2020-03-24 11:48:14 · 289 阅读 · 0 评论