1.渐变按钮：
html:
<body>
<button class="complex-button-3">点击我</button>
</body>
css:
.complex-button-3 {
display: block;
padding: 15px 10px;
width: 100px;
height: 50px;
border: 3px solid rebeccapurple;
border-radius: 10px;
color: #ffffff;
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: #ef5000;
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="images/14c13ae01197579abf710190ebf5687.jpg" alt="">
<img src="images/6ac56bf089337837498d5bdebd3edeb.jpg" alt="">
<img src="images/709c30fe75ea11b2136f3ed4d08ccf9.jpg" alt="">
<img src="images/868f279fa7f39bea90d10688d62d242.jpg" alt="">
<img src="images/9bc53d28cbf20f4b622791702cefb78.jpg" alt="">
<img src="images/cf20f09732e9326a3f674350cc9e60f.jpg" alt="">
</div>
</body>
css:
body{
perspective: 1500px;
background-color: aqua;
}
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(48, 178, 187);
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);
}
运行结果：
5992
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
