<!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. Python+selenium编写第一个UI自动化脚本

    python UI自动化前提:①python需要安装selenium模块  ②下载浏览器驱动 1.安装selenium模块 先确认本地是否安装selenium模块,没有的话点击右边的添加按钮" ...

  2. 【Zookeeper】Re01 安装与操作

    Zookeeper基于JDK开发出来的 运行环境至少需要JRE 快速安装JDK: yum install -y java-1.8.0-openjdk-devel.x86_64 # ZK镜像仓库 htt ...

  3. 【C】Re01

    一.GCC分步编译 xxx.c文件经历的一系列编译过程: #include <stdio.h> int main() { printf("Hello, World!\n" ...

  4. 【Java】IDEA普通JavaEE项目实现SSM整合

    一.需要的组件 首先是解决组件问题,非Maven项目构建的jar包 [Servlet & JSP & JSTL] 虽然不是Maven项目,但是JSTL的组件是需要引入的 这里就按照Ma ...

  5. 从.net开发做到云原生运维(一)——从.net framework过渡到.net core

    1. 前言 序篇讲了自己的一些感悟和经历,从这章开始就开始讲一些.net技术栈的东西了. 2. .net framework和.net core对比 .NET Framework 概述 .NET Fr ...

  6. JAVA 两个类同时实现同一个接口的方法

    在Java中,两个类同时实现同一个接口是非常常见的.接口定义了一组方法,实现接口的类必须提供这些方法的具体实现.以下将展示如何实现这一要求,并提供具体的代码示例. 示例接口 首先,定义一个简单的接口, ...

  7. 【全】CSS动画大全之按钮【c】

    效果预览 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  8. [SHOI2009] 会场预约 题解

    LG2161 显然: 任意时刻每个点最多被一条线段覆盖 暴力删每条线段的复杂度是对的 插入 \([l,r]\) 时需要删除的线段要么被 \([l,r]\) 包含,要么覆盖 \(l\) 或 \(r\) ...

  9. element-ui 表格控制列显隐简单方案

    核心是使用v-if控制列的显隐 <template> <div> <div v-for="(item, index) in tables" :key= ...

  10. ubuntu 16.04 安装Python3.8虚拟环境

    virtualenv为应用提供了隔离的Python运行环境,可以解决不同应用间多版本的冲突问题. virtualenv会把用户指定版本的python复制到虚拟环境下,并修改相关的环境变量,使得pyth ...