css+div实现border边框动画效果代码
代码语言:html
所属分类:动画
代码描述:css+div实现border边框动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,700"); /* global vars */ /* reset & base */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { padding: 0; margin: 0; overflow-x: hidden; } html { font-size: 62.5%; } body { background-color: #1f2029; color: #ececec; font-family: "Montserrat", sans-serif; font-weight: 400; font-size: 1.4rem; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } .container { display: flex; width: 100%; min-height: 100vh; align-items: center; flex-direction: column; overflow: hidden; } .container h1 { width: 100%; margin: 20vh 0 10vh 0; font-size: clamp(3rem, 4vw, 4rem); font-weight: 300; color: #ececec; text-align: center; } .container .avatar__box { display: flex; width: 20rem; height: 20rem; align-self: center; flex-direction: column; border-radius: 2rem; filter: drop-shadow(0.2rem 0.4rem 0.6rem rgba(0, 0, 0, 0.75)); transition: 0.25s ease all; overflow: hidden; } .container .avatar__box .avatar__box-inner { position: relative; display: flex; width: 100%; height: 100%; padding: 1em; background-color: rgba(92, 0, 0, 0.35); overflow: hidden; } .container .avatar__box .avatar__box-inner .line { position: absolute; background: #ff0000; filter: blur(0.2rem); opacity: 0.7; } .container .avatar__box .avatar__box-inner .line:nth-of-type(1) { top: 0.1rem; left: -100%; width: 100%; height: 1rem; border-top-left-radius: 100%; border-top-right-radius: 1rem; border-bottom-right-radius: 1rem; border-bottom-left-radius: 100%; -webkit-animation: animate-left 1s linear infinite; animation: animate-left 1s linear infinite; } .container .avatar__box .avatar__box-inner .line:nth-of-type(2) { top: -100%; right: 0.1rem; width: 1rem; height: 100%; border-top-left-radius: 100%; border-top-right-radius: 1rem; border-bottom-right-radius: 1rem; border-bottom-left-radius: 100%; -webkit-animation: animate-top 1s linear infinite; animation: animate-top 1s linear infinite; -webkit-animation-delay: 0.25s; animation-delay: 0.25s; } .container .avatar__box .avatar__box-inner .line:nth-of-type(3) { bottom: 0.1rem; right: -100%; width: 100%; height: 1rem; border-top-left-radius: 100%; border-top-right-radius: 1rem; border-bottom-right-radius: 1rem; border-bottom-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0