1.渐变按钮
html:
<html>
<link rel="stylesheet" href="1.css" />
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<button class="complex-button-3">点击我</button>
</body>
</html>
css：
.complex-button-3 {
display: block;
padding: 15px 10px;
width: 100px;
height: 50px;
border: 3px solid rebeccapurple;
border-radius: 10px;
color: #000;
text-align: center;
text-decoration: none;
background-color: #e69729;
font-size: 20px;
transition: background-color 3s, color 1s;
cursor: pointer;
box-shadow: 2px 2px 5px rebeccapurple,
-2px 2px 5px rebeccapurple,
2px -2px 5px rebeccapurple,
-2px -2px 5px rebeccapurple;
}
.complex-button-3:hover {
background-color: aquamarine;
box-shadow: none;
color: #ffffff;
width: 130px;
height: 100px;
}
.complex-button-3:active {
background-color: #e69729;
color: #ffffff;
transform: translateY(4px);
}
运行结果：
2.立体相册
html：
<body>
<h1>我的假期生活</h1>
<div class="container">
<img src="img/微信图片_1.jpg" alt="">
<img src="img/微信图片_2.jpg" alt="">
<img src="img/微信图片_3.jpg" alt="">
<img src="img/微信图片_1.jpg" alt="">
<img src="img/微信图片_2.jpg" alt="">
<img src="img/微信图片_3.jpg" alt="">
</div>
</body>
css：
body{
perspective: 150px;
background-color: orange;
}
h1{
text-align: center;
font-family: "宋体";
}
@keyframes myAnimation {
from{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
to{
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
.container{
margin:200px;
position: relative;
transform-style: preserve-3d;
animation:myAnimation 10s linear 0s infinite;
animation-name: myAnimation;
animation-duration: 10s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
}
.container:hover{
transform: rotateX(60deg) rotatey(60deg) rotateZ(60deg);
}
.container:hover>img:first-child{
left: -300px;
}
.container:hover>img:nth-child(2){
top: -300px;
}
.container:hover>img:nth-child(3){
left: 300px;
}
.container:hover>img:nth-child(4){
top: 300px;
}
.container:hover>img:nth-child(6){
transform: translateZ(300px);
}
.container:hover>img:nth-child(5){
transform: translateZ(-100px);
}
.container>img{
width: 200px;
height: 200px;
position: absolute;
border: 2px solid rgb(170, 255, 0);
transition: 3s;
}
.container>img:first-child{
left: -200px;
transform-origin: right;
transform: rotateY(90deg);
}
.container>img:nth-child(2){
top:-200px;
transform-origin: bottom;
transform:rotateX(-90deg);
}
.container>img:nth-child(3){
left: 200px;
transform-origin: left;
transform:rotateY(-90deg)
}
.container>img:nth-child(4){
top: 200px;
transform-origin: top;
transform: rotateX(90deg);
}
.container>img:nth-child(6){
transform: translateZ(200px);
}
运行结果：
扫一扫
859
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
