经过品牌升级,转转推出了一个焕然一新的Logo。今天,我们将借助纯CSS绘制转转的新Logo,以此来挑战CSS的极限。这里仅使用一个标签,尽可能发挥CSS的功力来实现Logo的绘制与动画效果。
新Logo保留了旧Logo中转转熊的轮廓,两个熊耳朵象征着围绕熊头旋转的两个卫星,寓意着“循环”。中间倾斜的转转首字母“Z”,既像是二手质检的印章,又象征着全新的二手生活方式。
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/00038a8c-1bf2-4613-b0a4-a3610701d731.jpg)
以上是我们要还原的Logo动图,主要有gif和lottie SVG两种形式。由于我们的目标是使用单标签来实现所有功能,因此我们对一些细节进行了一些取舍。虽然这并不代表CSS在成本和效果上是最优选择,但它展示了CSS的强大能力。接下来,分析我们需要实现的核心功能点:
- 开始动画时中心的大圆以及2个围绕的小圆都会有放大的效果
- 动画进行时,2个小圆围绕中心的椭圆旋转
- 字母 Z 由大变小,覆盖在中心的椭圆之上
- 字母 Z 出现时,中心的椭圆由红色边框圆变成实心红色圆
- 仔细观察字母 Z,可以发现它并不是普通的字符
基于上述分析,接下来开始核心的代码拆解与实现。在开始之前,我们先定义一些变量以便后续使用:
:root {
/* 主题色 */
--mainColor: #ff483c;
/* 字体颜色 */
--fontColor: #fff;
/* 字体宽度 */
--zWidth: 260px;
/* 中心椭圆宽高比 */
--parentScaleY: 0.9;
/* 子元素抵消比例 */
--childScaleY: calc(1 / var(--parentScaleY))
}
2个小圆旋转动画
如果是围绕一个正圆来旋转,那么实现会简单很多,但这里是一个椭圆。纯CSS该如何处理呢?根据小编的了解,有以下几种方法可以实现,但效果有所区别:
- 使用 transform-style: preserve-3d; 开启3D模式,但小圆在旋转角度存在视角消失的问题,需要额外处理
- 使用 cubic-bezier 贝塞尔曲线可以实现椭圆曲线效果,但动画开始停止不可控
- 使用 rotate 0-360度旋转,需要对子元素设置反向旋转来抵消父级旋转的影响
经过比较,最终选用了第三种方案,既满足条件且实现成本较低。首先画出一个椭圆的边框效果,使用scaleY和border-radius将一个正方形变成椭圆形,核心代码如下:
width: 570px;
aspect-ratio: 1;
border-radius: 50%;
border: 10px solid var(--mainColor);
transform: scaleY(var(--parentScaleY));
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/1234abe1-edc7-49cf-9a6d-f35fcb174a85.jpg)
然后给这个大圆添加旋转的动画,使其整体旋转360度,这时还没有添加其他元素,所以界面没有变化。
@keyframes circle {
0% {
transform: scaleY(var(--parentScaleY)) rotate(0);
}
100% {
transform: scaleY(var(--parentScaleY)) rotate(360deg);
}
}
设置大圆的动画执行相关参数。
animation: circle 1s 1 cubic-bezier(.5,.08,.52,.93) forwards;
边框上面的两个圈基于伪元素绘制,定位于大圆的顶部两端并添加动画。注意需要设置反向旋转来抵消父级的旋转。
@keyframes mini-circle {
0%{
transform: rotate(0deg) scaleY(var(--childScaleY));
}
100%{
transform: rotate(-360deg) scaleY(var(--childScaleY));
}
}
为了方便查看,将椭圆参数调大对比,可以看到设置抵消后的区别:一个圆被压缩了,另一个保持正常圆形:
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/bc402527-18e4-4fe4-9c63-72673bef1524.jpg)
未设置抵消
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/24e8e3a6-b02a-4ea6-b418-db871b86dedd.jpg)
已设置抵消
为了更加优化元素利用,这里将两个圆的绘制进一步合并到一个伪元素中,使用径向渐变背景绘制两个纯色圆形。代码如下:
background:
radial-gradient(circle 65px at 31% 24.5%,var(--mainColor) 0% 100%, transparent),
radial-gradient(circle 65px at 72% 24.5%, var(--mainColor) 0% 100%, transparent);
至此,这部分内容的基本功能完成,实际效果如下:
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/d0b8074a-8ebe-4a3f-bf46-5c6177496779.jpg)
Z 字母
接下来,用另一个伪元素实现 Z 字母效果。仔细观察可发现,Z 字母的两个拐角都有锐角效果,并不是普通的字母。
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/2231ec79-b017-485c-aa78-e2b474f72aac.jpg)
基于当前样式,我们可以用3段矩形拼接完成效果。上下各一段,中间一段增加旋转角度,但只用一个伪元素如何绘制三个矩形呢?这次需要用到linear-gradient线性渐变,顶部和底部正常从上往下绘制,中间部分需要绘制线条的旋转角度,其他部分用#0000透明色,为了方便查看效果,对三个矩形设不同颜色,代码如下:
background:
linear-gradient(#f00 25%, #0000 25%),
linear-gradient(#0000 75%, #29eb9a 25%),
linear-gradient(124deg, #0000 40%, #000 40% 60%, #0000 60%);
绘制的效果如下:
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/442cbb44-196a-4b60-9bad-65b95768612b.jpg)
可以看到当前效果还有多余部分,需要进一步优化将其隐藏。这时用到background-size与background-position,通过设置绘制内容的大小与位置。代码如下:
background-size: 80% var(--w), 80% var(--w), 100% 100%;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/28ee3baa-252c-4206-b503-511f9fe87d99.jpg)
文章为用户上传,仅供非商业浏览。发布者:Lomu,转转请注明出处: https://www.daogebangong.com/articles/detail/css-dan-biao-qian-shi-xian-zhuan-zhuan-logo.html
评论列表(196条)
测试