CSS3鼠标悬停3D图标菜单动画展开特效,可在线编辑修改预览
asfasd
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3鼠标悬停3D图标菜单动画展开特效</title>
<style>
body {
font-family: 'Raleway', sans-serif;
background-image: radial-gradient(circle at center, #899Dc4, #495D84);
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(ellipse atbottom,#1b2735, #090a0f);
font-weight: 300;
}
.all {
display: flex;
-webkit-perspective: 10px;
perspective: 10px;
-webkit-transform: perspective(300px) rotateX(20deg);
transform: perspective(300px) rotateX(20deg);
will-change: perspective;
-webkit-perspective-origin: center center;
perspective-origin: center center;
transition: all 1.3s ease-out;
justify-content: center;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.all:hover {
-webkit-perspective: 1000px;
perspective: 1000px;
transition: all 1.3s ease-in;
-webkit-transform: perspective(10000px) rotateX(0deg);
transform: perspective(10000px) rotateX(0deg);
}
.all:hover .text {
opacity: 1;
}
.all:hover > div {
opacity: 1;
transition-delay: 0s;
}
.all:hover .explainer {
opacity: 0;
}
.left, .center, .right, .lefter, .righter {
width: 200px;
height: 150px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
border-radius: 10px;
border: 1px solid #fff;
box-shadow: 0 0 20px 5px rgba(100, 100, 255, 0.4);
opacity: 0;
transiti...点击查看剩余70%
{{collectdata}}
网友评论0