css布局实现三维按钮旋转点击破碎动画效果代码
代码语言:html
所属分类:粒子
代码描述:css布局实现三维按钮旋转点击破碎动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@import url("https://fonts.googleapis.com/css2?family=Train+One&display=swap");
*, *::before, *::after {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
}
body {
background-color: #111;
color: #fff;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
perspective: 750px;
overflow: hidden;
}
input[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: fixed;
top: 1%;
left: 1%;
top: -100%;
left: -100%;
visibility: hidden;
}
.scene {
position: relative;
width: 400px;
height: 150px;
transform: translate(-50%, -50%);
transform-style: preserve-3d;
cursor: pointer;
-webkit-animation: sceneRotate 16s infinite ease-in-out;
animation: sceneRotate 16s infinite ease-in-out;
}
@-webkit-keyframes sceneRotate {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-180deg);
}
100% {
transform: rotateY(-360deg);
}
}
@keyframes sceneRotate {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-180deg);
}
100% {
transform: rotateY(-360deg);
}
}
.btn > div {
position: absolute;
width: 50px;
height: 50px;
overflow: hidden;
transition-property: transform, opacity;
}
.btn > div::after {
content: "Click me";
font-family: "Train One", cursive;
position: absolute;
width: 400px;
height: 150px;
font-size: 80px;
white-space: nowrap;
display: flex;
justify-content: center;
align-items: center;
}
.btn-a > div:nth-child(1), .btn-c > div:nth-child(1) {
top: 0px;
left: 0px;
}
.btn-b > div:nth-child(1), .btn-d > div:nth-child(1) {
top: 0px;
left: 350px;
}
.btn > div:nth-child(1)::after {
transform: translate(0px, 0px);
}
.btn-a > div:nth-child(9), .btn-c > div:nth-child(9) {
top: 50px;
left: 0px;
}
.btn-b > div:nth-child(9), .btn-d > div:nth-child(9) {
top: 50px;
left: 350px;
}
.btn > div:nth-child(9)::after {
transform: translate(0px, -50px);
}
.btn-a > div:nth-child(17), .btn-c > div:nth-child(17) {
top: 100px;
left: 0px;
}
.btn-b > div:nth-child(17), .btn-d > div:nth-child(17) {
top: 100px;
left: 350px;
}
.btn > div:nth-child(17)::after {
transform: translate(0px, -100px);
}
.btn-a > div:nth-child(2), .btn-c > div:nth-child(2) {
top: 0px;
left: 50px;
}
.btn-b > div:nth-child(2), .btn-d > div:nth-child(2) {
top: 0px;
left: 300px;
}
.btn > div:nth-child(2)::after {
transform: translate(-50px, 0px);
}
.btn-a > div:nth-child(10), .btn-c > div:nth-child(10) {
top: 50px;
left: 50px;
}
.btn-b > div:nth-child(10), .btn-d > div:nth-child(10) {
top: 50px;
left: 300px;
}
.btn > div:nth-child(10)::after {
transform: translate(-50px, -50px);
}
.btn-a > div:nth-child(18), .btn-c > div:nth-child(18) {
top: 100px;
left: 50px;
}
.btn-b > div:nth-child(18), .btn-d > div:nth-child(18) {
top: 100px;
left: 300px;
}
.btn > div:nth-child(18)::after {
transform: translate(-50px, -100px);
}
.btn-a > div:nth-child(3), .btn-c > div:nth-child(3) {
top: 0px;
left: 100px;
}
.btn-b > div:nth-child(3), .btn-d > div:nth-child(3) {
top: 0px;
left: 250px;
}
.btn > div:nth-child(3)::after {
transform: translate(-100px, 0px);
}
.btn-a > div:nth-child(11), .btn-c > div:nth-child(11) {
top: 50px;
left: 100px;
}
.btn-b > div:nth-child(11), .btn-d > div:nth-child(11) {
top: 50px;
left: 250px;
}
.btn > div:nth-child(11)::after {
transform: translate(-100px, -50px);
}
.btn-a > div:nth-child(19), .btn-c > div:nth-child(19) {
top: 100px;
left: 100px;
}
.btn-b > div:nth-child(19), .btn-d > div:nth-child(19) {
top: 100px;
left: 250px;
}
.btn > div:nth-child(19)::after {
transform: translate(-100px, -100px);
}
.btn-a > div:nth-child(4), .btn-c > div:nth-child(4) {
top: 0px;
left: 150px;
}
.btn-b > div:nth-child(4), .btn-d > div:nth-child(4) {
top: 0px;
left: 200px;
}
.btn > div:nth-child(4)::after {
transform: translate(-150px, 0px);
}
.btn-a > div:nth-child(12), .btn-c > div:nth-child(12) {
top: 50px;
left: 150px;
}
.btn-b > div:nth-child(12), .btn-d > div:nth-child(12) {
top: 50px;
left: 200px;
}
.btn > div:nth-child(12)::after {
transform: translate(-150px, -50px);
}
.btn-a > div:nth-child(20), .btn-c > div:nth-child(20) {
top: 100px;
left: 150px;
}
.btn-b > div:nth-child(20), .btn-d > div:nth-child(20) {
top: 100px;
left: 200px;
}
.btn > div:nth-child(20)::after {
transform: translate(-150px, -100px);
}
.btn-a > div:nth-child(5), .btn-c > div:nth-child(5) {
top: 0px;
left: 200px;
}
.btn-b > div:nth-child(5), .btn-d > div:nth-child(5) {
top: 0px;
left: 150px;
}
.btn > div:nth-child(5)::after {
trans.........完整代码请登录后点击上方下载按钮下载查看
网友评论0