给特殊的链接类型定义样式

第10章，CSS的transform、transition和animation属性transform（变形）CSS3引入了几个可以对网页元素进行变换的属性，比如对它进行旋转、缩放、移动，或者沿着它的水平方向或垂直方向扭曲（斜切变换）IE9，Safari，Chrome，Firefox，Opera支持2D变换，IE8及更早不支持，transform需要使用供应商前缀transform功能：

1、rotate（旋转）

.testClass{
    transform:rotate(20deg);          /* 提供一个0~360的度数值，正值顺时针方向旋转，负值逆时针 */
}

2、scale（缩放）

.testClass{
    transform:scale(2);                    /* 接受单个参数：放大或缩小，0~1之间的数是缩小，大于1的数是放大，负数会将元素倒过来缩放 */
    transform:scale(x,y);                  /* 接受两个参数：第一个表示水平缩放，第二个表示垂直缩放 */
/*单方向缩放：*/
    transform:scaleX(num);/*沿X轴缩放*/
    transform:scaleY(num);/*沿Y轴缩放*/
}

3、translate（平移）

transform的translate函数只是将一个元素从它现有位置向左或向右以及向上或向下移动一定距离translate函数有两个值：第一个指定水平距离（正数向右移，负数向左），第二个指定垂直距离（正数向下，负数向上）还可以单方向使用：translateX水平方向，translateY垂直方向都可以使用pixel，em以及percentage值

4、skew（倾斜）

.testClass{
    transform:skew(45deg,0);          /* 第一个指沿X轴倾斜（正数向左倾斜<从元素上方沿逆时针进行>，负数向右），*/
                 /*第二个指沿Y轴倾斜（正数往右边向下<沿顺时针从元素右侧进行>，负数往左边向下），这个理解不够，表达不明白 */
}

多个函数共用：

.testClass{
    transform:skew(45deg,0deg) scale(.5) translate(400px,500px) rotate(90deg);
}

这些函数的应用顺序就是浏览器应用这些效果的顺序

5、origin

一般来说，都是相对于元素的中心作变换点，但CSS3允许使用transform-origin属性，改变这个点，与background-position属性一样，可以提供关键字、pixel为单位的绝对值、em和percentage为单位的相对值transform-origin:left top;transform-origin:0 0;transform-origin:0% 0%;transform-origin:right bottom ==> transform-origin:100% 100%第一个指水平，第二个指垂直3D变形，CSS3还提供了一种更加复杂的变换类型：3D变形（3D transform）

transition

实际上是在一定时间内，一组CSS属性变换到另一组属性的动画展示过程。为了使transition生效，需要做以下几件事：
1、两个样式，一个开始，一个结束2、transition属性。CSS3新增，使动画成为可能的秘诀所在。一般应用到最初开始的样式中3、触发器浏览器无法以动画形式模拟所有CSS属性，但还是有很多可选择。具体请看：www.w3.org/TR/css3-transitions/#animatable-properties

添加transition

.navButton{
     background-color:orange;
     transition-property:background-color;
     transition-duration:1s;
}
.navButton:hover{
     background-color:blue;
}

transition-property用于定义要以动画显示哪些属性，可以指定一个或多个，也可以使用all关键字。transition-duration用于定义动画要持续多久结束，可以使用秒或毫秒作单位transition-duration:.5s，transition-duration:500ms还可以针对每个需要动画展示的属性分别定义时限：

.testClass{
    transition-property:color,background-color,border-color;
    transition-duration:.5s,.75s,2s;
}

时间与属性是一一对应的注：必须提供供应商前缀，并不需要提供IE供应商前缀，IE9及之前不支持，IE10可支持前缀版本

给transition定时

transition-timing-function属性可控制动画速度。并不是控制动画时间长短，而是控制动画期间的速度。可以使用关键字：linear、ease、ease-in、ease-out、ease-in-out，浏览器默认以ease方法。还可以使用cubic-bezier值。Bezier曲线。

.testClass{
     transition-timing-function:cubic-bezier(.20,.96,.74,.07);
}

可以使用在线工具创建和测试不同的定时函数，Mathew Lein的Ceasar工具就是其中之一：http://matthewlein.com/ceaser/

延时启动transition

利用transition-delay属性阻止立即开始动画。需要使用供应商前缀：

