CSS快乐星球

我不是费圆

发布于 2020-12-17 11:14:01

4550

发布于 2020-12-17 11:14:01

文章被收录于专栏：鲸鱼动画

在CSS交流网站上看到了这个效果，在赞叹别人伟大的同时自己也想动手试一试，的确是一个十分花哨的效果，主要考察的是 transform 的运用。让我们一起来揭秘它吧！

当我写到一半的时候，问题也就随之而来了。我的大盒子在每一次旋转之后会闪烁一次，拉低了整体效果。我在百度上找到了这样一则信息，感谢提供此信息的博友。原文链接大意是说：父元素的transform-style: preserve-3d;子元素并未继承，当子元素被添加进去时，父元素就会强制闪烁一次，这样4个子元素绕一周，父元素转一圈会闪烁4次。

gif 看不真切，大家可以把代码考下去测试一下，或者直接拉到文章底部，把我调试好的代码拿走，感谢浏览！

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>球球</title>
	<style>
	*{margin: 0;
	padding: 0;}
	html,body{
		width: 100vw;
		height: 100vh;
	}
	body{
		display: -ms-flexbox;
		display: flex;
		-ms-flex-pack: center;
		justify-content: center;
		-ms-flex-align: center;
		align-items: center;
		background: url(http://5b0988e595225.cdn.sohucs.com/images/20181219/f00e5f8f4b3d43f0bf97a3e0ca289080.jpeg) repeat center;
	}
	@keyframes rotate {
    100% {transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);}
  }
	.container {
		width: 10em;
		height: 10em;
    transform-style: preserve-3d;
    animation: rotate 12s infinite linear;
	}
	.cube {
    position: absolute;
    width: 10em;
    height: 10em;
    transform-style: preserve-3d;
  }
  .cube--2 {
    transform: rotateX(45deg) rotateY(45deg);
  }
  .cube--3 {
    transform: rotateX(45deg) rotateZ(45deg);
  }
  .side {
    position: absolute;
    width: 10em;
    height: 10em;
    border: 2px dotted rgba(255, 213, 0, 0.35);
    border-radius: 50%;
    transform-style: preserve-3d;
    transform: rotateY(180deg);
  }
  .side::before, .side::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    box-sizing: border-box;
    border-radius: inherit;
    border: 1px solid;
    box-shadow: inset 0 0 2em, 0 0 2em;
  }
  .side::before {
    width: 2.5em;
    height: 2.5em;
    color: gold;
  }
  .side::after {
    width: 1.5em;
    height: 1.5em;
    transform: translateZ(-2em);
    box-shadow: inset 0 0 1em, 0 0 1em;
    color: teal;
  }
  .side--back {
    transform: translateZ(-5em) rotateY(180deg);
  }
  .side--left {
    transform: translateX(-5em) rotateY(-90deg);
  }
  .side--right {
    transform: translateX(5em) rotateY(90deg);
  }
  .side--top {
    transform: translateY(-5em) rotateX(90deg);
  }
  .side--bottom {
    transform: translateY(5em) rotateX(-90deg);
  }
  .side--front {
    transform: translateZ(5em);
  }
	</style>
</head>
<body>
	<div class="container">
		<div class="cube cube--1">
        <div class="side side--back"></div>
        <div class="side side--left"></div>
        <div class="side side--right"></div>
        <div class="side side--top"></div>
        <div class="side side--bottom"></div>
        <div class="side side--front"></div>
    </div>
	</div>
</body>
</html>

