访问量
访客数

Js折纸导航栏

index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>折纸导航栏</title> </head> <style> *{ margin: 0; padding: 0; } .content{ position: relative; width: 400px; height: 30px; margin: 50px auto; /*-webkit-perspective: 1000px; -moz-perspective: 1000px; -ms-perspective: 1000px;*/ perspective: 1000px;/*景深相当于眼......

Js表白神器

index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>love</title> <style> *{ margin: 0; padding: 0; } body{ background-color: #000; background-size: cover; overflow-y: hidden; } .love{ width: 400px; height: 400px; /*background-color: #7c7c7c;*/ margin: 130px auto; animation: move 1s infinite alternate; } @keyframes move { 100%{ transform: scale(1.5); } } .left{ float: left; width: 150px; height: 250px; background-color: #FF0000; border-radius: 75px 75px 0 5px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); margin-left: 85px; box-shadow: 0 0 20px #FF0000; animation:......

Js懒加载

index.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>懒加载技术</title&g......

Js五子棋

index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>五子棋</title> <meta name="viewport" content="device-width; initial-scale=1.0;" /> <style> #c1 { display: block; margin: 60px auto; box-shadow: 1px 1px 5px #000000; } </style> <script src="js/index.js"></script> </head> <body> <canvas id="c1" width="450px" height="450px"></canvas> </body> </html> index.js window.onload =......

Js滑块拖拽

index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滑块拖拽</title> </head> <style> body { margin: 0; padding: 0; user-select: none; } .content { position: relative; width: 300px; height: 40px; margin: 50px auto; background-color: #E8E8EB; text-align: center; line-height: 40px; } .rect { position: absolute; width: 100%; height: 100%; } .rect .bg {......

Js生日礼物

index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>card</title> <style> body,html{ width: 100%; height: 100%; } body{ display: flex;/*弹性盒模型*/ justify-content: center;/*水平对齐 盒子位于中心*/ align-items: center;/*竖直对齐 居中对齐*/ background-color: yellow; perspective: 100......