给网页添加魔方选择效果
可以编辑图片，也可以文字，只需要css和html就可以实现，代码就在下面，大家拿走点个赞
这是css
* {
padding: 0;
margin: 0;
}
.xf_box {
perspective: 500px;
position: absolute;
right: 10%;
bottom: 0;
}
.xf_box .xf_rubik_cube {
position: relative;
width: 100px;
height: 100px;
margin: 200px auto;
text-align: center;
transform-style: preserve-3d;
animation: lovexf 15s linear infinite;
}
@keyframes lovexf {
0% {
transform: rotateX(0);
}
25% {
transform: rotate3d(1, 1, 0, 230deg);
}
50% {
transform: rotate3d(-1, 1, 0, 220deg);
}
75% {
transform: rotate3d(1, -1, 0, 200deg);
}
100% {
transform: rotateX(180deg);
}
}
.xf_box .xf_rubik_cube:hover {
animation-play-state: paused;
}
.xf_box .xf_rubik_cube .handsome_xf {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
line-height: 100px;
color: white;
text-decoration: none;
font-size: .7em;
transition: font-size .5s;
overflow: hidden;
}
.xf_box .xf_rubik_cube .handsome_xf:hover {
font-size: 1em;
}
.xf_box .xf_rubik_cube .handsome_xf:nth-child(1) {
transform: rotateY(0) translateZ(50px);
background-color: deeppink;
}
.xf_box .xf_rubik_cube .handsome_xf:nth-child(2) {
transform: rotateY(90deg) translateZ(50px);
background-color: dodgerblue;
}
.xf_box .xf_rubik_cube .handsome_xf:nth-child(3) {
transform: rotateY(180deg) translateZ(50px);
background-color: darkorange;
}
.xf_box .xf_rubik_cube .handsome_xf:nth-child(4) {
transform: rotateY(270deg) translateZ(50px);
background-color: darkgreen;
}
.xf_box .xf_rubik_cube .handsome_xf:nth-child(5) {
transform: rotateX(90deg) translateZ(50px);
background-color: lightsalmon;
}
.xf_box .xf_rubik_cube .handsome_xf:nth-child(6) {
transform: rotateX(-90deg) translateZ(50px);
background-color: blueviolet;
}
.xf_box .xf_rubik_cube .handsome_xf img {
width: 100%;
height: 100%;
}
这是html，改图片，文字都行
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>魔方旋转效果</title> <link rel="shortcut icon" href="〖放图标〗/favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="rcb.css"> </head> <body> <!-- 文字区 --> <div class="xf_box"> <div class="xf_rubik_cube"> <a class="handsome_xf" href="#!">小枫好帅</a> <a class="handsome_xf" href="#!">我也这么认为</a> <a class="handsome_xf" href="#!">他真的好帅</a> <a class="handsome_xf" href="#!">我爱si他了</a> <a class="handsome_xf" href="#!">想给他生猴子</a> <a class="handsome_xf" href="#!">mua~枫！</a> </div> </div> <!-- 图片区 在img里面替换图片即可 不用的话就注释起来 --> <!-- <div class="xf_box"> <div class="xf_rubik_cube"> <a class="handsome_xf" href="#!"><img src="〖放图片链接〗" alt=""></a> <a class="handsome_xf" href="#!"><img src="〖放图片链接〗" alt=""></a> <a class="handsome_xf" href="#!"><img src="〖放图片链接〗" alt=""></a> <a class="handsome_xf" href="#!"><img src="〖放图片链接〗" alt=""></a> <a class="handsome_xf" href="#!"><img src="〖放图片链接〗" alt=""></a> <a class="handsome_xf" href="#!"><img src="〖放图片链接〗" alt=""></a> </div> </div> --> </body> </html>
拿走点个赞谢谢！！！也可以赞助会员，还有更多好玩的源码等你来
