当前位置:Gxlcms > html代码 > H5图像遮罩

H5图像遮罩

时间:2021-07-01 10:21:17 帮助过:48人阅读

代码不能运行,说明你的浏览器版本不够高,加上对应浏览器前缀,还不行,浏览器不支持。

(1)知识预备

a.transform-origin

transform-origin: x-axis y-axis z-axis;

x-axis取值为例left 、center 、right 、length 、%,默认center即50%,指的时x轴坐标原点相对于元素宽的位置

y-axis取值为例top 、center 、bottom 、length ,%默认center即50%,指的时y轴坐标原点相对于元素高的位置

1.jpg

个人感觉将x-axis、y-axis的取值对换会更好,就可以有这样的理解:在left画y轴,在center画x轴,那么两轴的交点就是坐标轴原点了

b.过渡与转换的结合使用

transition-duration:500ms;

transform:rotate(0deg)

元素旋转到0度用时500ms

c. #lol:hover p:nth-child(2)

当鼠标放在id为lol的元素A上时,在A所有的子元素中如果第二个是p元素则匹配成功。

d.关键代码

#lol:hover p:nth-child(2)/*鼠标放在p元素上时触发*/
      {
           transform:rotate(0deg)
           /*等价于transform:translate(0px,0px) rotate(0deg) 不要忘记默认属性*/
           /* transition-duration:500ms;transform-origin:right bottom;不写也是一样的,因为#lol p:nth-child(2)设置了*/
      }
      #lol p:nth-child(2)/*浏览器显示p元素时执行*/
      {
           transition-duration:500ms;
           transform-origin:right bottom;
           transform:rotate(90deg);
           …
      }

(2)全部代码






为了生活
    

      

Hello World

人气教程排行