.testClass{
    -webkit-transition-delay: .5s;
    -moz-transition-delay: .5s;
    -o-transition-delay: .5s;
    -ms-transition-delay: .5s;
    transition-delay: .5s;
}

在使用CSS下拉菜单时，如果不小心让鼠标离开了菜单，则下拉菜单很快就消失了，可以使用如下做法：
在初始样式添加：transition-delay: 5s;在:hover样式添加：transition-delay: 0;这么做不合常理就是了注：js改动CSS属性，也会启动transition

transition快捷方法

使用transition属性。只需要列出属性、延时时间、定时函数，并用空格分开即可。

.testClass{
    transition:all 1s ease-in .4s;
}

还可以分开定义多个，只需要逗号分隔：

.testClass{
    transition:color 1s,background-color .5s 1s;
}

需要提供供应商前缀

animation

创建动画1、定义动画，包括创建关键帧，即列出要创建动画的CSS属性2、将动画应用到元素上，可以应用给任意数量的元素

定义关键帧

@keyframes animationName{
    from{
        /*  list   CSS   properties   here   */
    }
    to{
        /*   list   CSS    properties   here   */
    }
}

@keyframes并不是CSS属性，应该称之为at规则，CSS其他at规则还包括@import，@media还可以使用多个百分比定义多个关键帧：

@keyframes backgroundGlow{
    from{
        backgorund-color:yellow;
    }
    50%{
        background-color:blue;
    }
    to{
        background-color:red;
    }
}

以上表示，蓝色背景会在动画进行到50%时出现，可以用0%代替from关键字，100%代替to关键字还可以这么设置：

@keyframes glow{
    from{
        backgorund-color:yellow;
    }
    25%,75%{
        background-color:blue;
    }
    to{
        background-color:red;
    }
}

表示在动画进行25%-75%之间要显示持续显示蓝色背景还有这个：

@keyframes glow{
    from{
        backgorund-color:yellow;
    }
    20%,60%{
        background-color:blue;
    }
    40%,80%{
        background-color:orange;
    }
    to{
        background-color:red;
    }
}

表示在20%显示blue，在40%显示orange，在60%显示blue，在80%显示orange，跳来跳去CSS3 animation一大缺点：需要特定的供应商前缀：

@-webkit-keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}
@-moz-keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}
@-o-keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}
@keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

注：不需要为IE提供，IE9及更早版本不支持，IE10支持无供应商前缀版本

应用animation

可以给元素的任何样式添加动画，也可以给伪类应用动画，js改动也会启动动画1、用@keyframes规则创建淡入动画：

@keyframes fadeIn{
    from{    opacity: 0;    }
    to{    opacity: 1;    }
}

2、将动画应用给

标签的样式：

.announcement{
    animation-name: fadeIn;          /*设置动画名称，前面创建的*/
    animation-duration: 1s;          /* 设置动画从开始到结束所花时间 */
}

可以将非动画属性也一起放入样式中animation-name，animation-duration也需要使用供应商前缀

给animation定时

使用animation-duration定时，可以像transition一样定义多个，只要用逗号分开，一一对应。使用animation-timing-function函数控制整个动画或特定关键帧，可以使用Cubic Bezier曲线也可以使用关键字，关键字与transition-timing-function函数关键字一样（linear、ease、ease-in、ease-out、ease-in-out）定义了多个关键帧，还可以在关键帧之间应用不同的函数：

@keyframes growAndGlow{
    from{
        background-color: yellow;
        animation-timing-function: cubic-bezier(1, .3, 1, .115);
    }
    50%{
        transform:scale(1.5);
        background-color:blue;
        animation-timing-function: linear;
    }
    to{
        transform:scale(3);
        background-color: red;
    }
}

还可以使用延时启动：animation-delay可以设置等待时间，与transition-delay属性一样。

完成animation

使用animation-iteration-count可以设置动画运行的次数。使用infinite可以不限次数的运行下去为了使一个动画在奇数次时超前运行，在偶数次时反向运行，可以使用animation-direction属性和关键字alternate。为了让一个动画在运行后回归最初的状态，可以使用偶数迭代次数，并将animation-direction设为alternate可以使用animation-fill-mode:forwards;将动画固定在最后的样子，以免使得web浏览器在动画结束时，将元素突兀的变回初始状态

使用animation快捷方式