虽然效果不佳，但就此收手的话一定非常惋惜，我抱着玩一玩的心态把它进行到了最后一刻，随着我数量的添加，bug 开始不那么明显了。虽然不是一个正规途径，但却十分有效，即达到了预期效果，又没有冗余的代码，只是：问题的解决方案依旧是个谜题，希望有高深造诣的博友能给我解决措施，我也会一直寻找答案，祝福你我！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>球球</title>
<style>
	html,body{
		height: 100%;
	}
	body{
		display: -ms-flexbox;
		display: flex;
		-ms-flex-pack: center;
		justify-content: center;
		-ms-flex-align: center;
		align-items: center;
		background: url(http://5b0988e595225.cdn.sohucs.com/images/20181219/f00e5f8f4b3d43f0bf97a3e0ca289080.jpeg) repeat center;
	}
	.container {
		width: 10em;
		height: 10em;
		transform-style: preserve-3d;
		animation: rotate 10s infinite linear;
	}

	.cube {
		position: absolute;
		width: 10em;
		height: 10em;
		transform-style: preserve-3d;
	}
	.cube--2 {
		transform: rotateX(45deg) rotateY(45deg);
	}
	.cube--3 {
		transform: rotateX(45deg) rotateZ(45deg);
	}
	.side {
		position: absolute;
		width: 10em;
		height: 10em;
		border: 2px dotted rgba(255, 213, 0, 0.35);
		border-radius: 50%;
		transform-style: preserve-3d;
		transform: rotateY(180deg);
	}
	.side::before, .side::after {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto;
		box-sizing: border-box;
		border-radius: inherit;
		border: 1px solid;
		box-shadow: inset 0 0 2em, 0 0 2em;
	}
	.side::before {
		width: 2.5em;
		height: 2.5em;
		color: gold;
	}
	.side::after {
		width: 1.5em;
		height: 1.5em;
		transform: translateZ(-2em);
		box-shadow: inset 0 0 1em, 0 0 1em;
		color: teal;
	}
	.side--back {
		transform: translateZ(-5em) rotateY(180deg);
	}
	.side--left {
		transform: translateX(-5em) rotateY(-90deg);
	}
	.side--right {
		transform: translateX(5em) rotateY(90deg);
	}
	.side--top {
		transform: translateY(-5em) rotateX(90deg);
	}
	.side--bottom {
		transform: translateY(5em) rotateX(-90deg);
	}
	.side--front {
		transform: translateZ(5em);
	}
	.side__inner {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		width: 5em;
		height: 5em;
		margin: auto;
		border-radius: inherit;
		border: 1px solid;
		box-shadow: inset 0 0 2em;
		color: orangered;
		transform: translateZ(2em);
		transform-style: preserve-3d;
	}
	.side__inner::before, .side__inner::after {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto;
		box-sizing: border-box;
		border-radius: inherit;
		border: 1px solid;
		box-shadow: inset 0 0 2em, 0 0 2em;
	}
	.side__inner::before {
		width: 2.5em;
		height: 2.5em;
		transform: translateZ(2em);
		color: crimson;
	}
	.side__inner::after {
		width: 1.5em;
		height: 1.5em;
		transform: translateZ(4em);
		color: purple;
	}
	@keyframes rotate {
	  100% {transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);}
	}
</style>
</head>
<body>
<div class="container">
    <div class="cube cube--1">
        <div class="side side--back">
            <div class="side__inner"></div>
        </div>
        <div class="side side--left">
            <div class="side__inner"></div>
        </div>
        <div class="side side--right">
            <div class="side__inner"></div>
        </div>
        <div class="side side--top">
            <div class="side__inner"></div>
        </div>
        <div class="side side--bottom">
            <div class="side__inner"></div>
        </div>
        <div class="side side--front">
            <div class="side__inner"></div>
        </div>
    </div>
    
    <div class="cube cube--2">
        <div class="side side--back">
            <div class="side__inner"></div>
        </div>
        <div class="side side--left">
            <div class="side__inner"></div>
        </div>
        <div class="side side--right">
            <div class="side__inner"></div>
        </div>
        <div class="side side--top">
            <div class="side__inner"></div>
        </div>
        <div class="side side--bottom">
            <div class="side__inner"></div>
        </div>
        <div class="side side--front">
            <div class="side__inner"></div>
        </div>
    </div>
    
    <div class="cube cube--3">
        <div class="side side--back">
            <div class="side__inner"></div>
        </div>
        <div class="side side--left">
            <div class="side__inner"></div>
        </div>
        <div class="side side--right">
            <div class="side__inner"></div>
        </div>
        <div class="side side--top">
            <div class="side__inner"></div>
        </div>
        <div class="side side--bottom">
            <div class="side__inner"></div>
        </div>
        <div class="side side--front">
            <div class="side__inner"></div>
        </div>
    </div>
</div>
</body>
</html>

可以看到效果被稍稍改善了一些，但细心的话仍可以看出缺憾，剩下的完善就留给你们吧！自学也是人生的一门必修课，如果你愿你跟我分享你的正确答案，我会洗耳恭听，并追寻你的脚步，向你看齐。

前端的学习不是一蹴而就，不积跬步无以至千里，不积小流无以成江海。持续不断的努力才能让你我有所收获，专业的知识还得到机构去学习，培训机构的设立有其存在的必然性，你钱花对了吗？

不辜负每一份真情，不嘲笑每一个正在努力的人，力所能及的对别人施以援手，每天都要强化自己，洗去铅华才能绽放光芒。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/10/13 ，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

0 条评论

热度

CSS快乐星球

CSS快乐星球

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