css实现新冠疫苗注射的2021年效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现新冠疫苗注射的2021年效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> *, *:after, *:before { box-sizing: border-box; } body { margin: 0; overflow: hidden; height: 100vh; display: grid; place-items: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .text-container { font-family: arial; font-size: 20vw; font-weight: 800; color: #0091EA; position: relative; } .zero { display: inline-block; position: relative; width: 14vw; height: 14vw; background: #0091EA; border-radius: 50%; border: 1px solid #0091EA; } .zero.covid-19 { background: #F9A825; border: 1px solid #FFA000; -webkit-animation: 10s covidEffect infinite; animation: 10s covidEffect infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .zero.covid-19:before { content: ""; position: absolute; background: rgba(0, 0, 0, 0.45); width: 2vw; height: 2.5vw; left: 30%; top: 30%; border-radius: 50%; box-shadow: 4vw 0 rgba(0, 0, 0, 0.45); -webkit-animation: 10s eyeMove infinite; animation: 10s eyeMove infinite; } .zero.covid-19:after { content: ""; position: absolute; width: 5vw; height: 3vw; border-radius: 0 0 5vw 5vw; top: 57%; left: 34%; background: rgba(0, 0, 0, 0.45); -webkit-animation: 10s expChange infinite; animation: 10s expChange infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .zero.covid-19 .drop { width: 1.5vw; height: 1.5vw; background: #F44336; border-radius: 50%; position: absolute; left: 50%; top: -20%; -webkit-animation: 10s dropping infinite; animation: 10s dropping infinite; } .zero.covid-19 .drop:before { content: ""; width: 0.5vw; height: 0.5vw; background: #D50000; border-radius: 50%; position: absolute; left: 50%; top: 0; box-shadow: 0 0.5vw rgba(255, 255, 255, 0.2), -0.5vw 0.5vw rgba(0, 0, 0, 0.1), -0.25vw 0.85vw rgba(0, 0, 0, 0.2); } .zero.covid-19 .spike { position: absolute; width: 0.5vw; height: 2.5vw; background: #B71C1C; -webkit-animation: 10s spikeGrow infinite; animation: 10s spikeGrow infinite; } .zero.covid-19 .spike:before { content: ""; width: 1vw; height: 1vw; background: #D50000; border-radius: 50%; position: absolute; left: 50%; transform: translate(-50%, 0); } .zero.covid-19 .spike:nth-child(1) { left: 50%; bottom: 92%; } .zero.covid-19 .spike:nth-child(2) { left: 80%; bottom: 80%; transform: rotate(45deg); } .zero.covid-19 .spike:nth-child(3) { left: 20%; bottom: 80%; transform: rotate(-45deg); } .zero.covid-19 .spike:nth-child(4) { left: 100%; bottom: 50%; transform: rotate(90deg); } .zero.covid-19 .spike:nth-child(5) { left: 0%; bottom: 50%; transform: rotate(-90deg); } .zero.covid-19 .spike:nth-child(6) { left: 95%; top: 65%; transform: rotate(100deg); } .zero.covid-19 .spike:nth-child(7) { left: 0%; top: 65%; transform: rotate(-100deg); } .zero.covid-19 .spike:nth-child(8) { left: 80%; top: 85%; transform: rotate(140deg); } .zero.covid-19 .spike:nth-child(9) { left: 20%; top: 85%; transform: rotate(-140deg); } .zero.covid-19 .mask { position: absolute; width: 8vw; height: 5vw; background: #F5F5F5; bottom: 7%; left: 50%; transform: translatex(-50%); z-index: 20; -webkit-animation: 10s wearMask infinite; animation: 10s wearMask infinite; } .zero.covid-19 .mask:after, .zero.covid-19 .mask:before { content: ""; position: absolute; left: 96%; top: -17%; width: 3.6vw; height: 0.25vw; background: #FFF; transform: rotate(-31deg); } .zero.covid-19 .mask:before { transform: rotate(31deg); left: -41%; } .one { position: absolute; right: 5vw; top: 5vw; width: 5vw; height: 10vw; background: #2bca03; z-index: 100; box-shadow: 0vw -1vw #3a3a3a inset, 0vw 0vw 0 0.3vw #0091EA inset; -webkit-animation: 10s launch infinite; animation: 10s launch infinite; } .one:after { content: ""; position: absolute; top: 100%; left: 50%; transform: translatex(-50%); width: 2vw; height: 3vw; background: #0091EA; -webkit-animation: 10s push infinite; animation: 10s push infinite; } .one:before { content: ""; position: absolute; top: 12vw; left: 50%; transform: translatex(-50%); width: 4vw; height: 1vw; background: #0091EA; z-index: 5; border-radius: 2vw; -webkit-animation: 10s upDown infinite; animation: 10s upDown infinite; } .needle { position: absolute; top: -0.5vw; left: 50%; transform: translatex(-50%); width: 2vw; height: 1vw; background: #2bca03; border-radius: 0.25vw 0.25v.........完整代码请登录后点击上方下载按钮下载查看
网友评论0