纯css实现绘制汤姆·诺克卡通形象眨眼效果
代码语言:html
所属分类:布局界面
代码描述:纯css实现绘制汤姆·诺克卡通形象眨眼效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } body { background-color: #0c7; min-height: 100vh; } img { opacity: 0.95; height: 100%; width: 100%; display: none; } .circle { background-color: #00b368; border-radius: 50%; height: calc(var(--size, 5) * 1vmin); width: calc(var(--size, 5) * 1vmin); left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); position: absolute; } .tom { height: 25vmin; position: fixed; width: 25vmin; z-index: 2; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .tom__head { height: 88%; width: 100%; position: absolute; bottom: 0; } .tom__ear { --ear-hue: 45; background: -webkit-gradient(linear, left top, left bottom, from(#4d2600), to(transparent)), radial-gradient(circle at center, #e68019 0 60%, #8a4d0f 80%); background: linear-gradient(#4d2600, transparent), radial-gradient(circle at center, #e68019 0 60%, #8a4d0f 80%); height: 28%; width: 34%; -webkit-filter: blur(1px); filter: blur(1px); position: absolute; top: 0; } .tom__ear--left { border-radius: 55% 45% 40% 50%/50% 50% 50% 40%; left: 0; -webkit-transform: translate(10%, -40%) rotate(-35deg); transform: translate(10%, -40%) rotate(-35deg); } .tom__ear--right { border-radius: 55% 45% 40% 50%/50% 50% 35% 50%; right: 0; -webkit-transform: translate(-10%, -40%) rotate(35deg); transform: translate(-10%, -40%) rotate(35deg); -webkit-animation: ear-right 5s infinite; animation: ear-right 5s infinite; } .tom__ear-inner { position: absolute; height: 60%; width: 65%; -webkit-filter: drop-shadow(0 0 10px #4d2600) blur(2px); filter: drop-shadow(0 0 10px #4d2600) blur(2px); background: radial-gradient(transparent 0 40%, #bf4055), #f5a3b1; top: 50%; left: 50%; -webkit-transform: translate(-50%, -40%); transform: translate(-50%, -40%); border-radius: 50% 50% 50% 50%/50% 50% 50% 50%; } .tom__face { border-radius: 45% 45% 50% 50%/60% 60% 36% 36%; height: 100%; position: absolute; width: 100%; -webkit-filter: blur(1px); filter: blur(1px); background: radial-gradient(transparent 0 60%, #f7e6d4), linear-gradient(45deg, rgba(108,64,19,0.25) 0 15%, transparent 50%), #d98026; } .tom__mask { background: #4d2600; height: 60%; position: absolute; width: 84%; left: 50%; top: 50%; -webkit-transform: translate(-50%, -62%); transform: translate(-50%, -62%); -webkit-filter: blur(4px); filter: blur(4px); border-radius: 50% 50% 10% 10%/60% 60% 30% 30%; } .tom__mask:after, .tom__mask:before { content: ''; position: absolute; background: #4d2600; height: 50%; width: 33%; top: 50%; border-radius: 0 0 50% 50%/0 0 60% 60%; } .tom__mask:before { left: 0; -webkit-transform: translate(0, 7%); transform: translate(0, 7%); } .tom__mask:after { right: 0; -webkit-transform: translate(0, 7%); transform: translate(0, 7%); } .tom__snout { height: 40%; width: 50%; background: radial-gradient(circle at 50% 30%, transparent 0 5%, rgba(242,242,242,0.15) 5%, transparent 25%), radial-gradient(circle at 50% 60%, #452608, transparent 50%), radial-gradient(circle at 50% 30%, #170d03 0 5%, transparent 8%), radial-gradient(circle at 50% 42%, #452608 0 20%, transparent 22%), radial-gradient(circle at 50% 40%, #fff 0 16%, transparent 22%), radial-gradient(circle at 50% 50%, #452608 0 20%, transparent 40%), radial-gradient(#d98026 0 60%, transparent 70%); -webkit-filter: blur(2px); filter: blur(2px); position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, 20%); transform: translate(-50%, 20%); } .tom__eye { position: absolute; height: 32%; width: 18%; background: #f2f2f2; top: 50%; left: 50%; overflow: hidden; } .tom__eye--left { border-radius: 50% 45% 50% 45%/50% 45% 50% 45%; -webkit-transform: translate(-184%, -58%); transform: translate(-184%, -58%); } .tom__eye--right { border-radius: 50% 45% 50% 45%/50% 45% 50% 45%; -webkit-transform: translate(87%, -58%) rotate(-5deg); transform: translate(87%, -58%) rotate(-5deg); } .tom__pupil { height: 75%; width: 60%; border-radius: 50% 50% 50% 50%/50% 50% 50% 50%; background: #0d6cf2; position: absolute; top: 50%; left: 50%; -webkit-t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0