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. Riesz-Thorin插值不等式

  2. ShowcaseView-master

      ShowcaseView.rar

  3. MySQL Cluster初步测试结果汇总图示报告 --> 用mysqlslap与sysbench进行测试

    Cluster结构图                                       测试环境简介 Mysql cluster集群测试环境 4 data node,32G 8核cpu 4 ...

  4. maven配置编译路径

    在build标签下添加 <build> <sourceDirectory>src/main/java</sourceDirectory> <resources ...

  5. 数据库性能测试---前阿里数据库团队资深DBA杨奇龙

    杨奇龙 前阿里数据库团队资深DBA 主要负责淘宝业务线,经历多次11.11,有海量业务访问DB架构设计经验. 目前就职于有赞科技DBA,负责数据库运维工作,熟悉MySQL 性能优化,故障诊断,性能压测 ...

  6. careercup-中等难度 17.3

    17.3 写一个算法计算n的阶乘末尾0的个数? 解答: 首先,算出n的阶乘的结果再去计算末尾有多少个0这种方法是不可取的, 因为n的阶乘是一个非常大的数,分分种就会溢出.我们应当去分析, 是什么使n的 ...

  7. 用java程序模拟网站的登录以及文件批量上传

    import java.io.File; import java.io.IOException; import java.util.ArrayList; import java.util.List; ...

  8. about semget

    flags must include read,write,execute permission. for examples: semget( 3333, 1, IPC_CREAT | IPC_EXC ...

  9. C语言枚举

    应该是 各种语言都支持枚举的. 所以这个 之前在我们java案例里面就出现过的季节代码再次出现了. 枚举帮我们起到一个变量值,在某一范围内的限定,用来避免一些非法值的键入. 值得注意的是,这里面的枚举 ...

  10. mac mysql error You must reset your password using ALTER USER statement before executing this statement.

    安装完mysql 之后,登陆以后,不管运行任何命令,总是提示这个 step 1: SET PASSWORD = PASSWORD('your new password'); step 2: ALTER ...