SVG实现曲线投影渐变实例页面

展示

回到相关文章 »

代码

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" />