|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 本章給大家介紹CSS3實現動態打開大門效果(代碼實例)。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有所幫助先看看效果圖:
動態打開大門效果主要運用到了3D旋轉和定位技術。具體步驟如下: 1、首先在頁面主體加三個很簡單的div標簽: <div class="door">
<div class="door-l"></div>
<div class="door-r"></div>
</div>2、給外層盒子(.door) 加上基本的屬性、背景、視距以及相對定位(子盒子要用到絕對定位,所以父盒子最好 加上相對定位)。 .door {
width: 450px;
height: 450px;
border: 1px solid #000000;
margin: 100px auto;
background: url(Images/men.png) no-repeat;
background-size: 100% 100%;
position: relative;
perspective: 1000px;
}3、給左右的門設置相關屬性,這里給出左盒子的 相關屬性。右盒子只需將定位改為右邊距離為0,以及將旋轉軸改為右側即可。 .door-l {
width: 50%;
height: 100%;
background-color: brown;
position: absolute;
top: 0;
transition: all 0.5s;
left: 0;
border-right: 1px solid #000000;
transform-origin: left;
}4、添加門上的 小圓環,在這里是使用偽類 before 進行添加的。 (1)、設置大小與邊框 (2)、設置border-radius 為50% 讓其變成圓形。 (3)、設置定位 垂直居中并靠里面有一定距離。 .door-l::before {
content: "";
border: 1px solid #000000;
width: 20px;
height: 20px;
position: absolute;
top: 50%;
border-radius: 50%;
transform: translateY(-50%);
right: 5px;
}5、最后設置旋轉度數,我這里是設置了120度(注意度數的正負代表旋轉方向) .door:hover .door-l {
transform: rotateY(-120deg);
}下面給出完整代碼,給大家參考一下。 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>動態打開大門</title>
<style>
.door {
width: 450px;
height: 450px;
border: 1px solid #000000;
margin: 100px auto;
background: url(Images/men.png) no-repeat;
background-size: 100% 100%;
position: relative;
perspective: 1000px;
}
.door-l,.door-r {
width: 50%;
height: 100%;
background-color: brown;
position: absolute;
top: 0;
transition: all 0.5s;
}
.door-l {
left: 0;
border-right: 1px solid #000000;
transform-origin: left;
}
.door-r {
right: 0;
border-left: 1px solid #000000;
transform-origin: right;
}
.door-l::before, .door-r::before {
content: "";
border: 1px solid #000000;
width: 20px;
height: 20px;
position: absolute;
top: 50%;
border-radius: 50%;
transform: translateY(-50%);
}
.door-l::before {
right: 5px;
}
.door-r::before {
left: 5px;
}
.door:hover .door-l {
transform: rotateY(-120deg);
}
.door:hover .door-r {
transform: rotateY(120deg);
}
</style>
</head>
<body>
<div class="door">
<div class="door-l"></div>
<div class="door-r"></div>
</div>
</body>
</html>上面給出的效果圖是靜態的,大家可以自己編譯上述代碼,看看效果。希望對你們有所幫助 以上就是CSS3實現動態打開大門效果(代碼實例)的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!