CSS知识总结（九）

CSS常用样式

10.自定义动画

　　1）关键帧（keyframes）

　　　　被称为关键帧，其类似于Flash中的关键帧。

　　　　在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

　　　　语法：@keyframes animationname {keyframes-selector {css-styles;}}

　　　　animationname：定义动画的名称。

　　　　keyframes-selector：以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。建议定义百分比选择器。

　　　　css-styles：通过 @keyframes 规则，您能够创建动画，就是将一套 CSS 样式逐渐变化为另一套样式，并且能够多次改变这套 CSS 样式。

　　　　兼容性：目前浏览器都不支持@keyframes规则，需要加上前缀"-moz-","-o-","-webkit-"。

　　　　例子：

@-webkit-keyframes FromLeftToRight{   /* Safari 和 Chrome */
    0% {left:0;}
    100% {left:800px;}
}
@-moz-keyframes FromLeftToRight{    /* Firefox */
    0% {left:0;}
    100% {left:800px;}
}
@-o-keyframes FromLeftToRight{      /* Opera */
    0% {left:0;}
    100% {left:800px;}
}
@keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:800px;}
}

　　2）动画名称（animation-name）

　　　　元素所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义。

　　　　animation-name ：none | <identifier>

　　　　<identifier>：定义一个或多个动画名称，如果是多个，用逗号分隔。

　　　　例子：

div{
    -webkit-animation-name:FromLeftToRight;
    -moz-animation-name:FromLeftToRight;
    -o-animation-name:FromLeftToRight;
    animation-name:FromLeftToRight;
}
@-webkit-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:800px;}
}
@-moz-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:800px;}
}
@-o-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:800px;}
}
@keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:800px;}
}

　　3）动画时间（animation-duration）

　　　　指定对象动画的持续时间

　　　　animation-duration：<time>

　　例子源代码：

/* CSS代码 */
.duration{
    width:100px;
    height:100px;
    background:#000;
    position:relative;
    -webkit-animation-name:FromLeftToRight;
    -webkit-animation-duration:3s;
    -moz-animation-name:FromLeftToRight;
    -moz-animation-duration:3s;
    animation-name:FromLeftToRight;
    animation-duration:3s;
}
@-webkit-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;}
}
@-moz-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;}
}
@keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;}
}

<!-- HTML代码 -->
<body>
    <p>请按F5刷新动画（矩形用3秒向右移动500px）</p>
    <div class="duration"></div>
</body>

　　效果：

请按F5刷新动画（矩形用3秒向右移动500px）

　　4）动画的过渡速度（animation-timing-function）

　　　　①ease : 默认值，逐渐变慢(等于 cubic-bezier(0.25,0.1,0.25,1))

　　　　②linear : 匀速过渡效果(等于 cubic-bezier(0,0,1,1))

　　　　③ease-in : 加速的过渡效果(等于 cubic-bezier(0.42,0,1,1))

　　　　④ease-out : 减速的过渡效果(等于 cubic-bezier(0,0,0.58,1))

　　　　⑤ease-in-out : 加速然后减速(等于cubic-bezier (0.42, 0, 0.58, 1))

　　　　⑥cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值，可能的值是 0 至 1 之间的数值。

　　例子源代码：

/* CSS代码 */
.function{
    width:100px;
    height:100px;
    background:#ccc;
    position:relative;
    margin:5px;
    -webkit-animation-name:FromLeftToRight;
    -webkit-animation-duration:3s;
    -moz-animation-name:FromLeftToRight;
    -moz-animation-duration:3s;
    animation-name:FromLeftToRight;
    animation-duration:3s;
}
.ease-in{
    -webkit-animation-timing-function:ease-in;
    -moz-animation-timing-function:ease-in;
    animation-timing-function:ease-in;
}
.ease-out{
    -webkit-animation-timing-function:ease-out;
    -moz-animation-timing-function:ease-out;
    animation-timing-function:ease-out;
}
@-webkit-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;}
}
@-moz-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;}
}
@keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;}
}

<!-- HTML代码 -->
<body>
    <p>请按F5刷新动画（两个矩形同样在3秒用不同的速率向右移动500px）</p>
    <div class="function ease-in">ease-in</div>
    <div class="function ease-out">ease-out</div>
</body>

　　效果：

