div+css实现f字母文字形鱼塘鱼儿游动动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现f字母文字形鱼塘鱼儿游动动画效果代码
代码标签: div css 字母 文字形 鱼塘 鱼儿 游动 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } body { background: #006d77; height: 100vh; display: flex; justify-content: center; align-items: center; } .container { background: #023047; height: 400px; width: 300px; position: relative; overflow: hidden; } .container::before { content: ''; background: #006d77; height: 190px; width: 500px; top: 260px; left: 120px; position: absolute; border-radius: 50px; z-index: 99; } .container::after { content: ''; background: #006d77; height: 60px; width: 500px; top: 110px; left: 120px; position: absolute; border-radius: 50px; z-index: 99; } .fish1 { position: relative; top: 4px; left: -40px; transform: scale(.7); animation: fish 21s infinite reverse linear; } .f1 { background: rgb(248,237,235); background: linear-gradient(90deg, rgba(248,237,235,1) 0%, rgba(227,100,20,1) 30%, rgba(248,237,235,1) 60%, rgba(227,100,20,1) 90%); height: 20px; width: 90px; overflow: hidden; border-radius: 50px; position: absolute; top: 20px; } .fin1 { position: absolute; border-radius: 100% 32% 100% 0%; background: transparent; border: 1px solid white; height: 20px; width: 20px; top: 8px; left: 30px; } .fin2 { position: relative; border-radius: 100% 32% 100% 0%; background: transparent; border: 1px solid white; height: 15px; width: 20px; left: 80px; top: 15px; } .fin2::after { content: ''; position: absolute; border-radius: 100% 32% 100% 0%; background: transparent; border: 1px solid white; height: 14px; width: 19px; top: 12px; transform: rotate(45deg); } .e1 { position: relative; background: #e36414; border-radius: 100%; height: 9px; width: 9px; left: 8px; top: 5px; } .e1::after { content: ''; position: absolute; background: #333; border-radius: 100%; height: 5px; width: 5px; left: 2.3px; top: 1.8px; } .nose { position: absolute; border-radius: 100%; background: #333; height: 3px; width: 3px; left: 2px; } .fish2 { position: relative; top: 30px; left: -60px; transform: scale(.6); animation: fish 35s infinite reverse linear; } .f2 { background: rgb(248,237,235); background: linear-gradient(180deg, rgba(248,237,235,1) 0%, rgba(237,163,119,1) 32%, rgba(227,100,20,1) 74%); position: absolute; overflow: hidden; height: 70px; width: 90px; border-radius: 100%; } .e2 { position: relative; background: #fff; border-radius: 100%; height: 19px; width: 19px; left: 18px; top: 15px; } .e2::after { content: ''; position: absolute; background: #333; border-radius: 100%; height: 12px; width: 12px; left: 3.6px; top: 3.6px; } .nose1 { position: absolute; border-radius: 100%; background: #333; height: 4px; width: 4px; left: 6px; top: 35px; } .fin3 { position: relative; border-radius: 100% 32% 100% 0%; background: #028090; height: 20px; width: 30px; left: 80px; top: 35px; } .fin3::before { content: ''; position: absolute; border-radius: 100% 32% 100% 0%; background: #028090; height: 20px; width: 30px; top: 15px; left: 0px; transform: rotate(20deg); } .fin3::after { content: ''; position: absolute; border-radius: 100% 32% 100% 0%; background: #028090; height: 20px; width: 25px; top: 30px; transform: rotate(45deg); } .fish3 { position: relative; top: 90px; left: -70px; transform: scale(.7); animation: fish 40s infinite linear; } .f3 { background: rgb(248,237,235); background: linear-gradient(270deg, rgba(248,237,235,1) 16%, rgba(20,69,82,1) 45%); position: absolute; overflow: hidden; height: 40px; width: 120px; left: 60px; border-radius: 85% 100% 100% 85%; } .e3 { position: relative; background: orange; border-radius: 100%; height: 15px; width: 15px; left: 88px; top: 10px; } .e3::after { content: ''; position: absolute; background: #333; border-radius: 100%; height: 8px; width: 8px; left: 3.6px; top: 3.6px; } .nose2 { position: absolute; border-radius: 100%; background: #333; height: 4px; width: 4px; left: 110px; top: 20px; } .fin4 { position: relative; border-radius: 100% 32% 100% 0%; background: orange; height: 20px; width: 20px; left: 45px; top: 36px; transform: rotate(180deg); } .fin4::before { content: ''; position: absolute; border-radius: 100% 32% 100% 0%; background: orange; height: 20px; width: 20px; top: 10px; transform: rotate(85deg); } .fin4::after { content: ''; position: absolute; border-radius: 100% 32% 100% 0%; background: transparent; border: 1px solid white; height: 24px; width: 20px; left: -60px; top: 23px; transform: rotate(85deg); } .fish4 { position: relative; top: 130px; left: -85px; transform: scale(.6); animation: fish 28s infinite linear; } .f4 { background: rgb(248,237,235); background: linear-gradient(0deg, rgba(248,237,235,1) 0%, rgba(20,69,82,1) 98%); position: absolute; overflow: hidden; height: 50px; width: 130px; left: 60px; border-radius: 85% 100% 100% 85%; } .e4 { position: relative; background: orange; border-radius: 100%; height: 15px; width: 15px; left: 98px; top: 15px; } .e4::after { content: ''; position: absolute; background: #333; border-radius: 100%; height: 8px; width: 8px; left: 3.6px; top: 3.6px; } .nose3 { position: absolute; border-radius: 100%; background: #333; height: 4px; width: 4px; left: 118px; top: 25px; } .fin5 { position: relative; border-radius: 100% 32% 100% 0%; background: orange; height: 10px; width: 20px; left: 45px; top: 36px; transform: rotate(180deg); } .fin5::before { content: ''; position: absolute; border-radius: 100% 32% 100% 0%; background: orange; height: 10px; width: 20px; top: 7px; transform: rotate(20deg); } .fin5::after { content: ''; position: absolute; border-radius: 100% 32% 100% 0%; background: orange; height: 10px; width: 20px; left: 0px; top: 15px; transform: rotate(35deg); } .fin6 { position: absolute; border-radius: 100% 32% 100% 0%; background: orange; height: 24px; width: 30px; left: 100px; top: -5px; transform: rotate(230deg); } .fish5 { position: relative; top: 160px; left: -85px; transform: scale(.6); animation: fish 20s infinite linear; } .f5 { background: rgb(250,163,7); background: linear-gradient(180deg, rgba(250,163,7,1) 52%, rgba(180,171,61,1) 77%, rgba(82,183,136,1) 100%); position: absolute; overflow: hidden; height: 60px; width: 80px; left: 60px; border-radius: 100%; } .e5 { position: relative; background: white; border-radius: 100%; height: 15px; width: 15px; left: 108px; top: 15px; } .e5::after { content: ''; position: absolute; background: #333; border-radius: 100%; height: 8px; width: 8px; left: 3.6px; top: 3.6px; } .nose4 { position: absolute; border-radius: 100%; background: #333; height: 4px; width: 4px; left: 128px; top: 45px; } .fin7 { p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0