資訊專(zhuān)欄INFORMATION COLUMN
摘要：恢復(fù)內(nèi)容開(kāi)始一效果二知識(shí)點(diǎn)紅色綠色藍(lán)色透明度使用絕對(duì)定位萬(wàn)能居中絕對(duì)定位層級(jí)旋轉(zhuǎn)角度放大比例選擇器優(yōu)先級(jí)標(biāo)簽同級(jí)比價(jià)數(shù)量與相似獨(dú)占一行三源碼關(guān)鍵詞描述旋轉(zhuǎn)放大屬性
---恢復(fù)內(nèi)容開(kāi)始---
一、效果
二、知識(shí)點(diǎn)
1、background-color: rgba(0,0,0,.4); (紅色、綠色、藍(lán)色、透明度（0-1）)
2、position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; /*使用絕對(duì)定位萬(wàn)能居中*/
3、z-index: 1;/*絕對(duì)定位層級(jí)*/
4、transform: rotate(360deg) scale(1.4);/*旋轉(zhuǎn)角度 放大比例 */
5、選擇器 優(yōu)先級(jí) Id>>class> 標(biāo)簽 同級(jí)比價(jià)數(shù)量
6、list-item 與black相似 獨(dú)占一行
三、源碼
doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="關(guān)鍵詞">
<meta name="Description" content="描述">
<title>css3旋轉(zhuǎn)放大屬性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;/*相對(duì)定位 監(jiān)管絕對(duì)定位*/
float: left;
width: 180px;
height: 105px;
margin: 30px 10px;
background-color: rgba(0,0,0,.5);/*(紅色，綠色，藍(lán)色，透明度（0-1）)*/
}
.wrap li:before,
.wrap li:after{
position: absolute;/*絕對(duì)定位*/
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;/*萬(wàn)能居中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;/*絕對(duì)定位層級(jí)*/
}
.wrap img:hover{
transform: rotate(360deg) scale(1.4);/*旋轉(zhuǎn)角度 放大比例 */
transition: 1s;
}
/*
選擇器 優(yōu)先級(jí) Id>>class> 標(biāo)簽 同級(jí)比價(jià)數(shù)量
list-item 與black相似 獨(dú)占一行
*/
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
---恢復(fù)內(nèi)容結(jié)束---
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/1255.html
摘要：知識(shí)掃盲簡(jiǎn)介，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來(lái)創(chuàng)建矢量圖。于年月日成為推薦標(biāo)準(zhǔn)。動(dòng)畫(huà)如果你問(wèn)我為什么用做動(dòng)畫(huà)，而不是其他技術(shù)，那可以告訴你以下幾點(diǎn)本質(zhì)上是一種圖形繪制技術(shù)，廣泛用于矢量圖繪制，適用于多數(shù)商業(yè)，卡通圖片制作。 1、 svg知識(shí)掃盲 svg簡(jiǎn)介 SVG(Scalable Vector Graphics)，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來(lái)...
摘要：知識(shí)掃盲簡(jiǎn)介，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來(lái)創(chuàng)建矢量圖。于年月日成為推薦標(biāo)準(zhǔn)。動(dòng)畫(huà)如果你問(wèn)我為什么用做動(dòng)畫(huà)，而不是其他技術(shù)，那可以告訴你以下幾點(diǎn)本質(zhì)上是一種圖形繪制技術(shù)，廣泛用于矢量圖繪制，適用于多數(shù)商業(yè)，卡通圖片制作。 1、 svg知識(shí)掃盲 svg簡(jiǎn)介 SVG(Scalable Vector Graphics)，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來(lái)...
摘要：今天是我第一次寫(xiě)博客，因?yàn)闆](méi)經(jīng)驗(yàn)嘛，我就隨便寫(xiě)寫(xiě)，我也希望自己以后能堅(jiān)持寫(xiě)下去，不為別的，就為了自己能夠更好地學(xué)習(xí)編程，能夠追隨行業(yè)大牛的腳步，從此贏取白富美，走上人生巔峰額，理想遠(yuǎn)大呵好吧，步入正題，因?yàn)槟壳霸趯W(xué)加了一些2018-11-10 今天是我第一次寫(xiě)博客，因?yàn)闆](méi)經(jīng)驗(yàn)嘛，我就隨便寫(xiě)寫(xiě)，我也希望自己以后能堅(jiān)持寫(xiě)下去，不為別的，就為了自己能夠更好地學(xué)習(xí)編程，能夠追隨行業(yè)大牛的腳步，從此...
閱讀 847·2023-04-25 19:43
閱讀 4116·2021-11-30 14:52
閱讀 3930·2021-11-30 14:52
閱讀 4027·2021-11-29 11:00
閱讀 3922·2021-11-29 11:00
閱讀 4039·2021-11-29 11:00
閱讀 3770·2021-11-29 11:00
閱讀 6608·2021-11-29 11:00
