渐变
颜色渐变，旋转，变形，缩放
<!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>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
