css实现小球渐变阴影旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现小球渐变阴影旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { padding: 0; margin: 0; } .container { background: linear-gradient(75deg, #dbfcf5, #fce8c5); width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; } .row { display: flex; margin-bottom: 80px; } .box-container { position: relative; width: 10rem; height: 10rem; border-radius: 50%; margin: 0 40px; z-index: 1; -webkit-animation: rotate 2s linear forwards infinite; animation: rotate 2s linear forwards infinite; } .box-container::after { background: inherit; content: ""; width: 100%; height: 100%; position: absolute; filter: blur(3rem); opacity: 1; z-index: -1; } @-webkit-keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .shadow-1 { background: linear-gradient(75deg, #95F9E3, #FFD791); } .shadow-2 { background: linear-gradient(75deg, #01BAEF, #D0EDF5); } .shadow-3 { background: linear-gradient(75deg, #DCAC9B, #D0EDF5); } .shadow-4 { background: linear-gradient(75deg, #E574BC, #D0EDF5); } .shadow-5 { background: linear-gradient(75deg, #E5ECF4, #C3BEF7); } .shadow-6 { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0