十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章给大家分享的是有关css如何使用transform: rotate配合overflow: hidden绘制三角形的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
石林ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18980820575(备注:SSL证书合作)期待与您的合作!
transform: rotate 配合 overflow: hidden 绘制三角形
这种方法还是比较常规的,使用 transform: rotate
配合 overflow: hidden
。一看就懂,一学就会,简单的动画示意图如下:
设置图形的旋转中心在左下角 left bottom
,进行旋转,配合 overflow: hidden
。
完整的代码:
html, body { width: 100%; height: 100%; display: flex; } div { width: 141px; height: 100px; margin: auto; } .demo-opacity { overflow: hidden; } .demo, .demo-opacity { position: relative; border: 1px solid #000; background: unset; &::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; animation: conicmove 3s infinite linear; background: deeppink; transform-origin: left bottom; z-index: -1; } } .triangle { position: relative; background: unset; overflow: hidden; &::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: deeppink; transform-origin: left bottom; transform: rotate(45deg); z-index: -1; } } @keyframes conicmove { 100% { transform: rotate(45deg); } }
感谢各位的阅读!关于“css如何使用transform: rotate配合overflow: hidden绘制三角形”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!