css3的过虑实际效果简易案例

日期:2020-10-17 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

上面的照片便是css3新特点的滤镜实际效果,学会了这些那末大家这群追求美丽爱帅的大web是否便可以完善的用编码完成相片清理了捏~~

好,我们先把相片后边的白框完成,

XML/HTML Code拷贝內容到剪贴板
  1. <style>     
  2. #div1{   
  3.   
  4.           /*给div界定宽高和色调*/   
  5.   
  6.   
  7.           width: 200px;   
  8.           height: 250px;   
  9.           background: white;    
  10.   
  11.          /* 内填充间距相片为15px ,文本垂直居中*/   
  12.           padding: 15px;   
  13.   
  14.           text-align: center;   
  15.   
  16.       /*  把白色情况转动⑴0deg  */   
  17.   
  18.           -webkit-transform: rotate(⑴0deg);   
  19.   
  20.       /*给情况1个黑影的实际效果*/   
  21.           box-shadow: 4px 4px 4px #666;   
  22.           float: left;   
  23.           }   
  24.   
  25.     
  26.   
  27. </style>          
  28. <BR>         
  29. <body><BR>            
  30. <div id="div1">    
  31. <img src="img/001V28Mwty6Fww02IiNad&690.jpg">    
  32. <p>灰色滤镜</p>    
  33. </div>  
  34. <BR>  
  35. </body>   

把白色的情况框写好以后,接下来就该到滤镜了

最先来第1张,造型艺术的黑与白色

XML/HTML Code拷贝內容到剪贴板
  1. #div1 img{   
  2.   
  3. /*把div1里边的照片百分百,等同于于相对在div1里边百分比变大填充*/   
  4. width: 100%;          
  5. /*把照片变为黑与白色括号里跟色调转变的值,只能取0~1之间*/    
  6. -webkit-filter: grayscale(1);   }   
  7.   

第2张相片,额...老相片.

XML/HTML Code拷贝內容到剪贴板
  1. #div1 img{   
  2.             width: 100%;   
  3.             -webkit-filter: sepia(1);   
  4.         }  

第3张相片,反色?我也不太清晰啥色调

XML/HTML Code拷贝內容到剪贴板
  1. #div1 img{   
  2.             width: 100%;   
  3.             -webkit-filter: hue-rotate(200deg);   
  4.         }  

第4张相片,好像罩了1层白雾

XML/HTML Code拷贝內容到剪贴板
  1. #div1 img{   
  2.             width: 100%;   
  3.             -webkit-filter: opacity(0.5);   
  4.         }   

也有1张相片的实际效果图上沒有,是模糊不清实际效果编码以下

XML/HTML Code拷贝內容到剪贴板
  1. #div4 img{   
  2.             width: 100%;   
  3.             -webkit-filter: opacity(0.5);   
  4.         }  

好了,我的滤镜共享结束,接下来美图去了

以上这篇css3的过虑实际效果简易案例便是网编共享给大伙儿的所有內容了,期待能给大伙儿1个参照,也期待大伙儿多多适用脚本制作之家。