今天小编跟大家讲解下有关CSS滤镜实现的颜色渐变翻转效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS滤镜实现的颜色渐变翻转效果 的相关资料，希望小伙伴们看了有所帮助。
一下是利用CSS滤镜效果实现渐变翻转的代码 有需要的朋友可以参考下。
复制代码代码如下:<span style="font-size:14px;"><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>document</title> <style type="text/css"media="screen"> .ddf{ margin: 0 auto; width:150px; height:125px; background:#92B901; color:#ffffff; font-weight:bold; font:12px '微软雅黑', Verdana, Arial, Helvetica, sans-serif; padding:20px 10px 0px 10px; -moz-transition-property:width,height,-o-transform,background,font-size,opacity; -moz-transition-duration:1s,1s,1s,1s,1s,1s; <span style="color:#FF0000;">transition-property:width,height,transform,background,font-size,opacity;</span> <span style="color:#FF0000;">transition-duration:1s,1s,1s,1s,1s,1s</span>; border-radius:5px; opacity:0.4; } .ddf:hover{ -moz-transform: rotate(360deg); transform: rotate(360deg); opacity:1; background:#1ec7e6; width:90px; height:60px; font-size:16px; } </style></head><body> <div class="ddf">转着好玩</div></body></html>CSS中transform: rotate(<span style="color:#FF0000;">360deg</span>);旋转 默认顺时针旋转参数为度数例如：360deg</span><pre name="code"class="html"><span style="font-size:14px;">transition-property:过滤 后面接需要过滤的属性例如：</span><span style="font-size:14px;">width,height,transform,background,font-size,</span><span style="font-size:14px;"></span><span style="font-size:14px;">transition-duration:后面接相应过滤属性的执行时间。</span><span style="font-size:14px;"></span><pre name="code"class="html"><span style="font-size:14px;"></span><pre name="code"class="html"><span style="font-size:14px;"></span><pre name="code"class="html"><span style="font-size:14px;"></span><pre name="code"class="html"><span style="font-size:14px;"></span><pre name="code"class="html"><span style="font-size:14px;">opacity：</span>规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
来源：爱蒂网
