HTML5 知识点总结（六）
程序员文章站
2022-06-18 19:17:03
页面美化和页面特效图片边框过渡动画平移、缩放、旋转、倾斜图片边框语法：border-image: border-image-source border-image-slice border border-image-width border-i...
页面美化和页面特效
图片边框
语法：border-image: border-image-source border-image-slice border border-image-width border-image-repeat；
属性
<style type="text/css">
border-image-source:路径
border-image-slice:图片切割位置
border-image-width: 边框宽度
border-image-repeat: 排列方式 （常用取值如下）
space:在不切断图片的情况下，平铺图片并保留一定间距填满整个空间
repeat:平铺切分图填满整个空间
stretch:拉伸切分图填满整个空间（默认值）
round:平铺并拉伸填满整个空间，不切割图片
</style>
过渡
1. 过渡属性
<style type="text/css">
body:hover{
transition-delay: ; 过渡开始前的延迟（延迟）
transition-duration: ; 过渡持续时间（时间）
transition-property: ; 应用过渡的属性（样式）
transition-timing-function: ; 过渡期间计算中间值（速度曲线）
transform: ; 过渡的简写
}
</style>
2. 过渡速度值
<style type="text/css">
body:hover{
transition-timing-function: ;常用属性值
ease:慢速开始，接着加速，然后慢速结束（默认值）
linear:相同速度开始到结束
ease-in:慢速开始
ease-out:慢速结束
ease-in-out:慢速开始，慢速结束
}
</style>
动画
1. 语法
<style type="text/css">
@keyframes name{
from{起始样式}
to{结束样式}
}
或
@keyframes name{
0%{样式}
50%{样式}
100%{样式}
}
标签名：动作{
animation:关键帧名 持续时间 动画速度 延迟时间 播放次数 ;
}
</style>
2. 动画属性
<style type="text/css">
animation-delay: ; 开始前延迟时间
animation-direction: ; 循环播放时间和是否反向播放 取值：normal 或 alternate
animation-duration: ; 动画播放的持续时间
animation-iteration-count: ; 动画播放次数 取值：infinite 或 数值
animation-name: ; 动画名称
animation-play-state: ; 允许动画暂停和重新播放 取值：running 或 paused
animation-timing-function: ; 动画期间计算中间值的方式，确定动画播放速度的变化
</style>
平移、缩放、旋转、倾斜
1.变换属性
| 属性 | 说明 |
|---|---|
| transform | 应用的变换功能 |
| transform- origin | 变换的起点 |
2. transform的属性值
| 属性 | 说明 |
|---|---|
| translate(< 长度值或百分数值>) | 指定在水平和垂直两个方向上平移元素 |
| translateX(<长度值或百分数值>) | 指定在水平方向上平移元素 |
| translateY(<长度值或百分数值>) | 指定在垂直方向上平移元素 |
| scale(<数值>) | 指定在水平和垂直两个方向上缩放元素 |
| scaleX(<数值>) | 指定在水平方向上缩放元素 |
| saleY(<数值>) | 指定在垂直方向上缩放元素 |
| rotate(<角度>) | 旋转元素 |
| skew(<角度>) | 指定在水平和垂直两个方向上使元素倾斜一定的角度 |
| skewX(<角度>) | 指定在水平方向上使元素倾斜一定的角度 |
| skewY(<角度>) | 指定在垂直方向上使元素倾斜一定的角度 |
| matrix（4~6个数值，逗号隔开） | 指定自定义变换 |
3. transform- origin属性的值
| 属性 | 说明 |
|---|---|
| <%> | 指定元素X轴或者Y轴的起点 |
| <长度值> | 指定距离 |
| left | 指定X轴上的位置 |
| center | 指定X轴上的位置 |
| right | 指定X轴上的位置 |
| top | 指定Y轴上的位置 |
| center | 指定Y轴上的位置 |
| bottom | 指定Y轴上的位置 |
4. CSS3中的角度单位
| 属性 | 说明 |
|---|---|
| deg | 角度(degrees) |
| grad | 梯度(gradians) |
| rad | 弧度(radians) |
| turn | 转、圈(turns) |
综合样例
在index.html中使用ul-li实现导航菜单。编写Css样式规则，美化页面，对每个 li 标签设置内部阴影，将背景颜色设置为#c3c7c3,并且设置显示左边框，而右边框设为半径为20px的圆角。使用li:hover属性实现鼠标悬停时的样式:背景色设为#222222，li 宽度更改为200px，边框阴影更改为外阴影偏移5px，将动画属性设置为无限循环次数(infinite )和结束后反向播放( alternate)，最终出现闪烁显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>综合样例</title>
<style type="text/css">
ul{
width: 300px;
list-style: none;
}
ul li{
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
background: #c3c7c3;
border-left: solid 1px black;
box-shadow: inset 0 0 15px #8A2BE2;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
@keyframes meunm{
to{
width: 200px;
background: #222222;
color: #008000;
box-shadow: 5px 5px 15px black;
}
}
li:hover{
animation: meunm 600ms linear 10ms alternate infinite;
}
</style>
</head>
<body>
<ul>
<li>订单管理</li>
<li>商品管理</li>
<li>客户管理</li>
<li>类别管理</li>
<li>权限管理</li>
</ul>
</body>
</html>
本文地址：https://blog.csdn.net/weixin_46085790/article/details/112813367
上一篇： 【射频】【5G】SRS原理及应用
下一篇： 怕npy的牛牛（双指针）