资讯专栏INFORMATION COLUMN

前端每日实战:44# 视频演示如何用纯 CSS 创作背景色块变换的按钮特效

Shisui / 1250人阅读

摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

效果预览

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

https://codepen.io/comehope/pen/XYKdwg

可交互视频教程

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/cM7RLUG

源代码下载

每日前端实战系列的全部源代码请从 github 下载:

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom,标准导航结构下,

  • 中的每个字母用 包裹:

    居中显示:

    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(to right bottom, dimgray, black);
    }

    定义文字样式:

    ul {
        padding: 0;
    }
    
    li {
        list-style-type: none;
    }
    
    li span {
        color: white;
        font-size: 50px;
        font-family: monospace;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }

    当鼠标悬停时,用伪元素绘制倾斜的背景色块:

    li span {
        position: relative;
        transition: 500ms;
    }
    
    li:hover span {
        color: #333;
    }
    
    li span::before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0;
        z-index: -1;
        transition: 500ms;
    }
    
    li:hover span::before {
        width: 70%;
        transform: rotate(-25deg);
        background: white;
    }

    设置缓动延时,增加动画效果:

    li:hover span {
        transition-delay: calc(80ms * var(--n) + 10ms);
    }
    
    li:hover span::before {
        transition-delay: calc(80ms * var(--n));
    }
    
    li span:nth-child(1) {
        --n: 1;
    }
    
    li span:nth-child(2) {
        --n: 2;
    }
    
    li span:nth-child(3) {
        --n: 3;
    }
    
    li span:nth-child(4) {
        --n: 4;
    }
    
    li span:nth-child(5) {
        --n: 5;
    }
    
    li span:nth-child(6) {
        --n: 6;
    }
    
    li span:nth-child(7) {
        --n: 7;
    }
    
    li span:nth-child(8) {
        --n: 8;
    }

    在单词左侧增加一条鼠标悬停时变亮的竖线:

    li {
        padding-left: 2em;
        border: 2px solid transparent;
        border-left-color: silver;
        transition: 500ms;
    }
    
    li:hover {
        border-left-color: white;
    }

    dom 中增加几个按钮,形成一组按钮:

    最后,文字居中对齐,再调整一下按钮间距:

    li {
        text-align: center;
        margin: 1em 0;
    }

    大功告成!

  • 文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

    转载请注明本文地址:https://www.ucloud.cn/yun/52474.html

    相关文章

    • 前端每日实战44# 视频演示何用 CSS 创作背景色块变换按钮特效

      摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 showImg(https://segmentfault.com/img/bVbbUlU?w=500&h=500); 效果预览 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comeh...

      Jenny_Tong 评论0 收藏0
    • 前端每日实战 2018 年 6 月份项目汇总(共 27 个项目)

      摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书视频演示如何用纯创作一个表达怀念童年心情的条纹彩虹心特效视频演示如 过往项目 2018 年 5 月份项目汇总(共 30 个项目) 2018 年 4 月份项目汇总(共 8 个项目) 2018 年 6 月份发布的项目 ...

      jokester 评论0 收藏0
    • 前端每日实战 2018 年 6 月份项目汇总(共 27 个项目)

      摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书视频演示如何用纯创作一个表达怀念童年心情的条纹彩虹心特效视频演示如 过往项目 2018 年 5 月份项目汇总(共 30 个项目) 2018 年 4 月份项目汇总(共 8 个项目) 2018 年 6 月份发布的项目 ...

      dingding199389 评论0 收藏0

    发表评论

    0条评论

    最新活动
    阅读需要支付1元查看
    <