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. .NET ORM框架（一）

    最近做项目自己整理了一个ORM框架,分享给大家看看,有很多不足望大家指出. 下面是使用方法 BLL 主要方法 逻辑层:子类继承父类, 直接用BASE调用 ManagerBLL 中的方法. public ...

  2. ELK beats平台介绍(11th)

    beats是一个代理,将不同类型的数据发送到elasticsearch.beats可以直接将数据发送到elasticsearch,也可以通过logstash将数据发送elasticsearch. be ...

  3. 【Away3D代码解读】（五）：动画模块及骨骼动画

    动画模块核心存放在away3d.animators包里: Away3D支持下面几种动画格式: VertexAnimator:顶点动画 SkeletonAnimator:骨骼动画 UVAnimator: ...

  4. HDU 3635 并查集+路径压缩+记录每个点移动次数

    题意: 给定n个点 oper个操作 每个点有1个龙珠 下面2种操作: T u v 把u点所有龙珠搬到v Q u  问u点当前所在城市 u点所在城市有几个龙珠 u点被移动几次 思路: 并查集可以求出 u ...

  5. 如何在64位系统上安装SQL Server 2000

    如何在64位系统上安装SQL Server 2000? 现在用SQL Server 2000数据库的人少了吧?大都是SQL Server 2005/2008了.不过还是有需求的,今天一朋友就让我在他的 ...

  6. Notes(一)

    Numerous experimental measurements in spatially complex systems have revealed anomalous diffusion in ...

  7. iOS 键盘框架IQKeyboardManager使用

    框架地址:https://github.com/hackiftekhar/IQKeyboardManager AppDelegate.m文件中   #import <IQKeyboardMana ...

  8. <property name="current_session_context_class">thread</property> 属性

    <property name="current_session_context_class">thread</property>这个属性的作用:这样配置是本 ...

  9. 实例:ABAP Tree Control 使用与ALV Grid对象关联

    Tree Control 是最常用的Windows控件之一,在其他语言中成为"Tree View"等,ABAP的 Tree Contiol 能实现类似的功能. 本文主要介绍一下内容 ...

  10. 用到的IOS知识点小结（1）

    以下内容是在ios6模拟器运行成功的,或者与我自己的开发环境有关系. 1.强制转屏,不过不推荐,是私有方法 //    if ([[UIDevice currentDevice] respondsTo ...