css技能进度条表现效果

这篇具有很好参考价值的文章主要介绍了css技能进度条表现效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
        }
        
        * {
            box-sizing: border-box;
        }
        
        ul,
        li {
            margin: 0;
            padding: 0;
        }
        
        main {
            display: flex;
            align-items: center;
            height: 100vh;
            justify-content: center;
            background-color: #1e272e;
        }
        
        ul {
            width: 500px;
        }
        
        li {
            list-style: none;
            color: #d2dae2;
            font-size: 18px;
            margin: 48px 0;
            position: relative;
        }
        
        li::before,
        li::after {
            content: '';
            display: block;
            height: 16px;
            width: 100%;
            background-color: #1f4a59;
            position: absolute;
            bottom: -28px;
            border-radius: 6px;
        }
        
        li::before {
            box-shadow: 0 0 6px rgba(75, 207, 250, 0.2);
        }
        
        li::after {
            background-image: linear-gradient(90deg, #0fbcf9, #34e7e4);
            animation-duration: 1.2s;
            animation-fill-mode: forwards;
            animation-timing-function: ease-in-out;
        }
        
        .js::after {
            animation-name: js;
        }
        
        .react::after {
            animation-name: react;
        }
        
        .html5::after {
            animation-name: html5;
        }
        
        .css3::after {
            animation-name: css3;
        }
        
        .sketch::after {
            animation-name: sketch;
        }
        
        @keyframes js {
            from {
                width: 0;
            }
            to {
                width: 90%;
            }
        }
        
        @keyframes react {
            from {
                width: 0;
            }
            to {
                width: 80%;
            }
        }
        
        @keyframes html5 {
            from {
                width: 0;
            }
            to {
                width: 70%;
            }
        }
        
        @keyframes css3 {
            from {
                width: 0;
            }
            to {
                width: 60%;
            }
        }
        
        @keyframes sketch {
            from {
                width: 0;
            }
            to {
                width: 50%;
            }
        }
    </style>
</head>

<body>
    <main>
        <ul>
            <li class="js">JS</li>
            <li class="react">React</li>
            <li class="html5">HTML5</li>
            <li class="css3">CSS3</li>
            <li class="sketch">Sketch</li>
        </ul>
    </main>
</body>

</html>

效果图:
css技能进度条表现效果,css,前端文章来源地址https://www.toymoban.com/news/detail-816632.html

到了这里,关于css技能进度条表现效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS样式前端HTML页面常用CSS效果实现及其相关配置信息------前端入门基础教程

    !DOCTYPE html !-- 这是HTML的注释 -- html lang=\\\"en\\\" id=\\\"myHtml\\\"     head         !-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 --         meta charset=\\\"UTF-8\\\"         meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"         titleHtmlAll/title         

    2024年02月05日
    浏览(59)
  • 炫酷UI前端效果的CSS生成工具

    它创造了一种全新的UI风格。来自世界各地的设计师已经在Dribbble和Behance上看到了引人注目的中性设计。 而且这个工具,可

    2024年02月12日
    浏览(39)
  • 前端必学的CSS3波浪效果演示

    使用 translateX 和 translateZ 属性创建波浪效果: 使用场景: 适用于需要在X轴上平移和在Z轴上应用3D变换的波浪效果。 可以用于创建具有起伏效果的海浪、水面波纹等效果。 优点: 通过3D变换,可以实现更加真实的波浪效果。 可以通过调整 translateX 和 translateZ 的值来控制波浪

    2024年02月02日
    浏览(49)
  • 前端css/less绕椭圆轨道旋转动画 带遮挡效果 3D

    效果如图,多个物体在轨道上绕中心物体旋转,当旋转到物体后面时将被遮挡。主要使用css实现,为了简化代码,引入less进行处理。 本质上是使用动画控制轨道带动内部的物体进行旋转,计算出每个物体在椭圆轨道上的位置,使用绝对定位放置物体。由于轨道上物体有多个

    2024年02月03日
    浏览(93)
  • 探究前端的跑马灯效果是如何用css实现的

    💖 作者简介:大家好,我是阿牛,全栈领域优质创作者😜 📝 个人主页:馆主阿牛🔥 🎉 支持我:点赞👍+收藏⭐️+留言📝 📣 系列专栏:前端实用小demo🍁 💬格言:迄今所有人生都大写着失败,但不妨碍我继续向前!🔥 无意见看到了一个网站的一个动画的跑马灯效果

    2024年04月10日
    浏览(41)
  • 前端使用scale属性结合CSS动态样式实现动态的图片缩放效果

    废话不多说,直接上代码: 示例一,使用css动态样式结合scale进行src图片的缩放。 示例二,使用css动态样式结合scale进行background背景图图片的缩放。

    2024年01月15日
    浏览(63)
  • 〖大前端 - 基础入门三大核心之CSS篇㉓〗- 过渡的缓动效果

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2023年04月15日
    浏览(40)
  • 前端小技巧:学会通过CSS Hover和JS实现图片放大镜效果

    数据来源: ChatGPT 今天,我们来看一个鼠标悬停出现图片放大镜效果,这是一个比较实用且炫酷的纯CSS和JS实现的页面效果。 HTML HTML代码非常简单,我们只需要一个div容器,内部嵌入一张图片,再添加一个用来显示放大镜的div元素。 CSS CSS代码是实现放大镜效果的重要部分,

    2024年02月02日
    浏览(73)
  • 策略复杂性增加,难以理解和维护,影响安全效果和性能表现

    随着互联网技术的迅速发展,网络攻击日益猖獗。为了提高网络安全效果和性能表现,我们需要更加深入地了解和管理防火墙策略。本文将围绕以下三个问题进行分析和提出解决方案: 问题一:策略复杂性增加 随着网络攻击的复杂程度不断提高,防火墙需要处理的攻击类型

    2024年02月03日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包