transition：CSS3过渡     css3里很好的一个标签，可以非常方便的完成需要很多JS才能完成的动态效果

例语法：transition：width 2S,height 2S,transform 2S;

CSS3动画

@keyframes:使一种样式逐渐变为另一种样式的过程

 <!DOCTYPE html>

 <html>

 <head>

 <style>

 div

 {

 width:100px;

 height:100px;

 background:red;

 position:relative;

 animation-name:myfirst;

 animation-duration:5s;

 animation-timing-function:linear;

 animation-delay:2s;

 animation-iteration-count:infinite;

 animation-direction:alternate;

 animation-play-state:running;

 /* Safari and Chrome: */

 -webkit-animation-name:myfirst;

 -webkit-animation-duration:5s;

 -webkit-animation-timing-function:linear;

 -webkit-animation-delay:2s;

 -webkit-animation-iteration-count:infinite;

 -webkit-animation-direction:alternate;

 -webkit-animation-play-state:running;

 }

 @keyframes myfirst

 {

 0%   {background:red; left:0px; top:0px;}

 25%  {background:yellow; left:200px; top:0px;}

 50%  {background:blue; left:200px; top:200px;}

 75%  {background:green; left:0px; top:200px;}

 100% {background:red; left:0px; top:0px;}

 }

 @-webkit-keyframes myfirst /* Safari and Chrome */

 {

 0%   {background:red; left:0px; top:0px;}

 25%  {background:yellow; left:200px; top:0px;}

 50%  {background:blue; left:200px; top:200px;}

 75%  {background:green; left:0px; top:200px;}

 100% {background:red; left:0px; top:0px;}

 }

 </style>

 </head>

 <body>

 <p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

 <div></div>

 </body>

 </html>

CSS3多列

column-count：指定需要分割的列数     语法：column-count：--；

columnn-gap：列之间的距离     语法：column-gap：--px;

column-rule-style:solid;     column-rule-gap:--px;     column-rule-color：----；边框样式和厚度颜色

直接简写column-rule：solid 1px blue;

column-width:--px;列的宽度

column-span：all；指定元素跨过所有列

outline：不占空间的轮廓     CSS3提供outline-offset：--px；使轮廓与边框中间隔指定的间隙

img{max-width：100%；height：auto；}实现图片自动按比例缩放

查看大图功能

 <!DOCTYPE html>

 <html>

 <head>

 <style>

 a {

     display: inline-block;

     border: 1px solid #ddd;

     border-radius: 4px;

     padding: 5px;

     transition: 0.3s;

 }

 a:hover {

     box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);

 }

 </style>

 </head>

 <body>

 <h2>缩略图作为连接</h2>

 <p>我们使用 border 属性来创建缩略图。在图片外层添加一个链接。</p>

 <p>点击图片查看效果：</p>

 <a target="_blank" href="paris.jpg">

   <img src="paris.jpg" alt="Paris" width="200" height="150">

 </a>

 </body>

 </html>

CSS3的几个标签速记3的更多相关文章

  1. CSS3的几个标签速记1

    border-radius:CSS3圆角   语法:border-radius:25px;     椭圆边角:语法-border-radius:xx%;或者15px/100px; box-shadow ...

  2. 12种炫酷HTML5 SVG和CSS3表单浮动标签特效

    这是一组效果非常炫酷的HTML5 SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,使用SVG和CSS3来制作完成.这些浮动标签效果部分在元素的伪元素上使用CSS transitions ...

  3. CSS3之尖角标签

    如图所示,Tag标签的制作通常使用背景图片,现在用CSS3代码就能实现尖角效果(需浏览器支持CSS3属性). 运用CSS3样式实现尖角标签,只需要写简单的HTML结构和CSS样式. <p> ...

  4. 用CSS3制作尖角标签按钮样式

    如图的效果.标签有背景色,且左侧有一个三角形,三角形中间有个白色的圆圈. 你一定在想这个效果是背景图切出来的吧——答案是没有用到任何图片 那你会不会在想这个效果的html结构很复杂呢——答案是最简单的 ...

  5. CSS3给页面打标签

    我们经常会在页面的左上角或者右上角看到类似如图所示的标签,比如页面的链接(最常使用)等,下面我们就实现一个简单的标签 实现步骤是先做一个水平长条,使用CSS3的transform来实现旋转,如果是在左 ...

  6. 使用CSS3中的input标签与lable标签组合实现banner图的切换

    在做网页时,我们经常可以碰到banner图的切换.对于那些JS薄弱的同学来说,这就很尴尬了.今天,我来告诉大家如何使用CSS做出banner图切换的效果. 这里,用到了lable标签与input的组合 ...

  7. HTML标签速记整理W3C

    标题 <h1>段落<p>链接< href="">图像<img src="">自关闭元素,不需要结束标记换行标志& ...

  8. CSS3新增特性\HTML标签类型

    RGBA:透明度      作用: 设置透明度(R G B A)   opacity:不透明度     文字也会被设置不透明度   圆角      border-radius:圆角{左上角,右上角.. ...

  9. CSS3 banner图片的标签效果

    放body看,你懂的:)

随机推荐

  1. RocketMQ入门（3）拉取消息

    转自:http://www.changeself.net/archives/rocketmq入门(3)拉取消息.html RocketMQ入门(3)拉取消息 RocketMQ不止可以直接推送消息,在消 ...

  2. C#开源资源大汇总

    C#开源资源大汇总     C#开源资源大汇总 一.AOP框架        Encase 是C#编写开发的为.NET平台提供的AOP框架.Encase 独特的提供了把方面(aspects)部署到运行 ...

  3. Serializable在C#中的作用.net中的对象序列化 （转）

    序列化是指将对象实例的状态存储到存储媒体的过程,在此过程中,先将对象的公共字段和私有字段以及类的名称(包括类所在的程序集)转 换为字节流,然后再把字节流写入数据流,在随后对对象进行反序列化时,将创建出 ...

  4. Windows 环境下基于 nginx 的本地 PyPI 源

    Windows 环境下基于 nginx 的本地 PyPI 源的搭建: 1.登录 nginx 官网,下载安装包

  5. Xcode8适配iOS10.1真机测试

    将10.1测试包相关文件存放到指定位置,如图步骤提示: 解压文件:

  6. Chapter 1 Securing Your Server and Network(11):使用透明数据库加密

    原文出处:http://blog.csdn.net/dba_huangzj/article/details/38398813,专题文件夹:http://blog.csdn.net/dba_huangz ...

  7. 火狐HACK

     /*针对Firefox*/@-moz-document url-prefix() {    #nav{ width:200px; }} 

  8. 学习笔记之Linux Shell脚本教程：30分钟玩转Shell脚本编程

    Linux Shell脚本教程:30分钟玩转Shell脚本编程 http://c.biancheng.net/cpp/shell/

  9. [000]socket通信--server和client实现的简单例子

    在C语言中就学过scanf和printf,其实理解socket就跟这两个输入输出差不多,只不过是信息的传输而已. 1.TCP服务器端(server)的默认函数调用顺序: 按照上述的调用顺序,我们可以来 ...

  10. 火车票硬座座位位置分布图、火车座位分布图 andydao

    夏天要是坐火车硬座在火车上过夜的话,最好带一个小外套,以防睡觉着凉.