html怎么设置翻转滤镜,CSS滤镜实现的颜色渐变翻转效果

一下是利用CSS滤镜效果实现渐变翻转的代码，有需要的朋友可以参考下。

代码如下:

Document

.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;

transition-property:width,height,transform,background,font-size,opacity;

transition-duration:1s,1s,1s,1s,1s,1s;

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;

}

转着好玩

CSS中transform: rotate(360deg);旋转，默认顺时针旋转参数为度数例如：360deg

transition-property:过滤，后面接需要过滤的属性例如：width,height,transform,background,font-size,

transition-duration:后面接相应过滤属性的执行时间。

opacity：规定不透明度。从 0.0 (完全透明)到  1.0(完全不透明)。

html怎么设置翻转滤镜,CSS滤镜实现的颜色渐变翻转效果相关推荐

CSS和JS两种颜色渐变文字效果代码
js实现颜色渐变文字效果代码:  <div id="moml"> <div style="text-al ...
html图片加波浪滤镜,CSS滤镜wave属性(波形滤镜)
[实例介绍] CSS滤镜wave属性(波形滤镜) wave滤镜用来把对象按照垂直的波纹样式打乱.waVe的表达式还是比较复杂的,它一共有5个参数. [基本语法] filter:wave(add=参数值 ...
css中用wave滤镜,CSS滤镜
本词条缺少概述图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! 滤镜主要是用来实现图像的各种特殊效果.它在Photoshop中具有非常神奇的作用.所以有的Photoshop都按分类放置在菜单 ...
html图片滤镜,CSS滤镜(Filters)
滤镜(Filters)是CSS3里新增的一种神奇的功能.说起滤镜(filter)效果,经常使用PhotoShop的人应该非常清楚,每张用Photoshop制作出来的图片几乎都使用了滤镜进行美化.而CS ...
html怎么设置页面半透明,css怎么将背景颜色设置成半透明
css怎么将背景颜色设置成半透明发布时间:2020-06-24 13:17:07 来源:亿速云阅读:540 作者:Leah 这篇文章运用简单易懂的例子给大家介绍css怎么将背景颜色设置成半透明,代 ...
fillstyle属性_html设置或返回用于填充绘画的颜色渐变或模式的属性fillStyle
实例定义用蓝色填充的矩形: JavaScript:var c=document.getElementById("myCanvas"); var ctx=c.getContext( ...
css表格样式、颜色渐变、计数器
表格样式之合并单元格边框: 方法一: table设置为border-collapse: collapse;效果不好,有的边框粗,有的边框细. <table class="table1& ...
css 实现简单的镂空渐变文字效果
css 实现简单的镂空渐变文字 html: <body><div class="box">hello</div> </body> c ...
css背景从左到右颜色渐变,CSS：linear-gradient()背景颜色渐变
background: linear-gradient(direction,color-stop1,color-stop2,...); direction:用角度值指定渐变的方向(或角度): colo ...

html怎么设置翻转滤镜,CSS滤镜实现的颜色渐变翻转效果

html怎么设置翻转滤镜,CSS滤镜实现的颜色渐变翻转效果相关推荐

最新文章

热门文章