css3的过滤效果简单实例

时间：2021-05-08

上面的图片就是css3新特性的滤镜效果，学会了这些那么我们这群爱美爱帅的大web是不是就可以完美的用代码实现照片美化了捏~~

好，咱们先把照片后面的白框实现，

XML/HTML Code复制内容到剪贴板
  • <style>　
  • #div1{
  • 　　　　　　　　　　
  • 　　　　　　　　　　width:200px;
  • 　　　　　　　　　　height:250px;
  • 　　　　　　　　　　background:white;
  • 　　　　　　　　　
  • 　　　　　　　　　　padding:15px;
  • 　　　　　　　　　　text-align:center;
  • 　　　　　　
  • 　　　　　　　　　　-webkit-transform:rotate(-10deg);
  • 　　　　　　
  • 　　　　　　　　　　box-shadow:4px4px4px#666;
  • 　　　　　　　　　　float:left;
  • 　　　　　　　　　　}
  • </style>　　　　　　　
  • <BR>　　　　　　
  • <body><BR>　　　　　　　　　
  • <divid="div1">
  • <imgsrc="img/001V28Mwty6Fww02IiNad&690.jpg">
  • <p>灰色滤镜</p>
  • </div>
  • <BR>
  • </body>

    • 把白色的背景框写好之后，接下来就该到滤镜了

    首先来第一张，艺术的黑白色

    XML/HTML Code复制内容到剪贴板
  • #div1img{
  • width:100%;　　　　　　　
  • 　
  • -webkit-filter:grayscale(1);　　}

  • 第二张照片，额...老照片.

    XML/HTML Code复制内容到剪贴板
  • #div1img{
  • width:100%;
  • -webkit-filter:sepia(1);
  • }

    • 第三张照片，反色？我也不太清楚啥颜色

    XML/HTML Code复制内容到剪贴板
  • #div1img{
  • width:100%;
  • -webkit-filter:hue-rotate(200deg);
  • }

    • 第四张照片，仿佛罩了一层白雾

    XML/HTML Code复制内容到剪贴板
  • #div1img{
  • width:100%;
  • -webkit-filter:opacity(0.5);
  • }

    • 还有一张照片的效果图上没有，是模糊效果代码如下

    XML/HTML Code复制内容到剪贴板
  • #div4img{
  • width:100%;
  • -webkit-filter:opacity(0.5);
  • }

    • 好了，我的滤镜分享完毕，接下来美图去了

    以上这篇css3的过滤效果简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章