请按F5刷新动画（两个矩形同样在3秒用不同的速率向右移动500px）

ease-in

ease-out

　　5）动画延迟时间（animation-delay）

　　　　指定对象动画延迟的时间

　　　　animation-delay：<time>

　　例子源代码：

/* CSS代码 */
.delay{
    width:100px;
    height:100px;
    background:#000;
    position:relative;
    -webkit-animation-name:FromLeftToRight;
    -webkit-animation-duration:3s;
    -webkit-animation-delay:2s;
    -moz-animation-name:FromLeftToRight;
    -moz-animation-duration:3s;
    -moz-animation-delay:2s;
    animation-name:FromLeftToRight;
    animation-duration:3s;
    animation-delay:2s;
}
@-webkit-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;}
}
@-moz-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;}
}
@keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;}
}

<!-- HTML代码 -->
<body>
    <p>请按F5刷新动画（刷新后请等待2秒启动动画）</p>
    <div class="delay"></div>
</body>

　　效果：

请按F5刷新动画（刷新后请等待2秒启动动画）

　　6）动画执行次数（animation-iteration-count）

　　　　animation-iteration-count：infinite | <number>

　　　　infinite表示无限次数，number指定循环次数。

　　例子源代码：

/* CSS代码 */
.infinite{
    width:100px;
    height:100px;
    background:#000;
    position:relative;
    -webkit-animation-name:FromLeftToRight;
    -webkit-animation-duration:3s;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-name:FromLeftToRight;
    -moz-animation-duration:3s;
    -moz-animation-iteration-count:infinite;
    animation-name:FromLeftToRight;
    animation-duration:3s;
    animation-iteration-count:infinite;
}
@-webkit-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;}
}
@-moz-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;}
}
@keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;}
}

<!-- HTML代码 -->
<body>
    <p>动画全自动无限循环播放</p>
    <div class="infinite"></div>
</body>

　　效果：

动画全自动无限循环播放

　　7）动画的顺序（animation-direction）

　　　　设置对象动画在循环中是否反向运动

　　　　animation-direction : normal | reverse | alternate | alternate-reverse

　　　　normal：正常方向

　　　　reverse：反方向运行

　　　　alternate：动画先正常运行再反方向运行，并持续交替运行

　　　　alternate-reverse：动画先反运行再正方向运行，并持续交替运行

　　例子源代码：

/* CSS代码 */
.box{
    width:100px;
    height:50px;
    background:#ccc;
    margin:5px;
    position:relative;
    -webkit-animation-name:FormLeftToRight;
    -moz-animation-name:FormLeftToRight;
    animation-name:FormLeftToRight;
    -webkit-animation-duration:5s;
    -moz-animation-duration:5s;
    animation-duration:5s;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
}
.reverse{
    -webkit-animation-direction:reverse;
    -moz-animation-direction:reverse;
    animation-direction:reverse;
}
.alternate{
    -webkit-animation-direction:alternate;
    -moz-animation-direction:alternate;
    animation-direction:alternate;
}
.alternate-reverse{
    -webkit-animation-direction:alternate-reverse;
    -moz-animation-direction:alternate-reverse;
    animation-direction:alternate-reverse;
}
@-webkit-keyframes FormLeftToRight{
    0%{left:0;}
    100%{left:500px;}
}
@-moz-keyframes FormLeftToRight{
    0%{left:0;}
    100%{left:500px;}
}
@keyframes FormLeftToRight{
    0%{left:0;}
    100%{left:500px;}
}

 <!-- HTML代码 -->
<body>
    <p>四种不同的顺序</p>
    <div class="box">normal</div>
    <div class="box reverse">reverse</div>
    <div class="box alternate">alternate</div>
    <div class="box alternate-reverse">alternate-reverse</div>
</body>

　　效果：

四种不同的顺序

normal

reverse

alternate

alternate-reverse

　　8）动画的状态（animation-play-state）

　　　　设置对象动画的状态

　　　　animation-play-state：running | paused

　　　　running：运动

　　　　paused：暂停

　　例子源代码：

