css铃铛摇动效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background-color: #ffdd40; } .wrapper { position: relative; display: flex; width: 100%; height: 90vh; align-items: center; justify-content: center; flex-direction: column; margin: 0; padding: 0; } .bell .material-icons { /* font-size:12rem !important; */ /* font-size:36px !important; */ font-size: 16rem !important; } .bell { position: relative; display: inline-block; /* border:dashed 1px rgba(0,0,0,.25); */ margin: 0; padding: 0; } .bell .anchor { transform-origin: center top; display: inline-block; margin: 0; padding: 0; } .bell .layer-1 { color: #1d1e22; z-index: 9; animation: animation-layer-1 5000ms infinite; opacity: 0; } .bell .layer-2 { color: #1d1e22; z-index: 8; position: absolute; top: 0; left: 0; animation: animation-layer-2 5000ms infinite; } .bell .layer-3 { color: #333642; z-index: 7; position: absolute; top: 0; left: 0; animation: animation-layer-3 5000ms infinite; } @keyframes animation-layer-1 { 0% { transform: rotate(0deg); opacity: 0; } 8.0% { transform: rotate(0deg); opacity: 0; } 12.0% { transform: rotate(42deg); opacity: .5; } 16.0% { transform: rotate(-35deg); opacity: .4; } 20.0% { transform: rotate(0deg); opacity: .1; } 23.0% { transform: rotate(28deg); opacity: .3; } 26.0% { transform: rotate(-20deg); opacity: .2; } 29.0% { transform: rotate(0deg); opacity: .1; } 31.0% { transform: rotate(16deg); opacity: 0; } 33.0% { transform: rotate(-12deg); opacity: 0; } 35.0% { transform: rotate(0deg); opacity: 0; } 37.0% { transform: rotate(-6deg); opacity: 0; } 39.0% { transform: rotate(0deg); opacity: 0; } } @keyframes animation-layer-2 { 0% { transform: rotate(0deg); } 8.0% { transform: rotate(0deg); } 12.0% { transform: rotate(42deg); } 16.0% { transform: rotate(-35deg); } 20.0% { transform: rotate(0deg); } 23.0% { transform: rotate(28deg); } 26.0% { transform: rotate(-20deg); } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0