資訊專欄INFORMATION COLUMN
摘要：恢復內容開始一效果二知識點紅色綠色藍色透明度使用絕對定位萬能居中絕對定位層級旋轉角度放大比例選擇器優先級標簽同級比價數量與相似獨占一行三源碼關鍵詞描述旋轉放大屬性
---恢復內容開始---
一、效果
二、知識點
1、background-color: rgba(0,0,0,.4); (紅色、綠色、藍色、透明度（0-1）)
2、position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; /*使用絕對定位萬能居中*/
3、z-index: 1;/*絕對定位層級*/
4、transform: rotate(360deg) scale(1.4);/*旋轉角度 放大比例 */
5、選擇器 優先級 Id>>class> 標簽 同級比價數量
6、list-item 與black相似 獨占一行
三、源碼
doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="關鍵詞">
<meta name="Description" content="描述">
<title>css3旋轉放大屬性title>
<style>
body{
margin: 0;
padding: 0;
}
.wrap{
width: 1000px;
height: 500px;
margin: 100px auto;
background-color: #096;
}
.wrap ul{
list-style: none;
margin: 0;
padding: 0;
}
.wrap li{
position: relative;/*相對定位 監管絕對定位*/
float: left;
width: 180px;
height: 105px;
margin: 30px 10px;
background-color: rgba(0,0,0,.5);/*(紅色，綠色，藍色，透明度（0-1）)*/
}
.wrap li:before,
.wrap li:after{
position: absolute;/*絕對定位*/
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
content:;/*偽元素激活必備*/
}
.wrap li:before{
transform: rotate(-60deg);
}
.wrap li:after{
transform: rotate(60deg);
}
.wrap .important{
margin-left: 100px;/*左邊距*/
}
.wrap img{
position: absolute;/*萬能居中position: absolute; top: 0;left: 0;right: 0;bottom: 0; margin: auto;*/
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 75px;
height: 75px;
z-index: 1;/*絕對定位層級*/
}
.wrap img:hover{
transform: rotate(360deg) scale(1.4);/*旋轉角度 放大比例 */
transition: 1s;
}
/*
選擇器 優先級 Id>>class> 標簽 同級比價數量
list-item 與black相似 獨占一行
*/
style>
head>
<body>
<div class="wrap">
<ul>
<li><img src="images1.png">li>
<li><img src="images1.png">li>
<li><img src="images1.png">li>
<li><img src="images1.png">li>
<li><img src="images1.png">li>
<li class="important"><img src="images1.png">li>
<li><img src="images1.png">li>
<li><img src="images1.png">li>
<li><img src="images1.png">li>
<li><img src="images1.png">li>
<li><img src="images1.png">li>
<li><img src="images1.png">li>
<li><img src="images1.png">li>
<li><img src="images1.png">li>
ul>
div>
body>
html>
View Code
---恢復內容結束---
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1255.html
摘要：知識掃盲簡介，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來創建矢量圖。于年月日成為推薦標準。動畫如果你問我為什么用做動畫，而不是其他技術，那可以告訴你以下幾點本質上是一種圖形繪制技術，廣泛用于矢量圖繪制，適用于多數商業，卡通圖片制作。 1、 svg知識掃盲 svg簡介 SVG(Scalable Vector Graphics)，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來...
摘要：知識掃盲簡介，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來創建矢量圖。于年月日成為推薦標準。動畫如果你問我為什么用做動畫，而不是其他技術，那可以告訴你以下幾點本質上是一種圖形繪制技術，廣泛用于矢量圖繪制，適用于多數商業，卡通圖片制作。 1、 svg知識掃盲 svg簡介 SVG(Scalable Vector Graphics)，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來...
摘要：今天是我第一次寫博客，因為沒經驗嘛，我就隨便寫寫，我也希望自己以后能堅持寫下去，不為別的，就為了自己能夠更好地學習編程，能夠追隨行業大牛的腳步，從此贏取白富美，走上人生巔峰額，理想遠大呵好吧，步入正題，因為目前在學加了一些2018-11-10 今天是我第一次寫博客，因為沒經驗嘛，我就隨便寫寫，我也希望自己以后能堅持寫下去，不為別的，就為了自己能夠更好地學習編程，能夠追隨行業大牛的腳步，從此...
閱讀 713·2023-04-25 19:43
閱讀 3910·2021-11-30 14:52
閱讀 3784·2021-11-30 14:52
閱讀 3852·2021-11-29 11:00
閱讀 3783·2021-11-29 11:00
閱讀 3869·2021-11-29 11:00
閱讀 3558·2021-11-29 11:00
閱讀 6105·2021-11-29 11:00
