css实现艺妓和都灵门效果
代码语言:html
所属分类:布局界面
代码描述:css实现艺妓和都灵门效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *{ margin: 0; padding: 0; } body { width: 100vw; height: 100vh; background: linear-gradient(180deg, #C4CFD8 31.77%, #8DA6BC 51.04%); } /* Animations --------------------- */ @keyframes umbrella-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Umbrella -------------- */ .umbrella { position: absolute; top: 20vmin; left: 23vmin; width: 30vmin; height: 30vmin; border-radius: 50%; background: #8DA6BC; background-image: radial-gradient(57.39% 57.39% at 50% 50%, rgba(214, 171, 17, 0.46) 15.1%, rgba(117, 53, 47, 0.46) 19.27%, rgba(248, 194, 166, 0.46) 21.87%, rgba(140, 80, 56, 0.46) 55.73%, rgba(248, 194, 166, 0.46) 55.74%); background-size: 1vmin 3vmin; box-shadow: inset 0vmin 0vmin 5vmin 0 #C33702, 0vmin 0vmin 0.5vmin 0.3vmin #151E25; animation: umbrella-turn 6000ms ease-in-out infinite alternate; transform-origin: center; } .umbrella-line, .umbrella-line::before, .umbrella-line::after, .umbrella-line-2, .umbrella-line-2::before, .umbrella-line-2::after { width: 0.5vmin; height: 33vmin; background: #151E25; } .umbrella-line { position: relative; top: -1.5vmin; left: 15vmin; } .umbrella-line-2 { position: absolute; top: -1.5vmin; left: 15vmin; transform: rotate(30deg); } .umbrella-line::before, .umbrella-line::after, .umbrella-line-2::before, .umbrella-line-2::after{ content:''; position: absolute; } .umbrella-line::before { transform: rotate(-60deg); } .umbrella-line::after { transform: rotate(60deg); } .umbrella-line-2::before { transform: rotate(-60deg); } .umbrella-line-2::after { transform: rotate(60deg); } .umbrella-center { position: absolute; top: 10vmin; left: 10vmin; width: 10vmin; height: 10vmin; border-radius: 50%; background: black; opacity: 0.7; box-shadow: 0 0 4vmin 3vmin black; } /* Geisha -------------------- */ .geisha { position: absolute; top: 32vmin; } /* Dress ------------------ */ .dress-scarf { position: absolute; top: 23vmin; left: 42vmin; width: 15vmin; height: 37vmin; border-radius: 30% 30% 5% 5%; background: #8DA6BC; background-image: radial-gradient(57.39% 57.39% at 50% 50%, rgba(214, 171, 17, 0.46) 15.1%, rgba(117, 53, 47, 0.46) 19.27%, rgba(248, 194, 166, 0.46) 21.87%, rgba(140, 80, 56, 0.46) 55.73%, rgba(248, 194, 166, 0.46) 55.74%); background-size: 1vmin 8vmin; box-shadow: inset 0vmin 0vmin 10vmin 0 #C33702, 1.5vmin 1.5vmin 0 0 #E3CB90, 0vmin 2vmin 0.2vmin 0.3vmin #151E25; } .dress-black, .dress-black::before { position: absolute; height: 40vmin; width: 18vmin; border-radius: 50% 50% 35% 35%; background: #151E25; background-image: radial-gradient(57.39% 57.39% at 50% 50%, rgba(214, 171, 17, 0.46) 15.1%, rgba(195, 55, 2, 0.46) 26.04%, rgba(21, 30, 37, 0.46) 38.02%, rgba(140, 80, 56, 0.46) 55.73%, rgba(21, 30, 37, 0.46) 75.52%); background-size: 3vmin 0.5vmin; } .dress-black { top: 22vmin; left: 45vmin; transform: skewX(15deg); } .dress-black::before { content: ''; position: absolute; top: 0vmin; left: -6vmin; transform: skewX(-30deg); } /* hands ----------------------- */ .hands, .hands::after { position: absolute; border-radius: 50% 50% 35% 35%; background: #151E25; box-shadow: inset 0 0.5vmin 0.5vmin #8DA6BC; } .hands { top: 22vmin; left: 39vmin; width: 6vmin; height: 15vmin; transform: skewX(-28deg); } .hands::after { content: ''; top: 0vmin; left: 15vmin; width: 6vmin; height: 15vmin; transform: skewX(37deg); } /* Neck, head ---------------------- */ .neck.........完整代码请登录后点击上方下载按钮下载查看
网友评论0