HTML5 知识点总结(六)

页面美化和页面特效

     图片边框
     过渡
     动画
     平移、缩放、旋转、倾斜
     综合样例



图片边框

语法:border-image: border-image-source border-image-slice border border-image-width border-image-repeat;

属性






过渡

    1. 过渡属性



    2. 过渡速度值





动画

    1. 语法



    2. 动画属性





平移、缩放、旋转、倾斜

    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 知识点总结(六)_第1张图片


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

你可能感兴趣的:(HTML5,css,animation,html,css3)