求一个设计大佬设计博客样式。。。
直男审美自己都看不下去了= =
作为回报我可以教你一点前端知识 (•̀ω•́ 」∠) //虽然我也是菜鸡...要不肉偿把我
今天的主题是css3中的transfrom-style中的preserve-3d鼠标悬浮倾斜效果
下面是效果图
悬浮倾斜
qq截图把鼠标隐藏了
是不是感觉很厉害
其实很简单
但是我花了一天时间才做出来(果然是码渣= =)
下面是详细步骤
1，父元素设置景深
景深这个东西靠空间想象能力吧，属性设置perspective:800px;，需要设置在盒子的父级元素上，将整个父级盒子当作承载3D的载体。景深设置的越小，3D效果会越明显。
2，子元素容器设置
分别设置，转变方式设为3D效果，渐变时间设为0.2s
transform-style: preserve-3d;
transition:all 0.2s;
3，监听鼠标的移入与移出
鼠标移入，产生倾斜效果倾斜效果由transfram中的rotateX，rotateY决定，鼠标移出，清除倾斜效果。po主用的是vue，代码如下
<div class="mainBox" id="main">
<div v-for="(article,index) in articles" class="ass clearfix" @mousemove="skew($event,index)" @mouseleave="clearRot(index)">
//在vue中，如果想要同时传入参数和event事件对象，需要在参数中写$event，否则只用写e就好了
<h2>{{article.title}}</h2>
<section>{{article.date}}</section>
<p>{{article.content}}</p>
<a href="javascript:" @click="readmore">阅读全部</a>
</div>
</div>
skew(e,index){...}//划重点
clearRot(index){
//一寸长，一寸强
//querySelector属于原生css选择器，动态设置transform时可以加上webkit前缀兼容低版本webkit浏览器
document.querySelector('#main').childNodes[index].style.webkitTransform = "rotate(0deg)"
}
4，重点来了
为了让鼠标在子元素中不同位置，盒子会有不同的倾斜效果，如果把每个盒子当作一个容器，左上角为原点，得到这个容器中鼠标的坐标，再根据鼠标坐标，动态设置倾斜的角度，效果就ok了。
具体操作
在上面传入函数的event对象，存在pageX与pageY属性，获得的是鼠标相对于浏览器窗口的距离，如果我们再有，每个盒子相对浏览器窗口的距离，那么
鼠标在盒子中的相对距离 = 鼠标相对窗口距离 - 盒子相对窗口距离
于是，我们通过dom.getBoundingClientRect().left获得盒子相对窗口距离，通过event.pageX获取鼠标相对窗口距离，计算得出鼠标相对盒子距离
注意，e.pageY始终获取的是鼠标位置与原始窗口顶部的位置，也就是说，无论滚动条滚动多少，在同一个地方的e.pageY不变，但是dom.getBoundingClientRect().top在变，所以计算相对高度时，要减去滚动的高度
var Xskew = e.pageX - leftDis + 10 +1 //加1防止为0时翻转出问题
var Yskew = e.pageY - document.documentElement.scrollTop - topDis
5，当相对位置Xskew大于盒子宽度的一半则相当于按压右边，小于盒子宽度的一半则相当于按压左边，上下同理
此处rotate大小设置看个人喜好，我设置的是rotateX范围为(-4,4)，rotateY范围(-6.5，6.5)
6，空间直角坐标系中，在一个盒子中若要出现类似按压的效果，以左上角为例，若左上角被按压，则盒子当向前沿X轴(顺时针)旋转，因此rotate为正，因为左侧按压，则沿Y轴逆时针旋转，rotateY(...)为负
对应的
左上角被按压对应 transform:rotateX(4) rotateY(-6.5)
左下角被按压对应 transform:rotateX(-4) rotateY(-6.5)
右上角被按压对应 transform:rotateX(4) rotateY(6.5)
右下角被按压对应 transform:rotateX(-4) rotateY(6.5)
计算出旋转的角度最后将其设置到transform属性上即可
dom.style.webkitTransform = "rotateX("+Xdeg+"deg)"+"rotateY("+Ydeg+"deg)"
7，具体代码
skew(e,index){
//获取文章dom元素
var dom = document.querySelector('#main').childNodes[index]
//获取元素自身高度和宽度
var Wdom = dom.offsetWidth
var Hdom = dom.offsetHeight
//dom.getBoundingClientRect()可以直接获取到元素的与浏览器的相对位置
var leftDis = dom.getBoundingClientRect().left
var topDis = dom.getBoundingClientRect().top + 20
//注意，e.pageY始终获取的是鼠标位置与原始窗口顶部的位置，也就是说，无论滚动条滚动多少，在同一个地方的e.pageY不变，但是dom.getBoundingClientRect().top在变，所以计算相对高度时，要减去滚动的高度
var Xskew = e.pageX - leftDis + 10 //加10防止为0时翻转出问题
var Yskew = e.pageY - document.documentElement.scrollTop - topDis
console.log(e.pageY)
//console.log(Xskew,Yskew)
if(Yskew >= Hdom/2){
//6.5设为x轴方向倾斜的最大参数，从6.5到-6.5
var Xdeg = -(4/(Hdom/2))*(Yskew-(Hdom/2))
}else{
//此处有转义错误，先用4除2好了
var Xdeg = (4/(Hdom/2))*((Hdom/2)-Yskew)
//console.log('Xdeg为'+Xdeg)
//var Ydeg = (3.25/Wdom)*(Xskew - (Wdom/2))
}
//高度195的一半,和宽度不一样，这里设为固定值
if(Xskew < Wdom/2){
var Ydeg = -(6.5/(Wdom/2))*(Wdom/2-Xskew)
}else{
var Ydeg = (6.5/(Wdom/2))*(Xskew-Wdom/2)
}
//console.log(Xdeg,Ydeg)
dom.style.webkitTransform = "rotateX("+Xdeg+"deg)"+"rotateY("+Ydeg+"deg)"
}
2017/11/5
网友评论