<!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. Jmeter参数化4-数据库数据引入

    1. 下载jmeter依赖的mysql驱动包 jmeter要连接mysql数据库,首先得下载mysql驱动包.执行"select version()"查看数据库版本 mysql历史 ...

  2. 【H5】11 表格

    概述: 在HTML中一个很普通的任务是构建表格数据,有大量的元素和属性是来满足这种需求的. 只需要一点儿的CSS来设定风格,HTML让在web上显示表格数据变的很容易,例如你的学校的教学计划,你当地的 ...

  3. 推荐一个优秀的 .NET MAUI 组件库

    前言 .NET MAUI 的发布,项目中可以使用这个新的跨平台 UI 框架来轻松搭建的移动和桌面应用. 为了帮助大家更快地构建美观且功能丰富的应用,本文将推荐一款优秀的 .NET MAUI 组件库MD ...

  4. XSS 基本概念和原理介绍

    XSS 基本概念和原理介绍 基本概念 跨站脚本攻击 XSS(Cross Site Scripting),为了不和层叠样式表 ( Cascading Style Sheets,CSS ) 的缩写混淆,故 ...

  5. ubuntu 安装psycopg2包

    psycopg2 库是 python 用来操作 postgreSQL 数据库的第三方库. 执行:pip3 install psycopg2==2.8.4 有可能会报错: Collecting psyc ...

  6. java游戏服务器2023年7月22日

    name 卡牌军团 放置卡牌游戏 开发语言: java mysql 通信http 账号服务器 提供验证等功能 中心服务器 跨服功能 排行榜 公会

  7. java_类属性&对象属性

    访问类属性方式有两种: 对象.类属性 类.类属性 但是理解上第一种方法存在小小小问题, 逻辑没问题 2022年7月31日18:44:29

  8. elasticsearch单机版安装及安装过程踩的坑整理

    elasticsearch单机版安装及安装过程踩的坑整理 环境及版本 Linux版本:centos7.3 JDK版本:1.8 Elasticsearch版本: Linux用户:esuser 说明:因为 ...

  9. box-sizing属性的理解

    使用原因 盒模型布局中padding与border也是具有尺寸的,为避免其对页面布局产生影响,可使用box-sizing: border-box;属性设置盒模型,此时便可只用设置元素宽高即可. 属性详 ...

  10. 基于GitLab+Jenkin-CICD方案实践

    前言 笔录于2022- 官网:https://about.gitlab.com/ 参考文档:https://docs.gitlab.com/ee/ci/ 清华源:清华大学开源软件镜像站 | Tsing ...