<!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. 【Vue】Re10 Webpack 第二部分(Loader)

    一.Loader解决的问题: Loader解决的问题是让webpack能够打包其他类型的文件 例如CSS.IMG等非JavaScript脚本文件 在后面我们使用Vue组件文件时也需要VueLoader ...

  2. Google的TPU的向量化内存的读取规格——单次读取/写入的数据量

    异构加速设备: GPU.TPU.NPU 这几种设备,除了GPU公开了部分硬件设计原理和软件编程范式以外,所有的TPU和NPU的资料都是不公开的,都是被其所属公司保留的,然后这些公司会自己在这些硬件之上 ...

  3. MAML —— Model-Agnostic Meta-Learning for Fast Adaptation of Deep Networks

    论文地址: https://arxiv.org/abs/1703.03400 官方代码: 有监督学习: https://github.com/cbfinn/maml 强化学习: https://git ...

  4. Apache SeaTunnel 及 Web 功能部署指南(小白版)

    在大数据处理领域,Apache SeaTunnel 已成为一款备受青睐的开源数据集成平台,它不仅可以基于Apache Spark和Flink,而且还有社区单独开发专属数据集成的Zeta引擎,提供了强大 ...

  5. SMU Summer 2023 Contest Round 1

    SMU Summer 2023 Contest Round 1 A. The Contest 当 \(m\) 为 \(0\) 和 完成时间大于最后一个时刻时,说明都无法在规定条件内完成,输出\(-1\ ...

  6. springboot之banner.txt

    在springboot启动过程中,我们经常可以看到控制台打印下面图文: 实际上这个打印图文,是可以自定义的,可以在springboot的resource中创建一个banner.txt文件,在启动时就会 ...

  7. apr库编译及队列使用笔记

    操作系统 :CentOS 7.9_x64 apr库版本:apr-1.7.4 & apr-util-1.6.3 gcc 版本:4.8.5 队列功能在C++或Python等脚本语言里面,是很容易就 ...

  8. 【Python】之操作鼠标键盘，上传文件，并支持中文

    Mac系统实现操作键盘 Python中模拟键盘和鼠标最著名的模块是:pymouse和pykeyboard.一次安装两个模块比较麻烦,而有一个库整合了这两个模块,而且能支持跨平台操作,这个库叫PyUse ...

  9. .NET 最好用的验证组件 FluentValidation

    前言 一个 .NET 验证框架,支持链式操作,易于理解,功能完善,组件内提供十几种常用验证器,可扩展性好,支持自定义验证器,支持本地化多语言. 项目介绍 FluentValidation 是一个开源的 ...

  10. HttpWebResponse 四种accept-encoding解析(gzip, deflate, br,identity【转】

    var hwrs = (HttpWebResponse)hwr.GetResponse() if (hwrs.ContentEncoding.ToLower().Contains("gzip ...