.fade{
    animation-name: fadeOut;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 2;
    animation-direction: alternate;
    animation-delay: 5s;
    animation-fill-mode: forwards;
}

改写：

.fade{
    animation : fadeOut 2s ease-in-out 2 alternate 5s forwards;
}

只有名称和持续时间是必要的，其他都是可选，应用多个动画，只需每个动画用逗号隔开即可。

.fade{
    animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，
                glow 5s;
}

实际应用还需给定供应商前缀：

.fade{
    -webkit-animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，
                        glow 5s;
    -moz-animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，
                     glow 5s;
    -o-animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，
                   glow 5s;
    animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，
                glow 5s;
}

暂停animation

使用animation-play-state属性，只接受两个关键字：running、paused，要暂停只需这样：animation-play-state:paused;但，在使用CSS时只有一种方法可以应用它，那就是伪类。

第11章，表格和表单格式化使用text-align和vertical-align调整垂直对齐和水平对齐text-align接受：left、right、center、justify四个值，可继承vertical-align接受：top、baseline、middle、bottom四个值，不可继承，top：把内容推到表格单元顶部；middle：让内容居中；bottom：把内容底边推到单元格底部；baseline（基准线）作用和top类似，不过基本看不出来baseline有啥作用。

创建边框

在标签中设置border时，只会给表格添加边框，并不会给单元格添加，当给单元格设置border时，将会在单元格之间留下一个间隙

控制表格单元之间的空格

CSS提供了border-spacing属性用来控制表格单元之间的空隙。

消除双边框

即使消除了间隙，表格单元的边框也会变成双边框。使用border-collapse属性，接受两个值：spearate（默认显示方式）、collapse（消除单元间隔和边框）注：如果将border-collapse设置为collapse，border-spacing将不起作用

圆角

利用border-radius可以给表格单元（而不是表格本身）添加圆角。还可以给表格和表格单元应用box-shadow属性。可以使用nth-of-type选择器，给表格奇数行和偶数行添加不同的样式。注：浏览器通常会显示出空白表格单元的边框和背景色，若要隐藏可以使用empty-cells:hide：

table{
     empty-cells:hide;
}

但，如果border-collapse设为collapse，则浏览器忽略empty-cells属性，依然显示空白单元格边框和背景色

给表单定义样式

HTML表单元素1、fieldset，

标签用来集中相关表单问题2、legend，

标签就在

标签的HTML代码之后，它给一组域提供一个标签3、text fields（文本域）4、buttons（按钮），表单按钮：提交，重置或其他动作5、drop-down menus（下拉菜单），6、checkbox（复选框）和radio button（单选按钮）

第三部分----CSS页面布局第12章，CSS布局简介

网页布局类型

1、固定宽度，参看www.alistapart.com，www.espn.go.com，www.nytimes.com2、流式布局，参看http://maps.google.com3、响应式Web设计（Responsive Web Desin，RWD）

HTML5的分区元素

标签用于组成一个自包含结构的内容，例如一篇博客文章。标签用于给网页或者网页的分区提供标题、导航目标以及其他介绍性材料

推荐阅读

• io

  前端不规则图像点击_如何在前端开发的潮流中快速学习学好学以致用？

  

  大家好，我是致力于前端开发，前端设计，前端入门的前端小姐姐，今天为大家带来的前端新知识是【雪碧图和滑动门】，不 ... [详细]

  蜡笔小新   2023-10-15 17:45:23
• sum

  页面请求方法参数最长_关于 HTTP GET/POST 请求参数长度最大值的一个理解误区

  http:my.oschina.netleejun2005blog136820刚看到群里又有同学在说HTTP协议下的Get请求参数长度是有大小限制的，最大不能超过XX ... [详细]

  蜡笔小新   2023-12-13 19:20:03
• ip

  常用的CSS属性及用法整理

  本文整理了常用的CSS属性及用法，包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等，方便开发者查阅和使用。 ... [详细]

  蜡笔小新   2023-12-09 03:01:43
• io

  CSS背景位置y | backgroundpositiony

  css,背景,位置,y,background, ... [详细]

  蜡笔小新   2023-10-16 16:28:38
• ip

  pyecharts 介绍

  

  一、pyecharts介绍ECharts，一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部 ... [详细]

  蜡笔小新   2023-10-16 08:29:03
• ip

  CSS3选择器的使用方法详解，提高Web开发效率和精准度

  

  本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

  蜡笔小新   2023-12-14 14:37:52
