纯css实现彩虹动画
代码语言:html
所属分类:动画
代码描述:纯css实现彩虹动画,风雨过后,总会见到彩虹
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } html { background-color: #09f; height: 100vh; } .wrapper { border-bottom: solid 2px #fff; height: 40vmin; left: 50%; overflow: hidden; position: fixed; top: 50%; transform: translate(-50%, -50%); width: 120vmin; } .wrapper .rainbow { animation: spin 4s ease-in-out infinite; height: 80vmin; margin: 0 auto; position: relative; width: 80vmin; } .wrapper .rainbow:after { animation: fadeInOut 4s ease-in-out infinite; background-color: #09f; bottom: 40vmin; color: #fff; content: "Stay Home Stay Safe"; font-family: sans-serif; font-size: 8vmin; left: 0; padding: 8vmin 11.4285714286vmin; position: absolute; right: 0; text-align: center; text-transform: uppercase; top: 0; } .wrapper .rainbow .arc { border: solid 3.2vmin; border-radius: 50%; bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .wrapper .rainbow .arc.red { border-color: red; } .wrapper .rainbow .arc.orange { border-color: orange; margin: 3.2.........完整代码请登录后点击上方下载按钮下载查看
网友评论0