CSS滤镜效果实现渐变翻转

最新推荐文章于 2024-09-18 09:47:26 发布

置顶 miveboy

最新推荐文章于 2024-09-18 09:47:26 发布

阅读量509

点赞数

分类专栏： css boder HTML 文章标签： css html border transform rotate transition-property

本文链接：https://blog.csdn.net/lm2813793139/article/details/39697741

版权

HTML 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

boder

2 篇文章 0 订阅

订阅专栏

<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（完全不透明）。