HTML5和CSS3进阶
㼛思雨
Web. Write Less,Do More
展开
-
探索css中渐变属性gradient的超炫酷玩法(3)
linear-gradient 语法background: linear-gradient(direction, color-stop1, color-stop2, …);background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));background: repeating-linear-gradient(red, yellow 10%, green 20%);background: linear-gr...原创 2020-09-28 09:18:28 · 270 阅读 · 0 评论 -
用onsubmit做简单表单验证(37)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <form...原创 2020-09-25 23:27:04 · 853 阅读 · 0 评论 -
新增结构伪类选择器用法之nth:child()(36)
做成以上效果:代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>行内块元素练习</title> <style> ..原创 2020-09-25 14:24:27 · 138 阅读 · 0 评论 -
京东秒杀项目中斜三角的用法(35)
利用边框的制作三角的用法:如图所示:代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东斜三角练习</title> <styl原创 2020-09-24 16:17:46 · 111 阅读 · 0 评论 -
行内元素如何转换成行内块元素使用?
做成下面的效果该如何来做呢?代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>行内块元素练习</title> <style>原创 2020-09-24 14:44:24 · 2491 阅读 · 0 评论 -
京东页面中小三角的三种制作方案
切记:在盒子边框属性中,border属性有常用的border-style、border-width、border-color、等等。其中也可以直接写综合形式,也就是直接用border:10px solid transparent.或者border:10px solid pink.也就是说。重点来了:transparent是color的一种。写red就不写transparent了。创建三角有三种方法:第一种:<!DOCTYPE html><html lang="en">原创 2020-09-20 08:18:39 · 210 阅读 · 0 评论 -
阿里字体图标之Symbol用法
第一步:下载阿里字体图标Symbol文件包并解压。第二步:第1步:引入项目下面生成的 symbol 代码:<script src="./iconfont.js"></script>第2步:加入通用 CSS 代码(引入一次就行):<style>.iconfont { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: h原创 2020-09-15 22:43:50 · 1792 阅读 · 0 评论 -
阿里字体图标的使用方法
第一步:首先下载好已经打包好的字体文件,前面已经介绍过了。解压后直接放入文件中。第二步:然后直接link引入后可以直接使用了。代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t原创 2020-09-15 21:38:37 · 303 阅读 · 0 评论 -
抖音上超火的3D立体动态相册表白特效(29)
制作成下面这种效果:鼠标经过时会展开十分好看!换成你和情人的图片,可以放十几张不同的图片也可以只放一种图片!文件放置部分:css代码部分:html{ background:url(../img/2.GIF) ; height: 100%; }/*最外层容器样式*/.wrap{ position: relative; position: absolute; top: 0; right: 0; ...原创 2020-07-15 16:23:10 · 4297 阅读 · 1 评论 -
浏览器私有前缀(5)
浏览器私有前缀也是十分重要呀!原创 2020-06-28 19:26:55 · 102 阅读 · 0 评论 -
3D动画旋转相册)(28)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>...原创 2020-06-28 19:14:33 · 137 阅读 · 0 评论 -
3D导航栏(27)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <titl...原创 2020-06-28 18:55:52 · 80 阅读 · 0 评论 -
3D两面翻转的盒子(26)
一个鼠标经过会反转一下哟!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=ed.原创 2020-06-28 15:09:53 · 206 阅读 · 1 评论 -
css动画效果之3D呈现(25)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&...原创 2020-06-28 14:57:46 · 111 阅读 · 0 评论 -
3D动画旋转rotateZ和rotate3d()用法(24)
原创 2020-06-27 10:24:55 · 1854 阅读 · 0 评论 -
3D动画旋转rotateY的用法(23)
原创 2020-06-27 10:17:33 · 1667 阅读 · 0 评论 -
3D动画旋转rotateX()的用法(22)
原创 2020-06-27 10:12:33 · 473 阅读 · 2 评论 -
3D动画中透视perspective和translate-Z的区别(21)
d指的是透视距离,z指的是translate-Z的距离。我们在控制台通过改变translate-Z的值来进行观看效果,也可以为负值,变得越来越小!原创 2020-06-27 09:39:10 · 356 阅读 · 0 评论 -
3D动画透视效果(20)
透视距离越小,我们看到的物体越大!原创 2020-06-25 16:25:45 · 408 阅读 · 0 评论 -
3D三维坐标动画(19)
原创 2020-06-25 16:01:44 · 403 阅读 · 0 评论 -
动画效果奔跑的熊大(18)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&g...原创 2020-06-25 15:33:38 · 357 阅读 · 0 评论 -
大数据热点效果动画(17)
css做大数据效果动画 完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2020-06-25 13:04:05 · 626 阅读 · 0 评论 -
动画速度曲线完成打印机打字效果(16)
原创 2020-06-25 09:36:34 · 102 阅读 · 3 评论 -
css动画制作热点图(15)
原创 2020-06-25 09:20:22 · 308 阅读 · 1 评论 -
css动画进行时(14)
原创 2020-06-24 22:20:47 · 89 阅读 · 0 评论 -
2D旋转之旋转中心(8)
原创 2020-06-24 08:26:56 · 204 阅读 · 0 评论 -
2D转换综合写法(13)
原创 2020-06-24 09:13:59 · 128 阅读 · 0 评论 -
2D转换分页按钮的制作流程(12)
原创 2020-06-24 09:07:24 · 77 阅读 · 0 评论 -
2D转换图片放大实用场景(11)
原创 2020-06-24 09:02:41 · 115 阅读 · 0 评论 -
2D转换缩放效果(10)
原创 2020-06-24 08:56:40 · 74 阅读 · 0 评论 -
2D旋转案例(9)
做一个鼠标经过就可以图片旋转进来的效果呀!原创 2020-06-24 08:37:23 · 175 阅读 · 0 评论 -
2D转换之旋转和旋转三角形的做法(7)
原创 2020-06-24 08:13:40 · 170 阅读 · 0 评论 -
css3中2D转换效果实现二(6)
原创 2020-06-23 21:42:14 · 118 阅读 · 0 评论 -
css中2D转换效果实现(4)
css3引入了2D和3D转换效果,自此css3进入了一个新的世界,接下来你要学好这些内容哟!效果原创 2020-06-23 21:24:50 · 197 阅读 · 0 评论 -
多媒体标签之视频标签(3)
原创 2020-06-23 21:00:22 · 104 阅读 · 0 评论 -
HTML5你最易出错的多媒体标签(2)
先讲一下这个音频格式三种格式有的浏览器支持,有的是不支持的,因此我们最好写多种格式来防止有的浏览器不支持某种格式!直接使用前两种可以包括大部分浏览器支持模式呀!这样是显示不出效果的,因为音频还有许多重要的属性呀!...原创 2020-06-23 16:24:23 · 99 阅读 · 0 评论 -
HTML5新增语义化标签是什么呢?(1)
html5中新增了许多语义化标签:语义化标签也是属于标签在写css样式时那就不能带有点(.)了,就可以直接下标签名字了,因为他是标签,所以可以直接写哟!这些语义化标准主要针对搜索引擎的呀! 移动端更xi'hau为了照顾IE9,需要把这些元素转换成块级元素加入没有使得成为块级元素,下面咱们试验一下,结果是不起作用的!xi'hau'u...原创 2020-06-23 16:08:15 · 407 阅读 · 0 评论