檬味博客 » 问答 » css怎么实现一条直线向右逐渐延伸显示

css怎么实现一条直线向右逐渐延伸显示

用css3动画去做 00.xian{ width:50px; height:1px; background:#000000; margin-top:100px;}.xian{animation: myfirst 5s;}@keyframes myfirst{from {width: 50px;}to {width: 1000px;}}低版本浏览器不支持css3属性，用谷歌什么的高版本浏览器看。实现是实现了，但是可能有...
css怎么实现一条直线向右逐渐延伸显示
实现是实现了，但是可能有些蠢。你看看行不。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title><style type="text/css"> .container{ width: 100%; height: 2px; box-sizing: border-box; } .line{ float: left; padding: 0; margin: 0; width: 2px; height: 2px; background: red; -webkit-animation: test 3s linear 0s 1 alternate; -moz-animation: test 3s linear 0s 1 alternate; -o-animation: test 3s linear 0s 1 alternate; animation: test 3s linear 0s 1 alternate; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; } .line:last-child{ border-right: 1px solid blueviolet; } @-webkit-keyframes test { 0%{ width: 2px; } 10%{ width: 3px; } 20%{ width: 4px; } 30%{ width: 5px; } 40%{ width: 6px; } 50%{ width: 7px; } 60%{ width: 8px; } 70%{ width: 9px; } 80%{ width: 10px; } 90%{ width: 11px; } 100%{ width: 12px; } }</style></head><body><div class="container"> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div></div></body></html>2016-05-23
用css3动画去做
<!doctype html><html><head><meta charset="utf-8"><title>00</title><style>.xian{ width:50px; height:1px; background:#000000; margin-top:100px;}.xian{animation: myfirst 5s;}@keyframes myfirst{from {width: 50px;}to {width: 1000px;}}</style></head><body><div class="xian"></div></body></html>低版本浏览器不支持css3属性，用谷歌什么的高版本浏览器看。
2017-09-01

进度条形式做
2020-01-16
什么意思，就像进度条那样么？2016-05-23
mengvlog 阅读 27 次 更新于 2025-09-08 06:24:17 我来答关注问题0
4 个回答檬味博客专题活动
  • 谷歌vuv 怎么实现一条直线向右逐渐延伸显示

    -webkit-animation: test 3s linear 0s 1 alternate;-moz-animation: test 3s linear 0s 1 alternate;-o-animation: test 3s linear 0s 1 alternate;animation: test 3s linear 0s 1 alternate;-webkit-animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-o-animation-fill-mode...

  • 文暄生活科普 用CSS如何设置网页渐变背景?

    如果想要创建一个对角线渐变的图像，我们可以使用多关键字的方式来实现。例如，background-image: linear-gradient(to top left, #ff0000, #00ff00);表示从左上角到右下角创建一个从红色到绿色的渐变。在使用linear-gradient()设置背景渐变时，需要注意的是，它可以创建多种类型的渐变，包括线性渐变和...

  • 翡希信息咨询 深入探索CSS中的渐变艺术:线性渐变、径向渐变与锥形渐变详解

    实现方式：通过指定渐变角度和颜色过渡来创建。例如，从红色到黄绿色再到蓝色的顺时针锥形渐变。应用场景：常用于创建独特的背景效果、动态过渡动画以及模拟光线或阴影的复杂效果。总结：CSS渐变是提升网页设计表现力的强大工具，通过熟练运用线性、径向和锥形渐变，可以创造出丰富多彩的视觉效果。然而，在实际应...

  • 湖北倍领科技 css背景颜色怎么实现渐变效果

    线性渐变是一种渐变方式，它按照一定的直线方向从一种颜色平滑过渡到另一种颜色。例如，从上到下的线性渐变可以通过以下CSS代码实现：grad { background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0...

  • 武汉誉祥科技 栏间分隔线怎么弄

    1. 使用CSS：可以通过设置元素的border-top，border-bottom或border-left，border-right来实现栏间分隔线的功能，如“border-bottom:2px solid #000;”，添加后会产生一条2px宽度、颜色为黑色的直线。2. 使用图片：可以使用图片作为栏间分隔线，将图片作为背景图然后设置元素的height属性，从而实现栏间...

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部