css 3d

最新推荐文章于 2024-08-29 14:32:34 发布

九

最新推荐文章于 2024-08-29 14:32:34 发布

阅读量355

点赞数

分类专栏： html css 文章标签： css html

本文链接：https://blog.csdn.net/qq_31301099/article/details/51647592

版权

css 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../Public/css/main.css"/>
</head>
<body>
<div class='assembly'>
    <div class='bar'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='bar'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='bar'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='bar'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='bar'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
</div>
</body>
</html>

css:

body {
    overflow: hidden;
    margin: 0;
    height: 100vh;
    perspective: 65em;
    perspective-origin: 50% calc(50% - 25em);
    background: #000;
}
div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
}
.assembly {
    transform: rotateY(50deg) translate3d(0, -10em, 5em);
    animation: move 8s linear infinite;
}
@keyframes move {
    to {
        transform: rotateY(-30deg) translate3d(0, 5em, 0);
    }
}
.bar {
    transform-origin: 0 2.5em 0;
    animation: grow 8s cubic-bezier(0.19, 1, 0.23, 1) infinite;
}
.bar:nth-child(1) {
    margin-left: -15em;
    transform: scaleY(1);
    color: #7ed6be;
}
.bar:nth-child(2) {
    margin-left: -7.5em;
    transform: scaleY(2);
    color: #ecf081;
}
.bar:nth-child(3) {
    margin-left: 0em;
    transform: scaleY(2.3);
    color: #ffbe40;
}
.bar:nth-child(4) {
    margin-left: 7.5em;
    transform: scaleY(2.5);
    color: #ef746f;
}
.bar:nth-child(5) {
    margin-left: 15em;
    transform: scaleY(2.9);
    color: #bc8696;
}
@keyframes grow {
    0% {
        transform: scaleY(0);
    }
}
.face {
    margin: -2.5em;
    width: 5em;
    height: 5em;
    backface-visibility: hidden; /*隐藏被旋转的 div 元素的背面*/
    background: currentColor;
}
.face:nth-child(n + 2):after {
    position: absolute;
    top: 100%;
    left: 0;
    width: inherit; /*inherit是继承父类的属性，一般用于字体、颜色、背景等*/
    height: inherit;
    opacity: .1;
    background: inherit;
    content: '';
}
.face:nth-child(1) {
    transform: rotate3d(1, 0, 0, 90deg) translateZ(2.5em);
    -webkit-filter: brightness(0.7);
    filter: brightness(0.7);
}
.face:nth-child(2) {
    transform: rotate3d(0, 1, 0, -90deg) translateZ(2.5em);
    -webkit-filter: brightness(1);
    filter: brightness(1);
}
.face:nth-child(3) {
    transform: rotate3d(0, 1, 0, 0deg) translateZ(2.5em);
    -webkit-filter: brightness(0.85);
    filter: brightness(0.85);
}
.face:nth-child(4) {
    transform: rotate3d(0, 1, 0, 90deg) translateZ(2.5em);
    -webkit-filter: brightness(0.55);
    filter: brightness(0.55);
}

/*Filters
其默认值是none，他不具备继承性，其中filter-function一个具有以下值可选：

grayscale灰度
sepia褐色（求专业指点翻译）
saturate饱和度
hue-rotate色相旋转
invert反色
opacity透明度
brightness亮度
contrast对比度
blur模糊
drop-shadow阴影*/

九

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 3d

html:html>lang="en"> charset="UTF-8"> rel="stylesheet" type="text/css" href="../Public/css/main.css"/>class='assembly'> class='bar'> class='face'> class='face
复制链接

扫一扫

专栏目录