<!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. batch normalization的multi-GPU版本该怎么实现？ 【Tensorflow 分布式PS/Worker模式下异步更新的情况】

    最近由于实验室有了个AI计算平台,于是研究了些分布式和单机多GPU的深度学习代码,于是遇到了下面的讨论: https://www.zhihu.com/question/59321480/answer/ ...

  2. 【转载】 Python格式化字符串f-string概览

    版权声明:本文为CSDN博主「sunxb10」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/sunxb10/a ...

  3. windows系统下最新版gym[atari]中的游戏环境（此时最新版的gym为0.24.0，gym==0.24.0)

    关于gym[atari]的安装参看以前的博文: windows系统下安装最新版gym的安装方法(此时最新版的gym为0.24.0,gym==0.24.0) 上代码: import time impor ...

  4. Windows系统下硬盘S.M.A.R.T硬盘检测工具——硬盘检测工具（CrystalDiskInfo）

    CrystalDiskInfo是由日本人hiyohiyo个人开发的小工具,能全面详细直观的检查硬盘的健康状态及各种参数. 绿色版软件. 官方下载地址: https://crystalmark.info ...

  5. JS Map对象与map方法

    前言  最近遇到一个遍历的问题,查资料的过程中,发现有个 Map 对象,提供了很多方法可以轻松地获取我们想要的数据,之前只知道有 map ,没想到还有 Map ,是不是有点绕?不急,这两个东西都是虽然 ...

  6. 获取Windows个性化中自带的聚焦锁屏

    想要保存登录屏幕(锁屏界面)的背景图片,可以通过以下脚本一键获取: @echo off setlocal enabledelayedexpansion :: Windows Spotlight 锁屏图 ...

  7. MYSQL——帆软连接报错

    2024/07/11 1.报错 2.报错原因 3.解决办法 4.参考 1.报错 错误代码:11300001 数据集配置错误<br>Query:<br>Unknown initi ...

  8. 零基础学习人工智能—Python—Pytorch学习（八）

    前言 本文介绍卷积神经网络的上半部分. 其实,学习还是需要老师的,因为我自己写文章的时候,就会想当然,比如下面的滑动窗口,我就会想当然的认为所有人都能理解,而实际上,我们在学习的过程中之所以卡顿的点多 ...

  9. 将文件的换行符由 CRLF 转换为 LF

    在 DOS/Windows 文本文件中,换行,也称为新行,是两个字符的组合:回车(CR)后跟一个换行(LF).在 Unix 文本文件中,一行的换行是单个字符:换行(LF).在 Mac 文本文件中,在 ...

  10. 【Appium】之自动化定位总结

    一.同级定位时,先定位上级 我想定位[必填]框,我先定位[姓名]的同一个上级 self.driver.find_element(MobileBy.XPATH,"//*[contains(@t ...