html5css3
文章平均质量分 62
里面详细记录了html5 css3的学习笔记、练习、重点、项目练习
优惠券已抵扣
余额抵扣
还需支付
¥19.90
¥99.00
购买须知?
本专栏为图文内容,最终完结不会低于15篇文章。
订阅专栏,享有专栏所有文章阅读权限。
本专栏为虚拟商品,基于网络商品和虚拟商品的性质和特征,专栏一经购买无正当理由不予退款,不支持升级,敬请谅解。
小黄呀呀呀
整理的笔记要点主要是记录给自己看的,涉及原创可以私信我修改,谢谢!
展开
-
html5css3项目6:3D的项目有两面翻转的盒子、3D导航栏、旋转木马
1、两面翻转的盒子思路:先设置一个父盒子,然后添加两个子盒子,这两个子盒子都要设置为定位,因为这样这两个才能重叠起来,如果想要实现翻转的效果,需要实现将一个盒子旋转180度,不过这样是不够的,因为父盒子默认孩子盒子是关闭3d效果的,只要父亲一转,孩子就恢复原样,所以解决方法是在父盒子里设置transform-style,然后最后给父亲盒子旋转,即可。不过要给父盒子添加过渡的效果。<!DOCTYPE html><html lang="en"><head>原创 2020-05-18 21:05:07 · 825 阅读 · 1 评论 -
html5css3项目5:3D的rotate旋转的实例、transform-style
1、rotateX<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body {原创 2020-05-18 20:47:49 · 371 阅读 · 0 评论 -
html5css3项目3:动画实现动画水平移动、多组动画、地图波纹、打字机效果、奔跑的熊大
1、动画水平移动思路: 就是简单的图像移动,设置好开始和结束<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <s原创 2020-05-18 20:37:11 · 607 阅读 · 0 评论 -
html5css3项目2:scale缩放实现图片放大、分页效果圆圈放大图
1、图片放大<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box {原创 2020-05-18 20:18:52 · 671 阅读 · 0 评论 -
html5css3项目1:rotate实现三角形、子盒子在父盒子里旋转出来
1、rotate实现三角形思路:这里是采用伪元素的方式,不过要记住:伪元素是行内元素,需要转为块级元素才能有宽和高,然后再设置相邻两边的边框,再进行旋转。有个重点:一个盒子是该盒子的伪元素的的父亲<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini原创 2020-05-18 20:14:36 · 564 阅读 · 0 评论 -
html5css3重点5:translate和margin分别实现盒子水平垂直居中(采用定位的方法实现水平垂直居中)
1、translate实现盒子的水平垂直居中显示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>原创 2020-05-18 20:02:19 · 449 阅读 · 0 评论 -
html5css3重点4:动画animation的使用及steps(n)
1、动画(animation)1.1 先定义动画再调用定义好的动画。定义动画@keyframes 动画名称 { 0% { width: 100px; } 100% { width: 200px }}调用定义好的动画div { /* 调用动画 */ animation-name: 动画名称; /* 持续时间 */ animation-duration: 持续时间;}1.2动画常见属性(一般都是简写)1.3原创 2020-05-18 19:49:17 · 431 阅读 · 0 评论 -
html5css4项目:动画效果之steps(n)实现打字机和奔跑的大熊的项目
1、打字机效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div {原创 2020-05-18 19:47:17 · 489 阅读 · 0 评论 -
html5css3笔记3:3D转换、perspective透视、transform-style
一、 认识 3D 转换3D 的特点近大远小物体和面遮挡不可见三维坐标系x 轴:水平向右 – 注意:x 轴右边是正值,左边是负值y 轴:垂直向下 – 注意:y 轴下面是正值,上面是负值z 轴:垂直屏幕 – 注意:往外边的是正值,往里面的是负值二、3D 转换3D 转换知识要点3D 位移:translate3d(x, y, z)3D 旋转:rotate3d(x, y, z)透视:perspctive3D呈现 transfrom-styl原创 2020-05-18 19:17:25 · 271 阅读 · 0 评论 -
html5css3笔记2:2D转换 translate、rotate、scale、动画
1、2D 转换之 translate2D 转换2D 转换是改变标签在二维平面上的位置和形状移动: translate旋转: rotate缩放: scaletranslate 语法x 就是 x 轴上水平移动y 就是 y 轴上水平移动transform: translate(x, y)transform: translateX(n)transfrom: translateY(n)重点知识点2D 的移动主要是指 水平、垂直方向上的移动translate 最大的优原创 2020-05-18 15:42:28 · 191 阅读 · 0 评论 -
html5css3重点3:2D变换之translate、rotate、scale
2D转换1、translate移动1.1语法格式transform: translate(x, y)transform: translateX(n)transfrom: translateY(n)1.2注意点1)移动对行内元素不起作用2)一个盒子移动的话,不会对其他盒子有任何的影响3)移动时,如果用百分比的话,移动的是该盒子自身的宽度和高度,是以自身为模板。1.3测试代码<!DOCTYPE html><html lang="en"><head>原创 2020-05-18 11:20:42 · 252 阅读 · 0 评论 -
html5css3笔记1:html5的认识、语义化标签、多媒体标签、新增input标签、属性选择器、结构伪类选择器、伪元素选择器、伪元素之字体图标
HTML5 第一天一、什么是 HTML5HTML5 的概念与定义定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML两个概念:是一个新版本的 HTML 语言,定义了新的标签、特性和属性拥有一个强大的技术集,这些技术集是指: HTML5 、CSS3 、javascript, 这也是广义上的 HTML5HTML5 拓展了哪些内容语义化标签本地存储兼容特性2D、3D动画、过渡CSS3 特性性能与集成H原创 2020-05-17 23:37:33 · 277 阅读 · 0 评论 -
html5css3重点2:属性选择器、结构伪类选择器、伪元素选择器(::before、::after)
1、属性选择器1.1格式:标签[属性] {}1.2注意点^是开头$是结尾*是任意处1.3测试代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docume原创 2020-05-17 23:30:04 · 268 阅读 · 0 评论 -
html5css3重点1:语义化标签、音频标签、视频标签、新增的input标签
1、语义化标签(为了让移动端识别)2、多媒体标签2.1音频标签audio(1)属性(一般情况下,controls是必须要有的属性,因为不能自动播放,所以controls必须要有)1)autoplay:自动播放,打开浏览器后就自动播放,不过谷歌禁止了,为了更好的用户体验。2)controls:显示播放的开始按钮,如果不显示,就什么也没有。3)loop:结束后又重新播放,也就是循环播放。4)src:音频的来源 <audio src="media/snow.mp3" controls=原创 2020-05-17 22:55:29 · 265 阅读 · 1 评论