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 ...
随机推荐
- VSCode插件整理
VSCode插件整理 VSCode插件整理 官网地址 vscode常用配置(User Settings文件) 基本插件 前端插件 VUE部分 python MarkDown部分 连接Linux 本地与 ...
- pig分组统计例子
1.选取数据样本 在pig安装目录下有一个文件tutorial/data/excite-small.log,其中的数据分为3列,中间用制表符分隔,第一列为用户ID,第二列为Unix时间戳,第三列为查询 ...
- WHERE条件中or与union引起的全表扫描的问题
说起数据库的SQL语句执行效率的问题,就不得不提where条件语句中的or(逻辑或)引起的全表扫描问题,从而导致效率下降. 在以往绝大多数的资料中,大多数人的建议是使用 union 代替 or ,以解 ...
- 计蒜客-----跳跃游戏(C语言)
/********************************************************给定一个非负整数数组,假定你的初始位置为数组第一个下标.数组中的每个元素代表你在那个位 ...
- node 动态页面渲染
代码: 'use strict' const express = require('express'); const consoldiate = require('consolidate'); con ...
- WebSocket 的使用
Java 控制台程序实现类似广播功能 服务器端代码 添加 maven 依赖 <dependency> <groupId>javax.websocket</groupId& ...
- MVC中Model 的Key值不建议用非int型
一次在开发中,key的值用了 byte型,结果插入第一条正常,第二条开始就出错,原因是用byte类型无法实现自动增加1,所以为了方便,建议使用 int型. public virtual byte bk ...
- 【python3.X】python练习笔记[1]
##三位数水仙花 ##方法一,小于指定数字的水仙花数 x=eval(input()) a,b,c = 0,0,0 for i in range (100,x,1): a=i%10 b=i//100 c ...
- web框架与爬虫
所有的web框架 http://www.cnblogs.com/wupeiqi/articles/5341480.html 爬虫技术 http://www.cnblogs.com/wupeiqi/ar ...
- golang log
自带log模块 写入文件 package main import ( "fmt" "log" "os" ) func main(){ log ...