<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>直线拉伸示例</title>

  <style>

    .line {

      height: 2px;

      background-color: black;

      animation: stretch-line 1s ease-in-out forwards;

    }

    @keyframes stretch-line {

      0% {

        width: 0;

      }

      100% {

        width: 200px; /* 指定直线长度 */

      }

    }

  </style>

</head>

<body>

  <div class="line"></div>

</body>

</html>

css实现直线拉伸的更多相关文章

  1. CSS背景图拉伸自适应尺寸，全浏览器兼容

    突然有人问我这个问题,说网上CSS filter的方法在非IE浏览器下不奏效.思考之后,问题之外让我感慨万千啊,很多我们所谓的难题,都会随着时代的发展迎刃而解,或被新的问题所取代. 当CSS背景图片拉 ...

  2. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

  3. 兼容各浏览器的css背景图片拉伸代码

    需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , s ...

  4. css背景图片拉伸

    css背景图片拉伸 background-image:url(bg.png); -moz-background-size: 100% 100%; -o-background-size: 100% 10 ...

  5. CSS背景图拉伸不变形

    在线效果体验:http://hovertree.com/texiao/mobile/3.htm 请使用手机浏览器查看. css代码: .bg{ background:url(http://hovert ...

  6. css 背景图片拉伸[转]

    http://www.jeasyuicn.com/css-background-image-stretching.html background-image:url(bg.png); -moz-bac ...

  7. CSS背景图拉伸自适应尺寸

    .bg{ background:url(images/test.jpg); filter:"progid:DXImageTransform.Microsoft.AlphaImageLoade ...

  8. css解决图片拉伸问题

    在实际场景中,我们经常会遇到图片大小固定的需求,但是由于原始图片大小,比例不一样,不同图片以相同的大小展示会参差不齐.解决方法就是object-fit或者background-size属性.他们的区别 ...

  9. CSS之viewport 1

    在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕. 这篇文章是关于桌面浏览器的,其唯一的目的就是为移动浏览器中 ...

  10. CSS特效汇集

    http://www.lanrenzhijia.com/js/css3/ http://js.mobanwang.com/special/allcss/ 其他效果:http://www.cnblogs ...

随机推荐

  1. JavaScript 中的闭包和事件委托

    包 (Closures) 闭包是 JavaScript 中一个非常强大的特性,它允许函数访问其外部作用域中的变量,即使在该函数被调用时,外部作用域已经执行完毕.闭包可以帮助我们实现数据的私有化.封装和 ...

  2. 【HTML】hr标签 分割线 自定义样式

    参考: https://blog.csdn.net/weixin_40716682/article/details/90064473 默认是有边框线的 删除边框线,设置高度和背景色即可 backgro ...

  3. Ubuntu的性能模式与省电模式：进行科学计算时一定要手动将Ubuntu的CPU模式设置为性能模式

    不论是什么系统,windows11还是Ubuntu.Centos.RedHat,其运行时都有一个运行模式的概念,其实这个运行模式就是CPU的性能模式,一般可以分为性能模式和省电模式两种,当然也有介于两 ...

  4. VScode调试C++工程

    相关: Linux环境下配置vscode的C/C++编译环境 本文主要参考: https://zhuanlan.zhihu.com/p/385276301 ====================== ...

  5. 【转载】 tmux 向上向下翻页，翻屏

    作者:江河湖海洋链接:https://www.jianshu.com/p/8835f2d4245f来源:简书著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. =========== ...

  6. C# 命名空间和程序集 小记

    前言 本文只是为了复习,巩固,和方便查阅,一些知识点的详细知识会通过相关链接和文献标记出来. 命名空间 1.1 概念 可以把命名空间看做字符串,他加在类名或类型名前面并且通过点进行分割 既然看做是字符 ...

  7. impdp/expdp报错: ORA-39064: 无法写入日志文件 ORA-29285: 文件写入错误

    问题现象 Windows服务器导入/导出Oracle 11g数据库出现如下报错提示,输出的日志文件从报错位置往后不再输出. ORA-39064: 无法写入日志文件 ORA-29285: 文件写入错误 ...

  8. 记一次 .NET某环境监测系统 崩溃分析

    一:背景 1. 讲故事 前些天有位朋友找到我,说他们的程序崩溃了,也自己分析了下初步结果,让我帮忙再确认下,既然让我确认,那就开始dump分析之旅吧. 二:WinDbg 分析 1. 为什么会崩溃 wi ...

  9. 结果集为List如何转为Map<String,List<Entity>>?

    普通写法 Map<String, List<Model>> map = new HashMap<>();// 如何获取相同的num 的对象做运算 for (Mode ...

  10. 推荐一款Python开源移动应用安全测试分析工具！！！

    今天给大家推荐一个安全测试相关的开源项目:nccgroup/house 1.介绍 它是一个由 NCC Group 开发的,一个基于Frida和Python编写的动态运行时移动应用分析工具包,提供了基于 ...