H5影像遮罩-H5教程-PHP中文網

H5影像遮罩

高洛峰

發布： 2016-10-12 10:55:32

原創

2730 人瀏覽過

程式碼不能運行，表示你的瀏覽器版本不夠高，加上對應瀏覽器前綴，還不行，瀏覽器不支援。

(1)知識預備

a.transform-origin

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

x-axisis 是例center即50%，指的時x軸座標原點相對於元素寬的位置

y-axis取值為例top 、center 、bottom 、length ，%預設center即50%，指的時y軸座標原點相對於元素高的位置

H5影像遮罩

個人感覺將x-axis、y-axis的取值對換會更好，就可以有這樣的理解:在left畫y軸，在center畫x軸，那麼兩軸的交點就是座標軸原點了

b.過渡與轉換的結合使用

transition-duration:500ms;

transform:rotate(0deg)

元素旋轉到0度用時500ms

: 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)全部程式碼

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>为了生活</title>
<style type="text/css">
      *
      {
           margin:0px;
           padding:0;
      }
      #lol
      {
           width:222px;
           height:221px;
           position:relative;
           overflow:hidden;
           cursor:pointer;
           margin:20px auto;
           border:10px #333 solid;
     
      }
      #lol:hover p:nth-child(2)
      {
           transform:rotate(0deg)
      }
      #lol p:nth-child(2)
      {
           width:222px;
           height:221px;
           position:absolute;
           transition-duration:500ms;
           transform-origin:right bottom;
           transform:rotate(90deg);
           background:orange;
           top:0px;
           left:0px;
      }
</style>    
</head
<body>
      <div id="lol">
           <img  src="images/H5影像遮罩" alt="H5影像遮罩" >
           <p>Hello World</p>
      </div>
</body>              
</html>

登入後複製