一、CSS
@charset "UTF-8";
div{
margin: 10px;
padding: 10px;
width: 160px;
height: 80px;
background: chartreuse ;
}
#div1:hover{
background: green;
width: 60px;
transition-property: width;/*设定对宽度进行过渡*/
transition-duration: 1s;/*设定过渡时间*/
transition-timing-function: ease;/*加速过渡;ease-in以慢速开始的过渡，ease-out以慢速结束的过渡，ease-in-out以慢速开始和结束的过渡*/
transition-delay: 0.5s;/*设定延时过渡时间*/
}
#div2:hover{
background: blue;
width: 60px;
transition-property: all;/*对所有属性过渡*/
transition-duration: 1s;
transition-timing-function: linear;/*匀速过渡*/
}
#div3:hover{
background: red;
width: 60px;
transition: background 3s ease-in-out 3s;/*延时3秒，过渡时间为2s，对背景颜色过渡，过渡是先慢后快再慢*/
}
#div4{
margin: 4px;
padding: 4px;
width: 320px;
height: 200px;
background-color: lightyellow;
border-radius: 10px;
border: 2px brown dashed;
vertical-align: middle;
}
img{
width: 60px;
height: 200px;
}
img:hover{
position: relative;
transform-origin: 50% 50%;
transform: translate3D(200px, -50px ,100px) rotate3D(1,1,1,3600deg) scale(2);
transition: transform 2s ease 0s;
bottom: 20px;
}
二、HTML
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4">
<img src="..\sp\gh1.jpg" alt="test">
<img src="..\sp\gh2.jpg" alt="test">
<img src="..\sp\gh3.jpg" alt="test">
<img src="..\sp\gh4.jpg" alt="test">
<img src="..\sp\gh5.jpg" alt="test">
</div>
</body>
三、效果展示