• ip

  javascript – 概述在Firefox上无法正常工作

  

  我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观：而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]

  蜡笔小新   2023-12-14 10:20:38
• ip

  Voicewo在线语音识别转换jQuery插件的特点和示例

  

  本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]

  蜡笔小新   2023-12-13 20:01:16
• ip

  Python瓦片图下载、合并、绘图、标记的代码示例

  

  本文提供了Python瓦片图下载、合并、绘图、标记的代码示例，包括下载代码、多线程下载、图像处理等功能。通过参考geoserver，使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法，供读者参考使用。 ... [详细]

  蜡笔小新   2023-12-13 12:14:55
• ip

  macOS Big Sur全新设计大版本更新，10+个值得关注的新功能

  

  本文介绍了Apple发布的新一代操作系统macOS Big Sur，该系统采用全新的界面设计，包括图标、应用界面、程序坞和菜单栏等方面的变化。新系统还增加了通知中心、桌面小组件、强化的Safari浏览器以及隐私保护等多项功能。文章指出，macOS Big Sur的设计与iPadOS越来越接近，结合了去年iPadOS对鼠标的完善等功能。 ... [详细]

  蜡笔小新   2023-12-10 19:53:41
• ip

  网页播放视频的三种实现方式

  本文介绍了网页播放视频的三种实现方式，分别是使用html5的video标签、使用flash来播放以及使用object标签。其中，推荐使用html5的video标签来简单播放视频，但有些老的浏览器不支持html5。另外，还可以使用flash来播放视频，需要使用object标签。 ... [详细]

  蜡笔小新   2023-12-10 13:24:30
• io

  python – PyQt进度在启动后跳转到100％

  当我在doWork方法中运行代码时,通过单击button1,进度条按预期工作.但是,当我从其他方法(即btn2,btn3)将列表传递给doWork方法时,进度条在启动后会跳转到10 ... [详细]

  蜡笔小新   2023-10-17 09:31:56
• io

  震惊，正儿八经的网页居然在手机上这样显示！

  

  本篇文章所描述的，是网页移动端开发中的一些概念，以及一些常用标签~一、像素基本知识设备物理像素：设备上的一个像素点设备无关像素࿱ ... [详细]

  蜡笔小新   2023-10-16 17:25:47
• io

  Python爬虫_HTTP标准

  文章目录简介HTTP请求过程HTTP状态码含义HTTP头部信息Cookie状态管理HTTP请求方式简介HTTP协议（超文本传输协议）是用于从WWW服务 ... [详细]

  蜡笔小新   2023-10-15 14:59:43
• range

  Python-图片和视频文件爬虫

  最近在学Python，看了不少资料、视频，对爬虫比较感兴趣，爬过了网页文字、图片、视频。文字就不说了直接从网页上去根据标签分离出来就好了。图片和视频则需要在获取到相应的链接之后取做下载。以下是图片和视 ... [详细]

  蜡笔小新   2023-10-15 09:28:43

翔云飘雪9_694_492

这个家伙很懒，什么也没留下！

Tags | 热门标签

• instance
• scala
• testing
• default
• emoji
• lua
• netty
• perl
• range
• object
• io
• php8
• nodejs
• node.js
• controller
• split
• blob
• python2
• version
• heap
• post
• sum
• ip
• hashset
• schema
• hashtable
• php7
• vba
• cmd
• string

RankList | 热门文章

• 1灯泡与影子（三分）
• 2html超链接地址隐藏,如何在Excel中隐藏超链接地址？
• 3excel办公软件（excel办公软件基础知识）
• 4linuxshell脚本入门
• 5用 ES6 编写 Webpack 的配置文件
• 6SpringBoot第一个示例
• 7新手--Python爬虫请问一下这个怎么爬取？
• 8python 图片数据增强_基于Python的图像数据增强Data Augmentation解析
• 9NSA 的软件逆向工程框架 Ghidra 曝出漏洞
• 10怎么设置网络共享？
• 11获取文件哈希值_2.1分布式哈希表
• 12自顶向下归并排序和自底向上的归并排序
• 13如何在云服务器上运行python脚本？
• 14io.fabric8.common.util.Objects类的使用及代码示例
• 1551单片机怎么显示当前时间_51单片机轻松入门与实践 — 畅学单片机

PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有