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 移动特效的一些示例,通过灵活运用,可以打造出更多的特效形式。同时也要注意,特效过多会影响网站性能,适度使用便可。