css实现鱼缸中的折纸龟效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现鱼缸中的折纸龟效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background-color: #918DE2; } .turtle { background-color: #8fbfe0; height: 25rem; width: 25rem; border-radius: 50%; position: absolute; top: 50%; left: 50%; box-shadow: 5px 15px 10px rgba(0,0,0,0.3); transform: translate(-50%, -50%); } .turtle:before { content: ''; background-color: #8fbfe0; border-radius: 25%; height: 2.5rem; width: 13rem; left: 6rem; z-index: 10; position: absolute; } .row { display: flex; flex-wrap: wrap; flex-direction: row; margin: 0 auto; } .column { flex: 50%; } .turtle1 { margin-left: 1rem; } .turtle2 { margin-left: -1rem; } .turtle_head1, .turtle_head2 { position: relative; transform: rotate(30deg); margin-left: 4rem; margin-top: -2rem; } .turtle_head2 { position: relative; transform: rotate(-25deg); margin-top: 1rem; } .left1, .left2{ background-color: #F3BAD0; height: 3.5rem; width: 2.5rem; margin-left: 6rem; margin-top: 10rem; clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%, 0 60%); position: absolute; } .left2 { margin-left: 6rem; margin-top: 10rem; } .right1, .right2{ background-color: #F0A8C4; height: 3.5rem; width: 2.5rem; margin-left: 8.4rem; margin-top: 10rem; clip-path: polygon(60% 0, 100% 50%, 100% 100%, 0 100%, 0 0); position: absolute; } .right2 { margin-left: 8.4rem; margin-top: 10rem; } .nostril, .nostril2 { background-color: #000; border-radius: 50%; width: 0.1rem; height: 0.1rem; margin-left: 2rem; margin-top: 0.2rem; position: absolute; } .nostril2 { margin-left: 0.3rem; margin-top: 0.2rem; } .eye { position: relative; } .pupil, .pupil2 { background-color: #000; width: 0.85rem; height: 1rem; border-radius: 50%; position: absolute; margin-top: 2rem; margin-left: 1.1rem; } .pupil2 { margin-left: 0.5rem; } .iris, .iris2 { background-color: #fff; width: 0.25rem; height: 0.35rem; border-radius: 50%; margin-top: 0.2rem; margin-left: 0.5rem; } .iris2 { width: 0.15rem; height: 0.25rem; margin-top: -0.05rem; margin-left: 0rem; } .upper_body { position: absolute; margin-top: 6rem; z-index: 10; } .upper_left, .upper_left2 { background-color: #ED96B8; width: 3.5rem; height: 4rem; margin-top: 3.35rem; margin-left: 1.75rem; transform: rotate(30deg); box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.2); } .upper_left2 { background-color: #EA85AC; margin-top: 7.5rem; margin-left: 15.75rem; transform: rotate(-25deg); } .upper_right, .upper_right2 { background-color: #EA85AC; width: 3.5rem; height: 4rem; margin-top: -2.25rem; margin-left: 4.75rem; transform: rotate(30deg); box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.2); } .upper_right2 { background-color: #ED96B8; margin-top: -5.35rem; margin-left: 18.75rem; transform: rotate(-25deg); z-index: 10; } .lower_body { position: absolute; z-index: 10; } .lower_left, .lower_left2 { width: 0; height: 0; border-right: 3.45rem solid #ED96B8; border-bottom: 3rem solid transparent; transform: rotate(30deg); margin-top: 12.7rem; margin-left: 0rem; filter: drop-shadow(3px 0 5px rgba(0, 0, 0, 0.025)); } .lower_left2 { border-right: 3.5rem solid #EA85AC; margin-top: 17.1rem; margin-left: 17rem; transform: rotate(-25deg); } .lower_right { width: 0; height: 0; border-left: 3.5rem solid #EA85AC; border-bottom: 3rem solid transparent; transform: rotate(30deg); margin-top: -1.2rem; margin-left: 2.95rem; filter: drop-shadow(3px 0 5px rgba(0, 0, 0, 0.2)); } .lower_right2 { width: 0; height: 0; border-left: 3.5rem solid #ED96B8; border-bottom: 3rem solid transparent; margin-top: -4.3rem; margin-left: 20.2rem; transform: rotate(-25deg); filter: drop-shadow(3px 0 5px rgb.........完整代码请登录后点击上方下载按钮下载查看
网友评论0