CSS滤镜实现的颜色渐变翻转效果
CSS滤镜实现的颜色渐变翻转效果
发布时间:2016-12-27 来源:查字典编辑
摘要:一下是利用CSS滤镜效果实现渐变翻转的代码,有需要的朋友可以参考下。Document.ddf{margin:0auto;width:150p...

一下是利用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(完全不透明)。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类