淘先锋技术网

首页 1 2 3 4 5 6 7

CSS3 移动效果越来越受到前端开发者的重视。通过 CSS3 手机特效,可以使你的网站更具活力,更具吸引力。

//例一:平滑过渡
.move {
transition: all 0.5s ease-in-out;
}
.move:hover {
transform: translateX(50px) rotate(30deg);
}
//例二:旋转变形
.rotate {
transform-origin: center center;
transition: transform 0.3s ease-in-out;
}
.rotate:hover {
transform: rotate(360deg);
}
//例三:缩放变形
.scale {
transform-origin: center center;
transition: transform 0.3s ease-in-out;
}
.scale:hover {
transform: scale(1.2);
}
//例四:透明度变化
.opacity {
transition: opacity 0.2s ease-in-out;
}
.opacity:hover {
opacity: 0.5;
}

以上仅为 CSS3 移动特效的一些示例,通过灵活运用,可以打造出更多的特效形式。同时也要注意,特效过多会影响网站性能,适度使用便可。