2020年09月_清砾

12月 11月 10月 09月 08月 07月

原创纯CSS+HTML实现3D立方体轮播图

1.实现点击左右按钮，点击图片下方圆点都可以使立方体旋转到对应面，实现了不同图片的展示2.主要技术：HTML元素的先后顺序，css的旋转，radio标签和lable标签的使用，transform-style: preserve-3d;，transition: all 3s;，transform: rotateY(0) translateZ(200px);，效果如图：代码如下：<!DOCTYPE html><html> <head> <meta cha

2020-09-14 22:41:01 2288

原创 CSS3动画+js实现气泡按钮

1，实现了一个可以点击产生气泡特效的按钮如图所示：2使用到的技术有CSS3动画，背景图片设置，伪类选择器和伪元素的使用，元素的缩放，元素类名的添加与去除等等具体如何操作见代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>气泡按钮</title> <style type="text/css"> /*样式初始化,去除轮廓

2020-09-14 21:24:38 1095

原创 css3+js实现时钟特效

1.实现了时钟的特效，可以转动，时间准确，画面美观大气；2.用到了css3的transform: rotate，transform-origin:,伪元素，border-radius，定位，z-index等等效果如图：代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>CSS3时钟特效</title> <link rel="sh

2020-09-11 21:19:25 441

原创用纯CSS+HTML实现图片点击切换背景

1.实现了点击圆图片，切换对应的背景图片2.主要技术：css3的背景设置，边框圆角，定位，盒模型，选择器，浮动，锚点，由:target实现切换一、效果图如下二、代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>图片背景切换</title> <link rel="shortcut icon" type="image/x-ic

2020-09-10 19:21:57 9307 1

原创 js+canvas的像素操作的练习

1.练习一<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>像素处理</title> <style type="text/css"> * { margin: 0; padding: 0; } #mycanvas { margin: auto; background-color: b

2020-09-09 19:50:48 546

原创 js+canvas实现刮刮奖

1，实现了PC端的刮刮奖效果2.使用了canvas的文本，像素操作，合成，绘制图形，随机数<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>刮刮奖</title> <style type="text/css"> * { margin: 0; padding: 0; } .box { wi

2020-09-09 19:46:25 240

原创 js+video实现视频播放

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>视频案例</title> </head> <body> <video width="" height="" autoplay controls loop="loop" poster="img/lbt3_img1.jpg"> <source src="

2020-09-08 20:33:12 3453

原创 js+audio实现音乐播放器

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>音乐播放器</title> <link rel="shortcut icon" type="image/x-icon" href="img/an.ico"/> <link rel="stylesheet" type="text/css" href="css/music_Play.c

2020-09-08 20:30:54 1421 2

原创使用百度地图api实现地理定位

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {

2020-09-08 20:15:58 633

原创 jQuery+ajax实现用户登录验证

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>登录界面</title> <style type="text/css"> *{ margin: 0; padding: 0; } h3{ display: block; width: 100%; height: 50px; te

2020-09-08 20:12:28 1857

原创 js+canvas实现点击旋转并且缩放效果

1.实现了点击图片后，图片会进行旋转和缩放2.用到了缩放，定时器，旋转，渐变色，平移，判断鼠标点击事件<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>点击放缩旋转</title> <style type="text/css"> * { margin: 0; padding: 0; } #myc

2020-09-08 19:53:25 893

原创 js+canvas实现画板功能

1，实现了画图，改变画笔粗细，改变画笔颜色，清屏功能<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>画板</title> <link rel="shortcut icon" type="image/x-icon" href="img/an.ico"/> <link rel="stylesheet" type="text/cs

2020-09-08 19:49:02 833