根据她的以往经验,这个网站的HTML和CSS是完全在她的能力范围以内,于是我帮助她完成了这个效果。显示nav被裁减的效果是一个不简单的任务,我看到图片的第一反应是创建一个相匹配的背景被部分裁剪的图像,然后把它设置为一个after元素。问题是,至少要解决响应式问题,并且响应式并不完全可控的。
了解CSS属性:clip-path
clip-path 是工作草案的一部分,它是一个通过屏蔽和裁减来隐藏元素的一部分的工具。尽管clip-path没有被主流的浏览器支持(包括IE和Firefox),但在webkit浏览器中,它仍然是一个实现时尚效果的小工具。
注意,在现代浏览器中需要使用-webkit-前缀。
clip-path 简单的工作原理是提供一系列的X和Y值来创建路径。当使用这些值创建一条完整路径时,就会把图像按照路径内部的尺寸进行裁剪。
利用clip-path,我们可以创建圆形、椭圆和多边形等不同的形状,创造力是唯一的限制。
一个简单的三角形裁减
View the code on codepen
Star
View the code on codepen
动画
现在我们已经了解了各种图形和怎么创建它们,那怎么利用这些图形创建我们想要的效果呢?
给形状应用一个hover,并用过渡属性来创建平滑的效果。但是需要记住,我们创建的初始默认状态,必须同所有的hover状态都使用相同的坐标系。
View the code on codepen
本文地址:https://www.stayed.cn/item/2351
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我