css3 斜着滑动 |css炫酷字体样式模板

css 文字下移，提取干净的css，css里面加图片路径，css平移过度动画，css播放音乐的控件，如何用css做飞机窗，css炫酷字体样式模板 css3 斜着滑动 |css炫酷字体样式模板

/* 设置div样式 */
div {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
}
/* 设置图片样式 */
img {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
/* 添加斜着滑动特效 */
transform: rotate(-45deg) translate(-100px, 50px);
transition: transform 1s;
}
/* 鼠标触发滑动 */
div:hover img {
transform: rotate(0deg) translate(0, 0);
}

以上代码中，大家首先设置了一个div元素，定义了它的宽度、高度和溢出隐藏属性。接着，大家将图片设置为绝对位置，并通过margin值让图片处于div元素中央。在“添加斜着滑动特效”的部分，大家使用了CSS3的transform属性，将图片旋转了45度同时向左上方移动100px和向下移动50px。这样就实现了斜着滑动的效果。

最后，大家在鼠标悬停在div元素上时触发mouseout事件，使用CSS3的transition属性将图片重新旋转到0度，同时移动回原来的位置。这样就完成了一个简单的斜着滑动特效。