H5/C3
文章平均质量分 77
想搞全栈的前端
愿君学长松,慎勿作桃李.受屈不改心,然后知君子
展开
-
书本45°斜封面
书本45°斜封面代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2022-04-13 09:34:48 · 519 阅读 · 0 评论 -
css3毛玻璃效果
css3毛玻璃效果效果如下:代码:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>毛玻璃效果</title> </head> <style> * { margin: 0; padding: 0; } .bg { background: url(img.jpg) no-r原创 2022-02-22 17:08:49 · 374 阅读 · 0 评论 -
图片验证码的实现方法
前言图片验证码是我们日常经常用到的,本文将介绍如何实现以及其原理,并没有过多注重css样式(有些简陋)。实现主要是利用canvas画布加上随机字母,以及适当的旋转,移动,颜色。这一块主要利用的是css3的内容。对于代码看不懂的可以看注释,注释标注的很详细。<!DOCTYPE html><html lang="en"><head> <...原创 2019-06-17 12:45:58 · 15982 阅读 · 3 评论 -
css3动画
什么是 CSS3 中的动画?动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。@keyframes语法:@keyframes animationname {keyframes-selector {css-styles;}}通过 @keyframes 规则,您能够创建动画。创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。在动画过程中,...原创 2019-06-16 10:55:38 · 606 阅读 · 0 评论 -
使用canvas制作在线涂鸦画板
介绍点击预览:在线涂鸦画板项目源码:github地址主要功能调节笔颜色点击黑色,将画笔颜色改为黑色,并且加上active类,其他颜色删除active,实现点击处高亮。black.onclick = function () { context.strokeStyle = 'black' for (var i = 0; i < black.parentNode.chi...原创 2019-06-20 14:21:52 · 3874 阅读 · 2 评论 -
flex弹性布局:justify-content
定义和用法justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。提示:使用 align-content 属性对齐交叉轴上的各项(垂直)。默认值:flex-start继承:否可动画化:否版本css3JavaScript 语法:object.style.justifyContent=“space-between”...原创 2019-06-04 09:21:58 · 2211 阅读 · 0 评论 -
H5多媒体标签--视频video和音频audio
audio–音频标签标签属性 contrils:播放器的控制面板 autoplay:自动播放 loop:循环播放 src:文件地址 preload用来缓存大的文件其中有三个值可选 none:不缓存 auto:缓存(默认) metadata:缓存文件元信息案例:<audio src="年少有为.mp3" controls autoplay loop>浏览器不支...原创 2019-04-06 15:46:25 · 852 阅读 · 0 评论 -
H5新增表单属性
H5新增的input类型<form> 邮箱:<input type="email"><br/> 数量:<input type="number" value="20" max="25" min="18"><br/> 电话:<input type="tel"><br/>...原创 2019-04-05 14:51:16 · 561 阅读 · 0 评论 -
H5全屏显示方法及浏览器兼容解决方案
全屏操作的主要方法和属性1.requestFullScreen():开启全屏显示克服兼容性:不同浏览器需要添加不同的前缀: chrom:webkit firefox:moz ie:ms opera: o /*添加三个按钮的点击事件*/ /*全屏操作*/ document.querySelector("#full").onclick=...原创 2019-04-07 09:06:05 · 3317 阅读 · 0 评论 -
CSS3过渡效果transition----附手风琴案例
CSS3中新增的transform属性,实现了元素在变化过程中的过渡效果,实现了基本的动画。定义和用法transition 属性是一个简写属性,用于设置四个过渡属性: transition-property规定设置过渡效果的 CSS 属性的名称。 transition-duration规定完成过渡效果需要多少秒或毫秒。 transition-timing-function...原创 2019-04-10 08:53:22 · 911 阅读 · 0 评论 -
CSS3@media查询
CSS3 @media 查询首先贴一个例子:如果文档宽度小于 300 像素则修改背景颜色(background-color):@media screen and (max-width: 300px) { body { background-color:lightblue; }}定义和使用使用 @media 查询,你可以针对不同的媒体类型定义不同的样...原创 2019-04-12 14:09:07 · 402 阅读 · 0 评论 -
CSS3---文本阴影
CSS3 text-shadow 属性实例基础的文本阴影效果:h1{ text-shadow: 5px 5px 5px #FF0000;}效果图:语法text-shadow: h-shadow v-shadow blur color;注释:text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省...原创 2019-04-09 08:51:05 · 441 阅读 · 0 评论 -
CSS3伸缩布局注意点——携程网案例
先贴两张效果图:要求网页伸缩放大布局会自适应变换用到的新属性display: flexFlex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。 flex:当父元素使用display: flex后,子元素会具有弹性布局,子元素设置flex属性后面接数字,例...原创 2019-04-11 10:38:57 · 503 阅读 · 0 评论