测试2

声明：本文涉及图文和模型素材仅用于个人学习、研究和欣赏，请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。

背景

《声生不息》 是芒果TV、香港电视广播有限公司和湖南卫视联合推出的港乐竞唱献礼节目，听着音乐仿佛回到了那个令人怀念的港风席卷整个亚洲的年代。

该节目 Logo 采用经典红蓝配色，无限符号 ∞ 造型，满满的设计感。本文在仅采用原生 CSS 的情况下，尽量还原实现该 Logo 造型，本文内容虽然非常简单，但是用到的知识点挺多的，比如：repeating-linear-gradient、clip-path、background-clip、Window.getComputedStyle()、CSSStyleDeclaration.getPropertyValue() 等。

效果

先来看看实现效果吧。

点击右上角的 半圆 形状，页面主体可切换为白色。

在线预览

内容来源于网络如有侵权请私信删除

文章来源: 博客园

原文链接: https://www.cnblogs.com/dragonir/p/16265984.html

标签： HTML CSS HTML5 CSS3
你还没有登录，请先登录或注册！
  • 还没有人评论，欢迎说说您的想法！

相关课程

云知梦-HTML5网页标签
4605 0元 限免
HTML5网页标签
3938 0元 限免