<style type="text/css">
.circle-box {
width: 100px;
height: 100px;
border-radius: 10px;
background-color: #808080;
/* 移动x,y */
/*transform: translate(100%, 100%);*/ /* 正往右下角负往左下角 */
/* 移动x */
/*transform: translateX(200%);*/ /* 正往右负往左 */
/* 移动Y */
transform: translateY(150%);/* 正往下负往上 */
}
</style>
<head>
<meta charset="UTF-8">
<title>background-origin</title>
<style type="text/css">
.img {
width: 720px;
height: 461px;
background: url(images/05.jpg) no-repeat center center, url(images/1.jpg);
/* 背景图片第一层 背景图片第二层 */
border: 1px dashed #ccc;
}
.img:hover {
background: url(images/05.jpg) no-repeat center center/30% 30%, url(images/1.jpg);
/* 背景图片第一层 被改成原有图片的xy大小 背景图片第二层 */
}
</style>
</head>
<style type="text/css>
class{
width;100px;
height:100px;、
background:red;
transition-property: width,height;//原始状态
transition-duration: .3s; 要等待的时间
transition-timing-function: ease-in; 变化后的状态
transition-delay: 1s;变化要的时间
transition: all .3s ease-in 1s;缩写形式
</style>
<style type="text/css">
.a {
width: 100px;
height: 100px;
background: #000000;
transition: all .3s ease-in; //原来形传 3秒时间 变成什么
}
a:hover {
transform: skew(10deg, 10deg);//变化的角度
}
</style>
<style type="text/css">
.circle-box {
width: 100px;
height: 100px;
border-radius: 10px;
background-color: #808080;
transform-origin: 0 0;//从哪里开始
transform: rotate(15deg);//变化的角度
}
</style>
</head>
<style type="text/css">
.img {
width: 400px;
height: 250px;
padding: 50px;
background-image: url(images/05.jpg);
background-repeat: no-repeat; /* 背景图片不平铺 */
border: 50px dashed #ccc; /* 边框为50像素虚线灰色 */
background-clip: padding-box;
background-position: center center; /* 图片归中点 */
}
.img:hover {
background-size: 105% 105%;
}
</style>
