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. Servlet过滤器理解

    from:http://blog.csdn.net/microtong/article/details/5007170 过滤器(Filter)的概念 过滤器位于客户端和web应用程序之间,用于检查和修 ...

  2. 【推荐】对 Linux 用户非常有用的 60 个命令（由浅入深）

    对 Linux 新手非常有用的 20 个命令 http://www.oschina.net/translate/useful-linux-commands-for-newbies 对 Linux 中级 ...

  3. 局部更新listview的问题（只更新某个item）

    转:http://blog.csdn.net/wu_shu_jun/article/details/7794576 public void updateView(int itemIndex) { // ...

  4. 别名的应用（New-Alias）

    New-Alias -name appcmd -value $env:windir\system32\inetsrv\appcmd.exe 这样就可以在当前PS环境下直接使用appcmd了

  5. C# Redis Server分布式缓存编程(二)

    在Redis编程中, 实体和集合类型则更加有趣和实用 namespace Zeus.Cache.Redis.Demo { public class Person { public int Id { g ...

  6. jquery 源码分析学习地址

    http://www.ccvita.com/121.htmljQuery工作原理解析以及源代码示例http://www.cnblogs.com/haogj/archive/2010/04/19/171 ...

  7. send，recv，sendto，recvfrom

    send函数 int send( SOCKET s,    const char FAR *buf,    int len,    int flags ); 不论是客户还是server应用程序都用se ...

  8. How to setup SLF4J and LOGBack in a web app - fast--转载

    原文:https://wiki.base22.com/display/btg/How+to+setup+SLF4J+and+LOGBack+in+a+web+app+-+fast Logback is ...

  9. linux crt

    1.仿真  终端选linux  ANSI颜色[有颜色了] 使用颜色方案[颜色加深了] 2.外观  选传统的 ,utf-8 就不会乱码了

  10. 在android的spinner中，实现取VALUE值和TEXT值

    为了实现在android的spinner实现取VALUE值和TEXT值,我尝试过好些办法,在网上查的资料,都是说修改适配器,刚开始我也是通过修改适配器的方法来做的,但是如果一个activity有多个s ...