纯css实现眼珠转动动画效果
代码语言:html
所属分类:动画
代码描述:纯css实现眼珠转动动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } .scene { width: 300px; height: 300px; display: inline-block; margin: 20px; perspective: 1200px; perspective-origin: 50% 50%; } .white { display: inline-block; width: 100%; height: 100%; margin: 0; border-radius: 50%; position: relative; background: radial-gradient(circle at 50% 40%, #fcfcfc, #efeff1 66%, #9b5050 100%); } .white:before { content: ""; position: absolute; background: radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%); border-radius: 50%; bottom: 2.5%; left: 5%; opacity: 0.6; height: 100%; width: 90%; filter: blur(5px); z-index: 2; } .white:after { content: ""; width: 100%; height: 100%; position: absolute; top: 5%; left: 10%; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%); transform: translateX(-80px) translateY(-90px) skewX(-20deg); filter: blur(10px); } ..........完整代码请登录后点击上方下载按钮下载查看
网友评论0