css实现切开的猕猴桃爱情甜蜜的效果代码
代码语言:html
所属分类:表白
代码描述:css布局实现被切开两半的猕猴桃相互拥抱爱情甜蜜的效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Lato:400,700"); html { display: grid; min-height: 100%; } body { display: grid; font-family: "Lato", sans-serif; } .container { margin: auto; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; } .css-drawing { display: flex; flex-direction: row-reverse; width: 400px; height: 350px; } .avocado-body-right { position: relative; left: -3%; top: 5%; height: 50%; width: 30%; background: #CDE06D; border-radius: 50% 50% 50% 50% / 75% 75% 40% 40%; border: 20px solid #9FCD65; box-shadow: 0 0 0 1px #3C632B; } .avocado-body-right .shell { margin-left: -10%; } .avocado-body-right .shadow { left: 15px; } .avocado-body-right .mouth { left: 47%; } .avocado-body-right .blush-l, .avocado-body-right .blush-r { top: 75.5%; } .avocado-body-right .blush-l { left: 22%; } .avocado-seedless { position: absolute; overflow: hidden; bottom: 8%; left: 17.5%; background: #9FCD65; border: 3px solid #9acb5d; width: 65%; height: 47%; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; } .avocado-seedless .highlight { background: #9FCD65; opacity: 1; } .avocado-seedless .highlight-cover { background: #CDE06D; transform: rotate(0deg); width: 95%; height: 95%; top: 22%; left: -15%; } .avocado-body { position: relative; top: 5%; height: 50%; width: 30%; background: #CDE06D; border-radius: 50% 50% 50% 50% / 75% 75% 40% 40%; border: 20px solid #9FCD65; box-shadow: 0 0 0 1px #3C632B; } .shell { position: absolute; z-index: -1; background: #3C632B; margin-left: -34%; margin-top: -11%; width: 143%; height: 113%; border-radius: 50% 50% 50% 50% / 65% 75% 30% 30%; animation: bounce 1.5s ease-in infinite; } .avocado-face { position: absolute; width: 90%; height: 40%; top: 0; } .circle-eyes { background: #2B1E13; border-radius: 50%; width: 10px; height: 10px; margin-left: 35%; margin-top: 42%; } .circle-eyes:before { content: ''; position: absolute; right: 20%; width: 10px; height: 10px; background: #2B1E13; border-radius: 50%; } .smiley-eyes { border-radius: 50%; width: 10px; position: relative; height: 10px; margin-left: 30%; margin-top: 41%; border: 3px solid; border-color: #2B1E13 transparent transparent #2B1E13; transform: rotate(45deg); } .right { position: absolute; right: 22%; top: 0; } .blush-l, .blush-r { position: absolute; opacity: .7; width: 15px; height: 8px; background: #EDB6B6; border-radius: 50%; top: 78%; } .blush-l { left: 27%; } .blush-r { right: 12%; } .mouth { position: absolute; top: 70%; left: 52%; width: 10px; height: 10px; border-radius: 50%; } .happy { border: 3px solid; border-color: transparent #2B1E13 #2B1E13 transparent; transform: rotate(45deg); } .avocado-seed { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0