div+css实现挂红灯笼摆动动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现挂红灯笼摆动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <style> * { margin: 0; padding: 0; box-sizing: border-box; /* 解决手机浏览器点击有选框的问题 */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } body { display: flex; justify-content: center; align-items: center; overflow: hidden; min-height: 100vh; background-color: #fecb80; } .lantern { position: relative; left: 50%; animation: animate 3s infinite ease-in-out; transform-origin: top center; } .light { width: 300px; height: 250px; background-color: #ff9751; border-radius: 50%; border: 3px solid #ff9751; box-shadow: 0 0 100px #ff9751, inset 0 0 100px #f65d53, inset 0 0 50px #f65d53; position: relative; } .light::before, .light::after { content: ""; height: 250px; border-radius: 50%; border: 3px solid #ff9751; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .light::before { width: 200px; } .light::after { width: 60px; } .center::before, .center::after { content: ""; width: 100px; height: 20px; background-color: #fcac5d; border: 3px solid #ff9751; position: absolute; left: 50%; transform: translateX(-50%); z-index: 10; } .center::before { border-radius: 8px 8px 0 0; top: -15px; } .center::after { border-radius: 0 0 8px 8px; bottom: -15px; } .line { width: 8px; height: 40px; background-color: #ff9751; position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); animation:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0