頻道欄目
首頁 > 資訊 > HTML 5 > 正文

HTML5中的偽類選擇器實現一張圖片翻轉特效(代碼實例)

18-06-02        來源:[db:作者]  
收藏   我要投稿

效果示意圖

圖中,我實現的效果是 當鼠標懸停在圖片上面時,圖片將圍繞下邊界旋轉90度

代碼示例:

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <style>  
            *{  
                margin: 0;  
                padding: 0;  
            }  
            div{  
                width: 300px;  
                height: 350px;  
                margin: 0 auto;  
                /*設置盒子居中顯示*/  
                background-color: skyblue;  
                padding-top: 150px;  
                /*內邊距 (div標簽)*/  
                /*border: 1px solid black;*/  
                text-align: center;  
                perspective: 350px;  
            }  
            div img{  
                transition: all 3s;  
                transform-origin: bottom;  
            }  
            div img:hover{  
                transform:rotateX(90deg) ;  
            }  
        </style>  
    </head>  
    <body>  
        <div>  
            <img src="img/angel2.jpeg" width="250px" height="350px"/>  
        </div>  
    </body>  
</html>  

補充知識點:

1.偽類選擇器相關:

hover 偽類選擇器:

	hover這個偽類選擇器除了可以用在a標簽上,還可以用在其他的任何標簽上面
	格式:div:hover{}
	當鼠標懸停在標簽上時所要執行的操作
	過渡模塊:
	   <style>中:
		在<div>標簽內添加:
		transition-property :告訴系統哪個屬性需要重新過渡
		屬性:width,height,color,background-color....
		格式:transition-property: 屬性(width....);
		transition-duration: 告訴系統該過渡的持續時間為多少
		格式:transitino-duration: 5s;
		transition-delay  :鼠標懸停幾秒后開始變化
		格式:transition-delay:1s;


	監聽哪一個就在哪一個后面加:hover
	<style>標簽中添加 : div:hover{
				屬性:要改變的樣子
					
				}
		            <div>里面的簡寫格式:
				transition:第一個過渡屬性 過渡時長 運動速度 延時時長 , 
				第二個過渡屬性 過渡時長 運動速度 延時時長;
				(也可以省略后面的兩個參數,只要編寫前面兩個參數就滿足過渡三要素)
				所有屬性均為一個過渡效果: transition : all 5s;
2.2D 模型轉換:

2D 轉換模塊:
	格式:
		transform: rotateZ(45deg); //繞Z軸旋轉45度
				 X Y..
		transform: scale(1.5);   //將其在原來的基礎上面放大為1.5被
		
		設置旋轉中心: 
			div img{
				transform-origin:center bottom;//      此處設置為圍繞底部旋轉
			}
	轉換軸向:默認情況下都是圍繞z軸進行旋轉;
	透視屬性:
		格式:
		注意: 透視屬性必須添加到當前需要呈現的元素的父元素上面:
		   在<style>
			<ul>中添加 perspective: XXXpx;//數值越小 效果越明顯
			li的父元素是ul 標簽

		產生近大遠小的效果(立體感)
相關TAG標簽
上一篇:臺積電:絕大多數7nm客戶都會轉向6nm_IT新聞_博客園
下一篇:最后一頁
相關文章
圖文推薦

關于我們 | 聯系我們 | 廣告服務 | 投資合作 | 版權申明 | 在線幫助 | 網站地圖 | 作品發布 | Vip技術培訓 | 舉報中心

版權所有: 紅黑聯盟--致力于做實用的IT技術學習網站

美女MM131爽爽爽毛片