css+div实现三维魔方旋转动画效果代码
代码语言:html
所属分类:三维
代码描述:css+div实现三维魔方旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
overflow: hidden;
background-color: #f7ede2;
}
body * {
position: absolute;
transform-style: preserve-3d;
}
body *::before, body *::after {
position: absolute;
content: '';
}
.scene {
top: 50%; left: 50%;
width: 1px; height: 1px;
transform: rotateX(54.7deg) rotateZ(-45deg);
--animation: 4s linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0