css

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

 

posted @ 2016-08-14 21:02  刘文武  阅读(117)  评论(0编辑  收藏  举报