<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>transform的使用</title>
<style>
li{
list-style: none;
float: left;
width: 80px;
line-height: 40px;
background: rgba(242, 123, 5, 0.61);
border-radius: 6px;
font-size: 16px;
margin-left: 3px;
}
li a{
text-decoration: none;
color: #fff;
display: block;
text-align: center;
height: 40px;
}
li a:hover{
background: rgba(242, 88, 6, 0.87);
border-radius: 6px;
/*设置a元素在鼠标移入时向右下角移动4px，8px*/
/* transform: translate(4px,8px); 平移*/
/*鼠标放入 显示1.5倍的效果
transform: scale(1.5);*/
/* transform: skewX(15deg);只针对X轴
transform: skewY(15deg);只针对Y轴*/
transform: skew(15deg,-15deg);
}
img:hover{
/*旋转 默认是 顺时针旋转*/
transform: rotate(90deg) scale(1.5);
}
</style>
</head>
<body>
<ul>
<li><a href="#">服装城</a></li>
<li><a href="#">美妆馆</a></li>
<li><a href="#">超市</a></li>
<li><a href="#">全球购</a></li>
<li><a href="#">闪购</a></li>
<li><a href="#">团购</a></li>
<li><a href="#">拍卖</a></li>
<li><a href="#">金融</a></li>
</ul>
<img src="cat.jpg" alt="小猫咪" height="100px" width="100px">
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>transition属性</title>
<style type="text/css">
/*
transition属性的值：
transition-property：过渡效果的css属性的名称（color,background,font-size....）!
可以只设置一个属性， 一般方便起见使用all！针对于所有的属性
transition-duration:过渡效果需要多少秒
transition-timing-function：速度曲线！
ease：慢速开始，之后变快！
linear：匀速！
ease-in:慢速开始!
ease-out:慢速结束：
ease-in-out:慢速开始!慢速结束!
transition-delay:过度效果开始前的等待时间！ 默认是0s！
*/
div{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: orange;
/*过度效果*/
transition:all 1s linear;
}
div:hover{
background-color: red;
font-size: 25px;
transform: rotate(360deg);
}
</style>
</head>
<body>
<div>
能旋转不？
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>animation的使用</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: red;
/*调用动画*/
animation:animates 3s linear infinite;
}
/*创建关键帧*/
@keyframes animates{
0%{
width: 0px;
transform: translate(50px,0) ;
}
25%{
width: 25px;
height: 150px;
transform: translate(150px,0) rotate(90deg);
background-color: pink;
}
50%{
width: 50px;
height: 300px;
background-color: aqua;
transform: translate(300px,0) rotate(180deg);
}
75%{
width: 75px;
height: 150px;
background-color: orange;
transform: translate(150px,0) rotate(270deg);
}
100%{
width: 100px;
transform: translate(50px,0) rotate(360deg);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