/* CSS代码 */
.state{
    width:100px;
    height:100px;
    background:#000;
    position:relative;
    -webkit-animation-name:FromLeftToRight;
    -webkit-animation-duration:3s;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-name:FromLeftToRight;
    -moz-animation-duration:3s;
    -moz-animation-iteration-count:infinite;
    animation-name:FromLeftToRight;
    animation-duration:3s;
    animation-iteration-count:infinite;
}
.state:hover{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    animation-play-state:paused;
}
@-webkit-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;}
}
@-moz-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;}
}
@keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;}
}

<!-- HTML代码 -->
<body>
    <p>鼠标移动到矩形上可以暂停动画</p>
    <div class="state"></div>
</body>

　　效果：

鼠标移动到矩形上可以暂停动画

　　9）动画时间之外的状态（animation-fill-mode）

　　　　设置对象动画时间之外的状态

　　　　animation-fill-mode ： none | forwards | backwards | both

　　　　none：默认值。不设置对象动画之外的状态

　　　　forwards：设置对象状态为动画结束时的状态

　　　　backwards：设置对象状态为动画开始时的状态

　　　　both：设置对象状态为动画结束或开始的状态

　　例子源代码：

/* CSS代码 */
.mode{
    width:100px;
    height:100px;
    background:#000;
    position:relative;
    -webkit-animation-name:FromLeftToRight;
    -webkit-animation-duration:3s;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-name:FromLeftToRight;
    -moz-animation-duration:3s;
    -moz-animation-fill-mode:forwards;
    animation-name:FromLeftToRight;
    animation-duration:3s;
    animation-fill-mode:forwards;
}
@-webkit-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;}
}
@-moz-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;}
}
@keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;}
}

<!-- HTML代码 -->
<body>
    <p>请按F5刷新动画（动画结束后停在结束位置）</p>
    <div class="mode"></div>
</body>

　　效果：

请按F5刷新动画（动画结束后停在结束位置）

　　10）动画复合属性（animation）

　　　　通过 animation ，我们能够创建自定义动画，这可以在许多网页中取代动画图片gif、Flash 动画以及 JavaScript。

　　　　animation：<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-fill-mode> || <animation-play-state> [ ,*]

　　利用学过的动画样式，制作一个下滑菜单栏

　　源代码：

/* CSS代码 */
.dropmenu{
    width:100px;
    height:30px;
    line-height:30px;
    text-align:center;
    background:green;
    border-radius:10px;
    overflow:hidden;
}
.dropmenu a{
    font-family:"微软雅黑";
    font-size:18px;
    color:#fff;
    text-decoration:none;
}
.dropmenu ul{
    list-style-type:none;
    padding:0;
    margin:0;
}
.dropmenu ul li{
    background:#808080;
}
.dropmenu:hover{
    -webkit-animation-name:SlideDown;
    -moz-animation-name:SlideDown;
    animation-name:SlideDown;
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}
@-webkit-keyframes SlideDown{
    0% {height:30px;}
    100% {height:155px;}
}
@-moz-keyframes SlideDown{
    0% {height:30px;}
    100% {height:155px;}
}
@keyframes SlideDown{
    0% {height:30px;}
    100% {height:155px;}
}

<!-- HTML代码 -->
<body>
    <div class="dropmenu">
        <a href="###">菜单栏</a>
        <ul>
            <li><a href="###">AAA</a></li>
            <li><a href="###">AAA</a></li>
            <li><a href="###">AAA</a></li>
            <li><a href="###">AAA</a></li>
        </ul>
    </div>
</body>

　　效果：

菜单栏

时间： 2024-07-31 20:58:28

CSS知识总结（九）的相关文章

你该学点HTML/CSS知识的9大理由

每个人都应该学写代码——这一观点简直就是铺天盖地地映入我们眼帘.或许你会莫名其妙,程序员学代码那是理所应当,但是作为一个作家.营销人员.财务工作者甚至是工人,为什么也需要学习代码呢?好吧,下面我会告诉你为什么懂点HTML和CSS会让你的职业生涯发生巨大的改变.学习技术不仅仅是生产助理亦或是印刷设计师的事——无论你是小企业主.销售经理.事件协调员还是魔术师,都能让你受益于HTML和CSS知识. 不要怀疑,让我给你9大理由,看看能不能说服你. 1.为客户设计超棒的电子邮件电子邮件被普遍认为是最好的网

CSS知识回顾--读《CSS 那些事儿》笔记

