css滚动提示框效果
代码语言:html
所属分类:布局界面
代码描述:icon采用font-awesome,动画采用css
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> <style> .circle-wrapper { position: relative; width: 100px; height: 100px; float: left; margin: 10px; } .icon { position: absolute; color: #fff; font-size: 55px; top: 55px; left: 55px; transform: translate(-50%, -50%); } .circle { display: block; width: 100%; height: 100%; border-radius: 50%; padding: 2.5px; background-clip: content-box; animation: spin 10s linear infinite; } .circle-wrapper:active .circle { animation: spin 2s linear infinite; } .success { background-color: #4BB543; border: 2.5px dashed #4BB543; } .error { background-color: #CA0B00; border: 2.5px dashed #CA0B00; } .warning { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0