<!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边框会动的信封的更多相关文章

  1. CSS3 -- 边框圆角

    文章后有彩蛋哦 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. HTML 学习笔记 CSS3 (边框)

    CSS3边框 通过CSS3边框 你能够创建远角边框 向矩形边框添加阴影 使用图片来绘制边框 . CSS3的边框属性 主要包含以下几种 border-radius 边框圆角 box-shadow 边框阴 ...

  3. [HTML] CSS3 边框

    CSS3 边框 用CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如Photoshop. 在本章中,您将了解以下的边框属性: border-radius box-shado ...

  4. CSS3边框温故

    1.简介:border属性在CSS1中就已经定义了,用来设置元素边框风格,设置不同的边框.颜色.粗细 2.基本属性,包括三个类型值:(1)border-width:设置元素边框的粗细,默认3~4px( ...

  5. css3 边框记

    css3 边框 border属性在css1中就已经定义了,使用它可以设置元素的边框风格,边框颜色以及边框粗细. border-width:设置元素边框的粗细. border-color:设置元素边框的 ...

  6. CSS3 边框

    说明:CSS3完全向后兼容,因此不必改变现有的设计.浏览器通常支持CSS2 CSS3模块 CSS3被划分为模块: 选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面 CS ...

  7. 第八十节,CSS3边框图片效果

    CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释     CSS3 ...

  8. css3边框与背景

    一.css3边框 1.border-image 边框 border-image: url(xxx.png) number stretch 很好理解就是拉伸,有多长拉多长. repeat (和4角上 同 ...

  9. 第95天:CSS3 边框、背景和文字效果

    1.CSS3边框: border-radius:CSS3圆角边框.在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,bo ...

随机推荐

  1. 9-C++远征之多态篇-学习笔记

    C++远征之多态篇 面向对象三大特征:封装,继承,多态 多态: 发出一条命令时,不同的对象接收到同样的命令做出的动作不同 多态篇会学习到的目录: 普通虚函数 & 虚析构函数 纯虚函数:抽象类 ...

  2. n点游戏

    n点游戏 24点游戏是非常经典而简单的小游戏,从一堆扑克牌中抽取4张,向其中添加运算符号并使其运行结果恰等于24,这叫作24点游戏. 现在我们不再是组合24,而是组合出给定的数字n,但要求只可以利用任 ...

  3. Python3乘法口诀表(由上至下+由下至上)

    一.所用知识点: 1.变量的使用. 2.循环语句的使用,这里用到的是双while循环.当然,使用其他的循环去做也是可以的.我认为,对于刚刚接触编程的人来说,使用双while循环比较容易理解. 3.使用 ...

  4. spring boot踩坑记

    Resolved exception caused by handler execution: org.springframework.http.converter.HttpMessageNotWri ...

  5. xss挑战赛小记 0x01(xsstest)

    0x00 今天在先知社区看到了一个xss挑战赛 结果发现比赛已经结束 服务器也关了 百度找了个xss挑战赛来玩一下 正好印证下xss的学习--- 地址     http://test.xss.tv/ ...

  6. Android Google Maps 开始

    由于工作需要,最近对Android的各大地图进行了试用. 其中有Google地图,百度地图,高德地图,还有开源的OSM. 在使用Google地图的时候,官网流程写的非常清楚,但是其中也遇到一些问题.这 ...

  7. Fiddler安卓抓包详细教程

    电脑端抓包一般图方便就用浏览器自带的,最近需要分析安卓一个APP的HTTP请求,尝试了wireshark(功能太强大了,然而我并不会用),tcpdump(用起来还是比较麻烦),网上搜了一下,还是使用F ...

  8. jsp 添加jstl标签

    jsp页面中添加下列代码即可使用jstl标签. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix=" ...

  9. spring mvc 返回xml格式数据

    1.问题 : 因为业务需要,需要发送xml格式的数据,使用spring mvc 自己解析,就不用费心去自己搞这些东西. 2.解决: 新建一个实体类,直接在实体类中添加注解即可,如下: @XmlRoot ...

  10. deeplearning.ai课程学习(3)

    第三周:浅层神经网络(Shallow neural networks) 1.激活函数(Activation functions) sigmoid函数和tanh函数两者共同的缺点是,在z特别大或者特别小 ...