欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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),最终出现闪烁显示。

HTML5 知识点总结(六)

<!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