H5C3新特性
文章平均质量分 85
H5C3新特性,讲的是html5和css3的新增特性
呆萌宝儿姐
CSDN专家博主、阿里云开发者社区专家博主、51CTO社区专家博主、360书馆认证博主、知乎掘金B站等平台受邀作者。
如遇开发、程序等需求,博客首页下拉加入公众号,私信博主
展开
-
纯CSS3不规则瀑布流布局特效
展示项目链接https://download.csdn.net/download/weixin_45525272/36145876代码HTML<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-e原创 2021-11-01 15:39:42 · 2491 阅读 · 0 评论 -
纯CSS3写旋转的轮播图,开门大吉,旋转的导航栏
文章目录案例1:旋转的轮播图案例2:开门大吉案例3:导航栏旋转案例1:旋转的轮播图<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style> body { perspective: 1000px; } section { width: 300px; heig原创 2021-01-26 12:03:11 · 3638 阅读 · 1 评论 -
QQ Tim背景案例
展示代码原创 2021-01-19 23:13:53 · 3991 阅读 · 1 评论 -
CSS3——伸缩布局,文字阴影,背景渐变缩放多背景,优雅降级和渐进增强
想对你说的话伸缩布局(CSS3)文字阴影(CSS3)背景渐变背景缩放(CSS3)多背景(CSS3)优雅降级和渐进增强(取决于客户需求)伸缩布局(CSS3)CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的方向:默认主轴从左向右,侧轴默认从上到下主轴和侧轴并不是固定不变的,通过flex-directi原创 2020-07-15 16:40:49 · 4433 阅读 · 0 评论 -
CSS3——CSS3动画(animation)及应用
改革春风吹满地动画(CSS3) animation案例1:太阳系的运作案例2:图片播放标题动画(CSS3) animation动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。语法格式:animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向;关于几个值,除了名字,动画时间,延时有严格顺序要求其它随意r@keyframes 动画名称 { from{ 开始位置 } 0% to{ 结束 }原创 2020-07-15 14:47:15 · 4830 阅读 · 0 评论 -
CSS3——3D变形 transform
3D变形(CSS3) transform2d x y3d x y z左手坐标系伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方。这样我们就建立了一个左手坐标系,拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图CSS3中的3D坐标系与上述的3D坐标系是有一定区别的,相当于其绕着X轴旋转了180度,如下图简单记住他们的坐标:x左边是负的,右边是正的y 上面是负的, 下面是正的z 里面是负的, 外面是正的rotateX()就是沿着 x 立体旋转.原创 2020-07-15 11:24:51 · 4655 阅读 · 1 评论 -
CSS3——2D变形(CSS3) transform
让青春吹动了你的长发2D变形(CSS3) transform移动 translate(x, y)缩放 scale(x, y)旋转 rotate(deg)transform-origin可以调整元素转换变形的原点倾斜 skew(deg, deg)案例总预览放大缩放旋转旋转的楚乔特效2D变形(CSS3) transformtransform是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、倾斜、缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果。原创 2020-07-15 10:53:22 · 4408 阅读 · 0 评论 -
CSS3——过渡(CSS3)
不得不爱过渡(CSS3)案例过渡(CSS3)过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。过渡动画: 是从一个状态 渐渐的过渡到另外一个状态帧动画:通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片在CSS3里使用transition可以实现补间动画(过渡效果),并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指),就可以实现平滑的过渡,为原创 2020-07-15 10:21:01 · 4102 阅读 · 0 评论 -
CSS3——CSS3盒模型
像手腕上散发的香水味CSS3盒模型案例CSS3盒模型CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。可以分成两种情况:1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值,其让元素维持W3C的标准Box Mode2、box-sizing: border-box 盒子大小为 width原创 2020-07-15 09:25:54 · 4115 阅读 · 0 评论 -
CSS3——CSS3 新增选择器
天空之外结构(位置)伪类选择器(CSS3)案例属性选择器案例伪元素选择器(CSS3): 伪类与 :: 伪元素注意案例结构(位置)伪类选择器(CSS3):first-child :选取属于其父元素的首个子元素的指定选择器:last-child :选取属于其父元素的最后一个子元素的指定选择器:nth-child(n) : 匹配属于其父元素的第 N 个子元素,不论元素的类型:nth-last-child(n) :选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计原创 2020-07-15 09:14:14 · 4254 阅读 · 0 评论 -
HTML5——HTML5新标签与特性
起风了兼容性问题文档类型设定字符设定常用新标签新增的input type属性值:常用新属性综合案例兼容性问题文档类型设定documentHTML: sublime 输入 html:4sXHTML: sublime 输入 html:xtHTML5 sublime 输入 html:5 ! 字符设定:HTML与XHTML中建议这样去写:HTML5的标签中建议这样去写常用新标签w3c 手册中文官网原创 2020-07-15 08:30:19 · 4150 阅读 · 0 评论 -
HTML5——HTML5多媒体标签
多媒体标签embed:标签定义嵌入的内容audio:播放音频video:播放视频多媒体 embed(会使用)embed可以用来插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径,可以是相对路径或绝对路径。因为兼容性问题,我们这里只讲解 插入网络视频, 后面H5会讲解 audio 和video 视频多媒体。<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIw原创 2020-07-15 08:22:10 · 4900 阅读 · 1 评论