由于之前有了解过CSS的相关知识,有了一定的基础,所以读起<CSS 那些事儿>不是很有难度,况且我现在读起来时,CSS3和HTML5比较流行,这里只是记录一些CSS知识记录,不做详细铺开,以做记录和日后翻查之用. 1.CSS的基本结构 Selector {property:value;} 由选择符(Selector ),声明({}),属性(property),属性值(value)组成: 2.CSS的简写颜色的简写: 有以下几种形式: #RRGGBB(16进制),RGB(125,0,255)

CSS知识体系

我个人学习比较重视系统性,学习的一个重要目标就是不断完善知识体系.逻辑严密.结构清晰的知识体系能够给人一种全局性的视野和稳健的思维框架,避免出现“只见树木,不见森林”的片面性和知识盲区. 好的知识框架在于全面和条理性,它的核心应该是简单的,简单到一句话就能提纲挈领,概括清楚.比如啥是计算机,计算机就是一种能储存和处理数据的设备.(A computer is a device that can store, retrieve, and process data.)越是简洁凝练的总结越是代表着对本质

[css]我要用css画幅画(九) - Apple Logo

接着之前的[css]我要用css画幅画(八) - Hello Kitty,这次画的是苹果公司的logo 这次打算将分析和实现步骤尽量详细的说一说. 其实之前的也打算详细讲分析和设计过程,不过之前的图比较复杂,如果讲那么细,真是怕要讲到猴年马月. 这次的图足够简单,就拿这个图来说明. 都是一些简单的基本方法,通过举一反三,可以实现大部分效果. Github Demo:http://bee0060.github.io/Css-Paint/pages/logo/apple.html Code Pen

《HTML与CSS知识》系列分享专栏

收藏HTML和CSS方面的技术文章,作为一个WEB开发者,必须要知道HTML和CSS方面的知识,即使作为后台开发者也应该知道一些常用的HTML和CSS知识,甚至架构师也要了解,这样才会开发出实用的网站来 <HTML与CSS知识>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201715.html 文章详解CSS(层叠样式表)渐进增强详解css 定位与定位应用精简CSS文件使您的CSS网页布局代码更专业 DIV CSS网页布局让

网页制作常用的CSS知识

在制作网页中,我们会用到很多CSS的知识,在这里我简单的总结了一些. div 划分区块 ul,li 无序列表(配合划分区块) ol,li 有序列表 a 超链接标签 p 段落标签 h 标题标签 img 向网页插入图片 input 输入框 text-align:center 文本文字居中 text-decoration:none 去下划线 list-style:none 去掉列表前缀 display:block 变为块级元素,然后就可以设置宽高那些了 float

HTML+CSS知识总结1

一.浏览器页面页面由结构层(html)表现层(css)行为层(js)组成二.DOCTYPE作用是用来告知浏览器以何种模式渲染文档. 三.严格模式是指浏览器按照W3C标准解析代码,混杂模式又称怪异模式,是指浏览器用自己的方式来解析代码.浏览器解析时到底是严格模式还是混杂模式与网页中的DTD直接相关.HTML5没有DTD,因此没有严格和混杂之分. 四.CSS选择器包含:1.标签选择器( p ),2.类选择器(.class),3.ID选择器,4.后代选择器(p b),5.子元素选择器(p>b),6

css知识总结

---# 学习目标:> 1. 学会使用CSS选择器> 2. 熟记CSS样式和外观属性> 3. 熟练掌握CSS各种选择器> 4. 熟练掌握CSS各种选择器> 5. 熟练掌握CSS三种显示模式> 6. 熟练掌握CSS背景属性> 7. 熟练掌握CSS三大特性> 8. 熟练掌握CSS盒子模型> 9. 熟练掌握CSS浮动> 10.熟练掌握CSS定位> 11.熟练掌握CSS高级技巧强化CSStypora-copy-images-to: media---

html和css知识总结

今天把整个html和css的总结了一遍.可能还有疏忽之处,共同学习吧 [行为样式三者分离] 不加行内css样式,不加行内js效果 [标签]1>单标签<!doctype html> 文档头,告诉浏览器这是一个网页br 换行img 插入图片,src属性默认有图片上方3像素,间距 2>双标签body 主体,默认marginspandiv h1-h6 标题标签,默认字体加粗,间距,字体大小p 段落标签,默认有间距a 超链接,可添加width.height属性,如果给定的高度或者宽度比例不