前端学习笔记—HTML5+CSS3特效

作者: 木溪bo | 来源:发表于2024-02-27 17:24 被阅读0次

HTML5标签

文本标签
文本标签.png
表单标签
表单标签.png

表单控件属性.png

input属性.png

视频标签.png

音频标签.png

H5新属性
全局属性.png

适配ie8等旧版ie浏览器效果可以引入谷歌出的兼容性js文件

image.png

兼容性.png

CSS3特性

概述.png

私有前缀1.png

私有前缀2.png

长度单位.png

不透明度.png

文本属性
文字阴影.png

文字描边.png

文本内容换行等
文本换行.png

overflow-wrap 应用于行级元素，用来设置在一个本来不能断开的字符串中插入换行符，以防止文本溢出。
添加此规则使得长单词或连续字符能在容器内换行，word-wrap与overflow-wrap都可以达到同样的效果。
属性：
normal：行只能在正常的单词断点（例如两个单词之间的空格）处换行。
anywhere：为防止溢出，如果行中没有其他可接受的断点，则不可断的字符串（如长词或 URL）可能会在任何时候换行。在断点处不会插入连字符。在计算最小内容内在大小时，会考虑由单词换行引入的软换行机会。
break-word：与 anywhere 值相同，如果行中没有其他可接受的断点，则允许在任意点将通常不可断的单词换行，但在计算最小内容内在大小时不考虑断字引入的软换行机会。

文本换行2.png

-----文本溢出处理：
overflow: hidden;//超出不显示
white-space:nowrap;//换行
text-overflow:ellipsis;//显示...省略号

-----文本换行处理：
 /* overflow-wrap用来设置一个本来不能断开的字符串中插入换行符， word-wrap与overflow-wrap都可以达到同样的效果 */
      overflow-wrap: break-word;
 /*word-break 指定了怎样在单词内断行。对于中文或英文单词，可以使用此规则来强制换行 */
      word-break: break-all;
/* white-space 保留空白符序列，进行换行。属性用于设置如何处理元素内的空白字符。确保换行也能在JSON数据中的任何位置发生  */
      white-space: pre-wrap;

文本溢出.png

文本修饰.png

字体

字体.png
背景

origin.png

clip.png

size.png

多背景图组合.png

线性渐变;
background-image:linear-gradient(red,yellow,green);//渐变颜色
background-image: linear-gradient(to right top,red,yellow,green); //渐变方向
background-image: linear-gradient(30deg,red,yellow,green);//通过角度设置渐变方向
background-image: linear-gradient(red 50px,yellow 100px ,green 150px);//设置渐变位置
background-image:radial-gradient(□red,yellow,□green);//径向渐变radial-gradient

线性渐变.png

径向渐变.png

径向渐变1.png

径向渐变2.png

径向渐变-小球.png

边框
边框轮廓.png

content-box:整个大小是本身宽高+padding+border，会往外扩张。
border-box:固定了整个盒子宽高，多加的padding、border等是往里面缩。

怪异盒模型.png

盒子阴影1.png

盒子阴影2.png

2D变换

平移，旋转，缩放等。
注意：行内元素不能使用transform变换，浏览器会自动忽略改属性。

translate.png

缩放.png

旋转.png

扭曲.png

扭曲2.png

混合变换.png

3D变换

景深.png

透视点.png

3D位移.png

旋转.png

动画

过渡动画transition：配合2D、3D变换transform可以自定义实现不同的特效样式。
transition如果配合伪类鼠标操作，应该先在默认样式里面配置好transition，再在伪类里设置元素变换transform。
如：先设置#userinfoImg {transition: all 0.5s}，后#userinfoImg :hover{scale(0.8) rotate(45deg);}，如此当鼠标移除后，属性瞬间去除，才不会有顿挫感。

过渡.png
过渡.gif
过渡类型.png
过渡复合属性.png
过渡类型展示.gif
动画animation
简单使用1.png
简单使用2.png
其他动画属性1.png
其他动画属性2.png
动画animation.gif