css实现多行文字多种划线高亮动画显示效果
代码语言:html
所属分类:布局界面
代码描述:css实现多行文字多种划线高亮动画显示效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { font-family: Arial; font-size: 1.5rem; line-height: 150%; } .container { max-width: 600px; margin: 0 auto; padding: 1em; } .container h1 { font-size: 2.2rem; } .container .instruction { font-size: 2rem; margin-bottom: 4rem; font-style: italic; } .content { margin-bottom: 4em; } .content p { display: inline; background-repeat: no-repeat; transition: all 500ms ease-in-out; } .v1 p { background-position: bottom left; background-size: 0% 5px; background-image: linear-gradient(#ff2b00, #ff2b00); padding-bottom: 5px; } .v1:hover p { background-size: 100% 5px; } .v2 p { background-position: left; background-size: 0% 100%; background-image: linear-gradient(#75f09e, #75f09e); } .v2:hover p { background-size: 100% 100%; } .v3 p { color: transparent; background-position: right; background-size: 100% 100%; background-image: linear-gradient(#759ef0, #759ef0); } .v3:hover p { color: #000; background-size: 0% 100%; } .v4 p { background-position: bottom left; background-size: 0% 3px; background-image: repeating-linear-gradient(to right, #7f00ff 0 3px, transparent 0 6px); padding-bottom: 3px; } .v4:hover p { background-size: 100% 3px; } .v5 p { background-position: center left; background-size: 100% 3px; background-image: linear-gradient(to right, #000, #000); padding-bottom: 3px; } .v5:hover p { background-size: 100% 100%; color: #fff; background-image: linear-gradient(to right, #ff2b00, #ff2b00); } .v6 p { background-position: center left; background-size: 100% 4px; background-image: linear-gradient(to right, #000, #000); padding-bottom: 4px; } .v6:hover p { background-position: bottom left; background-size: 100% 2px; font-style: italic; } .v7 p { background-position: left; background-size: 0% 100%; background-image: linear-gradient(to right, #75f09e, #75f09e); } .v7:hover p { background-position: right; background-size: 100% 100%; } .v8 p { background-position: left; background-size: 0% 100%; background-image: linear-gradient(to right, #75f09e, #ff0); padding-bottom: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .v8:hover p { background-size: 100% 100%; } </style> </head> <body translate="no"> <div class="container"> <div class=&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0