通过 Markdown+CSS 实现文章的动画效果

本贴最后更新于 2450 天前,其中的信息可能已经时移世异

补上代码

<style> .container { width: 280px; margin: 0 auto; padding: 40px 0; background-color: #f0f3f9; animation: width 2s infinite alternate; } @keyframes width { from { width: 200px; } to { width: 280px; } } .textarea { padding: 9px 8px; border: 1px solid #d0d0d5; border-radius: 4px; background-color: #fff; } .textarea > textarea { width: 100%; line-height: 20px; padding: 0; border: 0 none; outline: 0 none; background: none; resize: none; } </style> <div class="container"> <div class="textarea"> <textarea rows="5" placeholder="文本内容,这里可以输入文本"></textarea> </div> </div>
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    198 引用 • 541 回帖 • 1 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    108 引用 • 295 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • szy0syz via macOS

    刚转 vuepress,我说进来看看代码呢😂

  • vinasis

    没有代码啊

  • owsieman
    作者

    忘记给出代码了:在这里补上

    <style> .container { width: 280px; margin: 0 auto; padding: 40px 0; background-color: #f0f3f9; animation: width 2s infinite alternate; } @keyframes width { from { width: 200px; } to { width: 280px; } } .textarea { padding: 9px 8px; border: 1px solid #d0d0d5; border-radius: 4px; background-color: #fff; } .textarea > textarea { width: 100%; line-height: 20px; padding: 0; border: 0 none; outline: 0 none; background: none; resize: none; } </style> <div class="container"> <div class="textarea"> <textarea rows="5" placeholder="这里是代码:<style> .container { width: 280px; margin: 0 auto; padding: 40px 0; background-color: #f0f3f9; animation: width 2s infinite alternate; } @keyframes width { from { width: 200px; } to { width: 280px; } } .textarea { padding: 9px 8px; border: 1px solid #d0d0d5; border-radius: 4px; background-color: #fff; } .textarea > textarea { width: 100%; line-height: 20px; padding: 0; border: 0 none; outline: 0 none; background: none; resize: none; } </style> <div class="container"> <div class="textarea"> <textarea rows="5" placeholder="文本内容,这里可以输入文本"><textarea> <div> <div>
  • someone

    😜 代码已经补上了

  • someone

    😜 代码已经补上了

推荐标签 标签

  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    267 引用 • 666 回帖
  • 创业

    你比 99% 的人都优秀么?

    82 引用 • 1395 回帖
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1707 回帖
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 402 关注
  • SQLite

    SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    5 引用 • 7 回帖
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 353 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 659 关注
  • 音乐

    你听到信仰的声音了么?

    61 引用 • 512 回帖
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    425 引用 • 1250 回帖 • 598 关注
  • 工具

    子曰:“工欲善其事,必先利其器。”

    295 引用 • 749 回帖
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    54 引用 • 37 回帖
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖 • 1 关注
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 759 关注
  • Word
    13 引用 • 40 回帖
  • Sillot

    Insights(注意当前设置 master 为默认分支)

    汐洛彖夲肜矩阵(Sillot T☳Converbenk Matrix),致力于服务智慧新彖乄,具有彖乄驱动、极致优雅、开发者友好的特点。其中汐洛绞架(Sillot-Gibbet)基于自思源笔记(siyuan-note),前身是思源笔记汐洛版(更早是思源笔记汐洛分支),是智慧新录乄终端(多端融合,移动端优先)。

    主仓库地址:Hi-Windom/Sillot

    文档地址:sillot.db.sc.cn

    注意事项:

    1. ⚠️ 汐洛仍在早期开发阶段,尚不稳定
    2. ⚠️ 汐洛并非面向普通用户设计,使用前请了解风险
    3. ⚠️ 汐洛绞架基于思源笔记,开发者尽最大努力与思源笔记保持兼容,但无法实现 100% 兼容
    29 引用 • 25 回帖 • 105 关注
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    85 引用 • 165 回帖
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    143 引用 • 442 回帖 • 2 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 604 关注
  • Follow
    4 引用 • 12 回帖 • 6 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    56 引用 • 85 回帖
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    584 引用 • 3537 回帖 • 1 关注
  • 倾城之链
    23 引用 • 66 回帖 • 158 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    58 引用 • 22 回帖 • 1 关注
  • abitmean

    有点意思就行了

    29 关注
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖
  • 人工智能

    人工智能(Artificial Intelligence)是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    153 引用 • 280 回帖
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    116 引用 • 54 回帖 • 2 关注