CSS Shapes
shape-outside : shape or image
沿著圖片內(nèi)部某個人物或物品的排列方式燕偶，具體效果見 https://codepen.io/jinjiang/embed/EMBzpg
image.png
HTML
<div id="container">
<!-- Using CSS Shapes Module -->
<!-- https://drafts.csswg.org/css-shapes/ -->
<img id="photo" role="none" alt="武磊的照片" src="https://c2.hoopchina.com.cn/uploads/star/event/images/190210/29752f55faa730e6615920960b9bc314f5033380.jpg" />
<h1>武磊</h1>
<h2>個人信息</h2>
<ul>
<li><strong>全名：</strong>武磊</li>
<li><strong>暱稱：</strong>武球王鲜结、中國梅西、核武7</li>
<li><strong>出生日</strong>期：1991-11-19 (27歲)</li>
<li><strong>出生地</strong>點(diǎn)：中國江蘇南京</li>
<li><strong>身高：</strong>1.72米</li>
<li><strong>位置：</strong>前鋒/前腰</li>
</ul>
<h2>俱樂部信息</h2>
<ul>
<li><strong>現(xiàn)在所屬：</strong>西班牙人</li>
<li><strong>球衣號碼：</strong>24</li>
</ul>
<h2>青年隊(duì)</h2>
<ul>
<li><strong>2003–2005：</strong>根寶足球基地</li>
</ul>
<h2>職業(yè)俱樂部 <sup>年份：球隊(duì) - 出場 - (進(jìn)球)</sup></h2>
<ul>
<li><strong>2006–2018：</strong>上海上港 - 296 - (151)</li>
<li><strong>2019–：</strong>西班牙人 - 7 - (1)</li>
</ul>
<h2>國家隊(duì) <sup>年份：球隊(duì) - 出場 - (進(jìn)球)</sup></h2>
<ul>
<li><strong>2007–2008：</strong>中國U-17 - 8 - (7)</li>
<li><strong>2009–2010：</strong>中國U-20 - 9 - (11)</li>
<li><strong>2010–：</strong>中國 - 63 - (15)</li>
</ul>
<p>資料來自：<a target="_blank" >維基百科</a>；圖片來自：<a target="_blank" >虎撲體育</a></p>
</div>
body {
background: #333; color: #eef;
font-family: sans-serif;
text-shadow: 2px 2px 2px rgba(0,0,0,.5);
}
h1,h2,h3,a { color: white; }
ul { list-style: none; }
#container { width: 1200px; margin: auto; padding: 2em 0; clear: both; }
#photo {
float: left; width: 100%; border-radius: 10px;
shape-outside: polygon(0% 0%, 45% 0, 52% 52%, 32% 100%, 0% 100%);
}
css移動效果的寫法宇色，效果見 https://codepen.io/Jinjiang/embed/NJZVOm
image.png
HTML
<input type="range" oninput="change(event)" style="position: absolute;" />
<div id="container">
<!-- Using CSS Shapes Module -->
<!-- https://drafts.csswg.org/css-shapes/ -->
<img id="photo" role="none" alt="武磊的照片" src="https://c2.hoopchina.com.cn/uploads/star/event/images/190210/29752f55faa730e6615920960b9bc314f5033380.jpg" />
<h1>武磊</h1>
<h2>個人信息</h2>
<ul>
<li><strong>全名：</strong>武磊</li>
<li><strong>暱稱：</strong>武球王仓技、中國梅西、核武7</li>
<li><strong>出生日</strong>期：1991-11-19 (27歲)</li>
<li><strong>出生地</strong>點(diǎn)：中國江蘇南京</li>
<li><strong>身高：</strong>1.72米</li>
<li><strong>位置：</strong>前鋒/前腰</li>
</ul>
<h2>俱樂部信息</h2>
<ul>
<li><strong>現(xiàn)在所屬：</strong>西班牙人</li>
<li><strong>球衣號碼：</strong>24</li>
</ul>
<h2>青年隊(duì)</h2>
<ul>
<li><strong>2003–2005：</strong>根寶足球基地</li>
</ul>
<h2>職業(yè)俱樂部 <sup>年份：球隊(duì) - 出場 - (進(jìn)球)</sup></h2>
<ul>
<li><strong>2006–2018：</strong>上海上港 - 296 - (151)</li>
<li><strong>2019–：</strong>西班牙人 - 7 - (1)</li>
</ul>
<h2>國家隊(duì) <sup>年份：球隊(duì) - 出場 - (進(jìn)球)</sup></h2>
<ul>
<li><strong>2007–2008：</strong>中國U-17 - 8 - (7)</li>
<li><strong>2009–2010：</strong>中國U-20 - 9 - (11)</li>
<li><strong>2010–：</strong>中國 - 63 - (15)</li>
</ul>
<p>資料來自：<a target="_blank" >維基百科</a>祷嘶；圖片來自：<a target="_blank" >虎撲體育</a></p>
</div>
css
body {
background: #333; color: #eef;
font-family: sans-serif;
text-shadow: 2px 2px 2px rgba(0,0,0,.5);
}
h1,h2,h3,a { color: white; }
ul { list-style: none; }
#container { width: 1200px; margin: auto; padding: 2em 0; clear: both; }
#photo {
float: left; width: 100%; border-radius: 10px;
shape-outside: linear-gradient(110deg, white, transparent);
shape-image-threshold: .5;
animation: run .5s;
}
@keyframes run {
0% { shape-image-threshold: 1; }
100% { shape-image-threshold: .5; }
}
