<!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. ArcGIS for Android入门（Java）：ViewPage + Fragment 底部导航栏添加地图

    修改为ViewPage + Fragment 可以参考里面runoob的教程:我也是参考这个修改的:这前面的网上都有很多相应的教程,我觉得这一部分的难点主要是在Fragment里面加载地图: 在fra ...

  2. 【Mycat】01 概述

    什么是Mycat? 数据库中间件 中间件:是一类连接软件组件和应用的计算机软件,以便于软件各部件之间的沟通. 例子:Tomcat,web中间件. 数据库中间件:连接java应用程序和数据库 为什么要用 ...

  3. attention机制、LSTM二者之间，是否存在attention一定优于LSTM的关系呢？

    这里没有严格的论证,只是自己的一些理解. attention机制下的Transformer确实是当前AI技术中最为火热的,基于其构建的大语言模型可以说是AI技术至今最强的技术之一了,但是attenti ...

  4. python语言下的迷宫游戏的实现猜想

    由于本人是研究AI的,尤其是AI的强化学习方向,有时候就会对一些小游戏环境的实现有几分兴趣,因为刚看了有关reinforcement learning解决maze游戏的论文,于是就突发奇想的对这个ma ...

  5. Jax框架支持的python和numpy版本

    官方: https://jax.readthedocs.io/en/latest/deprecation.html 每个推出的JAX版本都会支持45个月内推出的python,对此具体解释一下: 比如J ...

  6. 从hp的暗影精灵4来看移动cpu的实际性能表现与官方出厂性能数据之间的差距

    手上有一款暗影精灵4的笔记本,CPU为i7-9750H,官方给出的睿频为4.5Ghz,但是自己使用过程中最高睿频只能达到3.9Ghz与4.1Ghz之间,根本就没有超过4.1Ghz的时候. (图的原网址 ...

  7. vue项目之主页布局

    1.背景 2.基本结构 代码: <template> <el-container class="home-container"> <!-- 头部--& ...

  8. condition字符串匹配问题

    概述 freeswitch是一款简单好用的VOIP开源软交换平台. fs使用dialplan配置文件执行业务流程,condition条件变量的配置是必然会使用的,这里记录一次配置过程中的错误示范. 环 ...

  9. 什么是MMU

    一.MMU的定义   MMU是Memory Management Unit的缩写,中文名是内存管理单元,有时也称作分页内存管理单元(Paged Memory Management Unit,缩写为PM ...

  10. 9组-Alpha冲刺-总结

    一.基本情况 1.1基本情况(10分): 组长博客链接:https://www.cnblogs.com/Microsoft-hc/p/15585517.html 1.2现场答辩总结 PPT上缺少了组内 ...