你的位置:首页 > 软件开发 > 网页设计 > CSS3滤镜!!!

CSS3滤镜!!!

发布时间:2016-07-12 21:00:29
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 img { 6 width: 33%; 7 height: auto; 8 float: left; 9 max-wi ...

CSS3滤镜!!!

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 img { 6   width: 33%; 7   height: auto; 8   float: left;  9   max-width: 235px;10 }11 12 .blur {-webkit-filter: blur(4px);filter: blur(4px);}13 .brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}14 .contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}15 .grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}16 .huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}17 .invert {-webkit-filter: invert(100%);filter: invert(100%);}18 .opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}19 .saturate {-webkit-filter: saturate(7); filter: saturate(7);}20 .sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}21 .shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}22 </style>23 </head>24 <body>25 26 <p><strong>注意:</strong> Internet Explorer <span lang="no-bok">或 Safari 5.1 (及更早版本)</span> 不支持该属性。</p>27 28 <img src='/images/loading.gif' data-original="pineapple.jpg"  width="300" height="300">29 <img class="blur" src='/images/loading.gif' data-original="pineapple.jpg"  width="300" height="300">30 <img class="brightness" src='/images/loading.gif' data-original="pineapple.jpg"  width="300" height="300">31 <img class="contrast" src='/images/loading.gif' data-original="pineapple.jpg"  width="300" height="300">32 <img class="grayscale" src='/images/loading.gif' data-original="pineapple.jpg"  width="300" height="300">33 <img class="huerotate" src='/images/loading.gif' data-original="pineapple.jpg"  width="300" height="300">34 <img class="invert" src='/images/loading.gif' data-original="pineapple.jpg"  width="300" height="300">35 <img class="opacity" src='/images/loading.gif' data-original="pineapple.jpg"  width="300" height="300">36 <img class="saturate" src='/images/loading.gif' data-original="pineapple.jpg"  width="300" height="300">37 <img class="sepia" src='/images/loading.gif' data-original="pineapple.jpg"  width="300" height="300">38 <img class="shadow" src='/images/loading.gif' data-original="pineapple.jpg"  width="300" height="300">39 40 </body>41 </html>

原标题:CSS3滤镜!!!

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。