css实现带音效喜庆节日红灯笼摆动动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现带音效喜庆节日红灯笼摆动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .content { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 50px; margin-bottom: 250px; } .lantern-box { display: flex; flex-direction: column; align-items: center; /* 设置旋转点 */ transform-origin: top center; animation: swing 3s infinite ease-in-out; } .lantern-line { width: 5px; height: 80px; background-color: #dc8f03; } .lantern-body { position: relative; width: 300px; height: 220px; background-color: #f00; border-radius: 120px; box-shadow: 0 30px 115px -10px #f00; /* 设置旋转点 */ transform-origin: top center; animation: swing 3s infinite ease-in-out; } .lantern-body::before { content: ''; position: absolute; top: -20px; left: 50%; transform: translate(-50%, 0); width: 100px; height: 20px; background-color: #dc8f03; border-radius: 5px 5px 0 0; } .lantern-body::after { content: ''; position: absolute; bottom: -20px; left: 50%; transform: translate(-50%, 0); width: 100px; height: 20px; background-color: #dc8f03; border-radius: 0 0 5px 5px; } /* 灯笼的动画效果 */ @keyframes swing { 0% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } 100% { transform: rotate(-6deg); } } .lantern-circle { position: absolute; top: -5px; left: 50%; transform: translate(-50%, 0); width: 240px; height: 230px; border: 2px solid #dc8f03; border-radius: 50%; } .lantern-rect { position: absolute; top: -5px; left: 50%; transform: translate(-50%, 0); width: 90px; height: 240px; border: 2px solid #dc8f03; border-radius: 50%; } .lantern-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; font-size: 24px; color: #dc8f03; font-weight: 700; } .lantern-tassel { position: absolute; bottom: -40%; left: 50%; transform: translate(-50%, 0); width: 5px; height: 75px; background-color: #dc8f03; /* 设置旋转点 */ animation: swing 3s infinite ease-in-out; } .lantern-tassel::before { content: ''; pos.........完整代码请登录后点击上方下载按钮下载查看
网友评论0