| 标题 | CSS滤镜实现的颜色渐变翻转效果 |
| 范文 | 一下是利用CSS滤镜效果实现渐变翻转的代码，有需要的朋友可以参考下。 代码如下: <span><!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>transition-property:width,height,transform,background,font-size,opacity;</span> <span>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>转着好玩</div> </body> </html> CSS中transform: rotate(<span>360deg</span>);旋转，默认顺时针旋转参数为度数例如：360deg </span><pre name="code"><span>transition-property:过滤，后面接需要过滤的属性例如：</span><span>width,height,transform,background,font-size,</span><span></span> <span>transition-duration:后面接相应过滤属性的执行时间。</span><span></span><pre name="code"><span></span><pre name="code"><span></span><pre name="code"><span></span><pre name="code"><span></span><pre name="code"><span>opacity：</span>规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。 |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。