CSS3边框会动的信封
<!DOCTYPE html>
<html> <head>
<title>酷炫的CSS3</title>
<meta charset="utf-8">
</head>
<style>
@keyframes ants {
to {
background-position: 100%;
}
} .demo {
display: block;
margin: 200px auto;
width: 300px;
height: 200px;
border: 1em solid transparent;
background: linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em;
animation: ants 12s linear infinite;
}
</style>
<body>
<div class="demo"></div>
</body> </html> 静态效果图:
CSS3边框会动的信封的更多相关文章
- CSS3 -- 边框圆角
文章后有彩蛋哦 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- HTML 学习笔记 CSS3 (边框)
CSS3边框 通过CSS3边框 你能够创建远角边框 向矩形边框添加阴影 使用图片来绘制边框 . CSS3的边框属性 主要包含以下几种 border-radius 边框圆角 box-shadow 边框阴 ...
- [HTML] CSS3 边框
CSS3 边框 用CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如Photoshop. 在本章中,您将了解以下的边框属性: border-radius box-shado ...
- CSS3边框温故
1.简介:border属性在CSS1中就已经定义了,用来设置元素边框风格,设置不同的边框.颜色.粗细 2.基本属性,包括三个类型值:(1)border-width:设置元素边框的粗细,默认3~4px( ...
- css3 边框记
css3 边框 border属性在css1中就已经定义了,使用它可以设置元素的边框风格,边框颜色以及边框粗细. border-width:设置元素边框的粗细. border-color:设置元素边框的 ...
- CSS3 边框
说明:CSS3完全向后兼容,因此不必改变现有的设计.浏览器通常支持CSS2 CSS3模块 CSS3被划分为模块: 选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面 CS ...
- 第八十节,CSS3边框图片效果
CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释 CSS3 ...
- css3边框与背景
一.css3边框 1.border-image 边框 border-image: url(xxx.png) number stretch 很好理解就是拉伸,有多长拉多长. repeat (和4角上 同 ...
- 第95天:CSS3 边框、背景和文字效果
1.CSS3边框: border-radius:CSS3圆角边框.在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,bo ...
随机推荐
- python3 练习题100例 (二十七)列表元素改写
题目内容: 输入一个列表alist,要求列表中的每个元素都为正整数且不超过10: 将列表中的奇数变为它的平方,偶数除以2后打印新的列表(新的列表中所有元素仍都为整数). 可以使用以下实现列表alist ...
- jmeter测试报告优化
1.下载jmeter.results.shanhe.me.xsl 将该文件拷贝到jmeter\extras目录下 2.修改jmeter.results.shanhe.me.xsl 这里直接拷贝 jme ...
- 【struts2】struts2的使用
1.使用步骤 1) 导入struts2的支持jar包 名称 说明 struts2-core-2.3.4.1.jar Structs2的核心类库 xwork-core-2.3.4.1.jar xwork ...
- 9-C++远征之多态篇-学习笔记
C++远征之多态篇 面向对象三大特征:封装,继承,多态 多态: 发出一条命令时,不同的对象接收到同样的命令做出的动作不同 多态篇会学习到的目录: 普通虚函数 & 虚析构函数 纯虚函数:抽象类 ...
- HyperLedger Fabric 1.4 超级账本起源(5.1)
至比特币开源以来,无数技术人员对其进行研究,并且对该系统经过了无数次改进,超级账本项目(Hyperledger)最初也是用来改善比特币的底层技术,最终由Linux基金会组织发展起来. 开放 ...
- struts2学习笔记一
一.框架概述 1.框架的意义与作用: 所谓框架,就是把一些繁琐的重复性代码封装起来,使程序员在编码中把更多的经历放到业务需求的分析和理解上面. 特点:封装了很多细节,程序员在使用的时候会非常简单. 2 ...
- P2419 [USACO08JAN]牛大赛Cow Contest
P2419 [USACO08JAN]牛大赛Cow Contest 题目背景 [Usaco2008 Jan] 题目描述 N (1 ≤ N ≤ 100) cows, conveniently number ...
- elasticsearch-mathc和term的区分
elasticsearch和mysql在思想上是有不同的,elasticsearch有分词一说,比如北京奥运分词成北京,奥运,北京奥运.分词要要考虑两点,一个是查询字符串要不要分词,还有就是原存储字段 ...
- Django数据模型--字段详解
一.字段 1.CharField: 字段数据类型为字符串 class Test(models.Model): test = models.CharField(max_length=) 2.Intege ...
- Java并发基础--Thread类
一.Thread类的构成 Thread类实现Runnable接口.部分源码如下: 二.Thread类常用方法 1.currentThread()方法 currentThread()方法可以返回代码段正 ...