当前位置：网站首页>渐变

渐变

2022-06-26 02:49:00 【小菜鸟码住】

渐变
颜色渐变，旋转，变形，缩放

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.*{
				margin: 0;
				padding: 0;
			}
			.div1{
				
				width: 300px;
				height: 300px;
				margin: 200px;
				/*border: 2px solid red;*/
				background:linear-gradient(45deg,#fff 20px,red 20px,green 20px);
				/*background: repeating-linear-gradient(red,yellow 10%,green 20%);*/
			}
			@keyframes mymove{
				0%{
					left: 0;
					top: 0;
					}
				50%{
					left: 300px;
					top: 0;
					}
				100%{
					left: 300px;
					/*top: 300px;*/
					}
			}
				.div2{
				position:relative;
				top:0;
				left: 0;
				width: 800px;
				height: 300px;
				background: url(img/img/img/img0.gif);
				animation: mymove 1s;
				transform: translate(-1%,-10%);
				border: 2px solid red;
				background: linear-gradient(to bottom left,red,yellow,green);
				background: radial-gradient(50% 50%,red 0%,yellow 20%,green 80%,yellow);
			}
			
			.div3{
				width: 300px;
				height: 300px;
				position: absolute;
				top: 50%;
				left: 50%;
				margin: -20px 100px 10px -10px;
				border: 2px solid red;
				background: linear-gradient(to bottom left,red 20%,yellow 40%,green);
				
			}
			.div4{
				width: 300px;
				height: 300px;
				border: 2px solid red;
				margin: 0 auto;
				background: linear-gradient(60deg,red,yellow,green);
				/*background:repeating-linear-gradient(to bottom right,green 10%,blue 20%);*/
			}
			.box button{
				width: 70px;
				height:30px ;
			     float: right;
			     transform: skew(50deg);
				/*border: 1px solid blue;*/  
				background: linear-gradient(45deg,blue,orange,green); 
			}
			.div4:hover{
				transform:rotateX(60deg);
			}
			 .suo:hover img{
			 	width: 450px;
				height: 280px;
				border: 1px solid yellow;
				margin: 0 auto;
				transform: scale(1.2,1.2);
			 }
			.div1:hover img{
				transform: scale(1.5,1.5);
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<img src="img/musicBtn.png"/>
		</div>
		<div class="box"><button>按钮</button></div>
		<div class="div2"></div>
		<div class="div3"></div>
		<div class="div4"></div>
		<div class="suo">
			<img src="img/news.jpg"/>
		</div>
		<!--<script>
			//获取节点
			var div2 = Document.getElementById('div2');
			var img  = div2.children[0];
			//绑定划入事件
			
		</script>-->
	</body>
</html>
原网站

版权声明
本文为[小菜鸟码住]所创，转载请带上原文链接，感谢
https://blog.csdn.net/hfyldx/article/details/102233713

边栏推荐

猜你喜欢

随机推荐