echarts HashMap 高阶函数 分库查询 Java开发手册 security browser mockito base64 jquery获取最后一个子元素 mysql操作日志 idea整理代码格式 如何升级python java接收数组 python类和对象 python语言编程入门 python平台 javaindexof java语言 java获取当前年 java语言代码大全 获取当前时间java java集合类型 shell编程学习 雪地求生 华为线刷工具 淘宝自动发货软件 多面硬币 自动答题软件 掌门一对一下载 xapk安装器 pr加速视频 dnf传说 lol无法连接服务器 codeblock 苹果电脑数据恢复 字体模糊 ps怎么做印章效果 金融大师 方正卡通
当前位置: 首页 > 学习教程  > 编程语言

CSS动态会发光的按钮

2021/2/13 18:05:45 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

一个动态会发光的按钮 CSS动态发光按钮知识点总结&#xff1a; min-height: 100vh;设置最小行高overflow:hidden;清除浮动&#xff0c;解决外边距塌陷transition-delay: 0.5s;过渡效果等待时间 HTML部分 <!DOCTYPE html> <html lang"en"><head>…

一个动态会发光的按钮

CSS动态发光按钮

知识点总结:

  • min-height: 100vh;设置最小行高
  • overflow:hidden;清除浮动,解决外边距塌陷
  • transition-delay: 0.5s;过渡效果等待时间

HTML部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bianse.css">
    <title>Document</title>
</head>

<body>
    <a href="#">BUTTON</a>

</body>

</html>

CSS部分

body{
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
    min-height: 100vh;
}
a{
    position: relative;
    padding: 10px 30px;
    margin: 45px 0;
    color: #21ebff;
    text-decoration: none;
    font-size: 20px;
    text-transform: uppercase;
    transition: 0.5s;
    overflow:hidden;
}
a:hover{
    background: #21ebff;
    color:#111;
    box-shadow:  0 0 50px #21ebff;
    transition-delay: 0.5s;

}
a::before{
    content: "";
    position: absolute;
    top:0;
    left: 0;
    width: 10px;
    height: 10px;
    border-top: 2px solid #21ebff;
    border-left: 2px solid#21ebff;
    transition: 0.5s;
    transition-delay: 0.3s;
}
a:hover::before{
    width: 100%;
    height: 100%;
    transition-delay: 0s;
}
a::after{
    content: "";
    position: absolute;
    bottom:0;
    right: 0;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #21ebff;
    border-right: 2px solid#21ebff;
    transition: 0.5s;
    transition-delay: 0.3s;
}
a:hover::after{
    width: 100%;
    height: 100%;
    transition-delay: 0s;
}

来源于b站教学视频


本文链接: http://www.dtmao.cc/news_show_700185.shtml

附件下载

上一篇:MySQL中快速删除大表

下一篇:Hamcrest

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?