div+css实现三维数字骰子悬浮转动动画效果代码-html代码-BFW代码库

div+css实现三维数字骰子悬浮转动动画效果代码

代码语言：html

所属分类：悬停

代码描述：div+css实现三维数字骰子悬浮转动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Quicksand:wght@700&amp;display=swap'>
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;900&display=swap");
html {
	background-color: #f9f6ef;
}
*,
*:before,
*:after {
	box-sizing: border-box;
	font-family: "Poppins", sans-serif;
}
body,
.container {
	margin: 0;
	padding: 0;
}
.container {
	border: 15px solid #ebebe3;
	min-height: 100vh;
	display: grid;
	place-items: center;
	align-content: center;
	perspective: 3000px;
}

@keyframes random-rotate {
	0% {
		transform: rotate3d(1, 1, 1, 0deg);
	}
	15% {
		transform: rotate3d(1, 1, 1, 90deg);
	}
	30% {
		transform: rotate3d(1, 1, 1, 135deg);
	}
	45% {
		transform: rotate3d(1, 1, 1, 180deg);
	}
	60% {
		transform: rotate3d(1, 1, 1, 225deg);
	}
	75% {
		transform: rotate3d(1, 1, 1, 270deg);
	}
	90% {
		transform: rotate3d(1, 1, 1, 315deg);
	}
	100% {
		transform: rotate3d(1, 1, 1, 360deg);
	}
}
h1 {
	text-align: center;
	font-weight: 100;
	font-size: clamp(3rem, 10vw, 6rem);
	margin: 0;
	padding: 0;
}
.box:hover {
	animation-play-state: running;
}
.box {
	animation: random-rotate 3s linear infinite;
	animation-play-state: paused;
}
.box {
	position: relative;
	width: 10em;
	aspect-ratio: 1 / 1;
	transition: transform 1s ease;
	transform-style: preserve-3d;
}
.box > *,
.box > *:before,
.box > *:after {
	font-weight: 900;
	transform-style: preserve-3d;
	border-radius: 5px;
	box-shadow: inset 0px 0px 3px #fff7, inset 0px 0px 5px #0007,
		inset 1px 1px 0.5em #0005;
	text-shadow: 2px 2px 2px #fff9, -1px -1px 1px #0009;
}
.box-1,
.box-2 {
	position: absolute;
	inset: 0;
	background-color: #f3d060;
	color: #1f2020;
.........完整代码请登录后点击上方下载按钮下载查看