展示
代码
SVG代码：
<svg width="480" height="480" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="svg_2_blur" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="6"/>
</filter>
<linearGradient y2="0.8" x2="1" y1="0" x1="0" id="svg_6">
<stop stop-color="#ffffff" offset="0"/>
<stop stop-color="#eeeeee" offset="0.45"/>
<stop stop-color="#ffffff" offset="0.5"/>
<stop stop-color="#eeeeee" offset="0.55"/>
<stop stop-color="#ffffff" offset="1"/>
</linearGradient>
</defs>
<g>
<title>Layer 1</title>
<path fill="#000000" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m24.81929,21.20483l-21.20483,214.93975l15.66265,224.09642l220.48192,12.04813l215.66266,-13.25299l15.66263,-219.2771l-15.66257,-220.48191l-219.27718,-12.04819l-211.3253,13.97591l0.00001,-0.00001z" id="svg_2" opacity="0.32" filter="url(#svg_2_blur)"/>
<rect id="svg_5" height="448.00001" width="444.99998" y="10" x="13.00002" stroke-opacity="0.8" stroke-linecap="null" stroke-linejoin="null" stroke="#d3d0c9" fill="url(#svg_6)"/>
</g>
</svg>
CSS代码：
.image{
padding: 1em 1.7em 1.4em 1.2em;
background: url(nice-gradient.svg);
background-size: 100% 100%;
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg) ;
-o-transform: rotate(5deg);
-ms-transform:rotate(5deg);
transform:rotate(5deg);
}
.image:nth-child(odd) {-moz-transform: rotate(-10deg);-webkit-transform: rotate(-10deg) ;-o-transform: rotate(-10deg);-ms-transform:rotate(-10deg); transform:rotate(-10deg);}
.image:nth-child(3n+3) {-moz-transform: rotate(3deg);-webkit-transform: rotate(3deg) ;-o-transform: rotate(3deg);-ms-transform:rotate(3deg); transform:rotate(3deg);}
HTML代码：
<img class="image" src="//image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
<img class="image" src="//image.zhangxinxu.com/image/study/s/s256/mm2.jpg" />
<img class="image" src="//image.zhangxinxu.com/image/study/s/s256/mm3.jpg" />
<img class="image" src="//image.zhangxinxu.com/image/study/s/s256/mm4.jpg" />
<img class="image" src="//image.zhangxinxu.com/image/study/s/s256/mm5.jpg" />
