jQuery 3D懸浮字體是前端常見的一個效果,它涉及到CSS3的三維變換,可以為網頁設計帶來炫酷的視覺效果。可以使用jQuery和CSS3實現3D懸浮字體。下面是一個示例:
$('.box').on('mousemove', function(e){
var w = $(this).width(),
h = $(this).height(),
x = e.pageX - $(this).offset().left - w / 2,
y = e.pageY - $(this).offset().top - h / 2;
var r = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)),
angle = Math.atan2(y, x),
tiltAngle = angle * (180 / Math.PI),
dy = e.pageY - $(this).offset().top,
dx = e.pageX - $(this).offset().left,
rz = dx - w / 2;
$(this).find('.text').css({
transform: 'rotateY(' + tiltAngle + 'deg)' + 'rotateX(' + (-3 * (dy / h)) + 'deg)' + 'translateZ(40px)' + 'translateX(' + (-30 + 30 * (dx / w)) + 'px)',
'-webkit-transform': 'rotateY(' + tiltAngle + 'deg)' + 'rotateX(' + (-3 * (dy / h)) + 'deg)' + 'translateZ(40px)' + 'translateX(' + (-30 + 30 * (dx / w)) + 'px)'
});
});
這段代碼實現了鼠標在文本框上移動時,文本框內的文字可以傾斜、旋轉、平移,從而呈現3D的效果。
上一篇html生日下拉框代碼
下一篇vue打包部署 靜態