css布局实现多种折纸效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现多种折纸效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body{ background-color:lightgray; } .container{ margin-top: 50px; z-index:0; display:flex; flex-direction: row; flex-wrap: wrap; } .square1 { height:200px; width:200px; clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%); margin-left: 90px; background: rgba(132,8,8,1); position:relative; z-index: 0; } .square2 { height:200px; width:200px; clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%); margin-left: 90px; transform:rotate(45deg); background: linear-gradient(-45deg, rgba(132,8,8,1) 46%, rgba(166,12,12,1) 49.5%, rgba(92,6,6,1) 49.9%, rgba(132,8,8,1) 50%, rgba(92,6,6,1) 50.5%, rgba(132,8,8,1) 56%); position:relative; z-index: 0; } .square3 { height:200px; width:200px; clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%); margin-left: 90px; transform:rotate(45deg); background: linear-gradient(45deg, rgba(132,8,8,.2) 46%, rgba(166,12,12,.2) 49.5%, rgba(92,6,6,.2) 49.9%, rgba(132,8,8,.2) 50%, rgba(92,6,6,.2) 50.5%, rgba(132,8,8,.2) 56%), linear-gradient(-45deg, rgba(132,8,8,1) 46%, rgba(166,12,12,1) 49.5%, rgba(92,6,6,1) 49.9%, rgba(132,8,8,1) 50%, rgba(92,6,6,1) 50.5%, rgba(132,8,8,1) 56%); position:relative; z-index: 0; } .step4{ margin-left:80px; margin-top:-35px; height:267px; width:267px; clip-path: polygon(0% 50%, 25% 25%, 75% 25%, 100% 50%, 50% 100%); background: linear-gradient(-90deg, rgba(132,8,8,.2) 46%, rgba(166,12,12,.2) 49.5%, rgba(92,6,6,.2) 49.9%, rgba(132,8,8,.2) 50%, rgba(92,6,6,.2) 50.5%, rgba(132,8,8,.2) 56%), linear-gradient(0deg, rgba(132,8,8,1) 46%, rgba(166,12,12,1) 49.5%, rgba(92,6,6,1) 49.9%, rgba(132,8,8,1) 50%, rgba(92,6,6,1) 50.5%, rgba(132,8,8,1) 56%); } .step4:after { content:''; position:absolute; z-index: 3; clip-path:polygon(0 0, 100% 0, 50% 50%); height:267px; width:267px; border: 1px solid black; background: linear-gradient(90deg, rgba(132,8,8,.5) 46%, rgba(166,12,12,.5) 49.5%, rgba(92,6,6,.5) 49.9%, rgba(132,8,8,.5) 50%, rgba(92,6,6,.5) 50.5%, rgba(132,8,8,.5) 56%); filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.5)); } .shadow { filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.5)); } .step5{ margin-left:80px; margin-top:-35px; height:267px; width:267px; clip-path: polygon(0% 50%, 25% 25%, 75% 25%, 100% 50%, 85% 62.5%, 15% 62.5%); background: linear-gradient(-90deg, rgba(132,8,8,.2) 46%, rgba(166,12,12,.2) 49.5%, rgba(92,6,6,.2) 49.9%, rgba(132,8,8,.2) 50%, rgba(92,6,6,.2) 50.5%, rgba(132,8,8,.2) 56%), linear-gradient(0deg, rgba(132,8,8,1) 46%, rgba(166,12,12,1) 49.5%, rgba(92,6,6,1) 49.9%, rgba(132,8,8,1) 50%, rgba(92,6,6,1) 50.5%, rgba(132,8,8,1) 56%); } .step5:before { content:''; position:absolute; z-index: 3; clip-path:polygon(0 0, 100% 0, 50% 50%); height:267px; width:267px; border: 1px solid black; background: linear-gradient(90deg, rgba(132,8,8,.5) 46%, rgba(166,12,12,.5) 49.5%, rgba(92,6,6,.5) 49.9%, rgba(132,8,8,.5) 50%, rgba(92,6,6,.5) 50.5%, rgba(132,8,8,.5) 56%); filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.5)); } .step5:after { content:''; position:absolute; z-index: 4; clip-path:polygon(-20% 100%, 50% 25%, 120% 100%); height:267px; width:267px; border: 1px solid black; background: linear-gradient(90deg, rgba(132,8,8,1) 46%, rgba(166,12,12,.5) 49.5%, rgba(92,6,6,.5) 49.9%, rgba(132,8,8,.5) 50%, rgba(92,6,6,1) 50.5%, rgba(132,8,8,1) 56%); filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.5)); } .step6{ margin-left:80px; margin-top:-35px; height:267px; width:267px; clip-path: polygon(0% 50%, 25% 25%, 50% 25%, 62.5% 12.5%, 85% 37.5%, 50% 66.7%, 12.5% 66.7%); background: linear-gradient(90deg, rgba(132,8,8,.2) 48.5%, rgba(166,12,12,.2) 62%, rgba(92,6,6,.2) 62.4%, rgba(132,8,8,.2) 62.5%, rgba(92,6,6,.2) 63%, rgba(132,8,8,.2) 68.5%), linear-gradient(-90d.........完整代码请登录后点击上方下载按钮下载查看
网友评论0