CSS知识总结(八)

CSS常用样式

8.变形样式

 改变元素的大小,透明,旋转角度,扭曲度等。

 transform : none | <transform-function>

 <transform-function>表示一个或多个变换函数,以空格分开,也就是说我们可以同时对一个元素进行transform的多种属性操作。

 温馨提示:以往我们叠加效果都是用逗号隔开,但transform中使用多个属性时是用空格隔开。

  1)translate()

    指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0。   

  例子 源代码:

/* CSS代码 */
.box1{
    width:200px;
    height:50px;
    border:1px solid #000;
}
.box1 p{
    padding:0;
    margin:0;
    width:200px;
    height:50px;
    background:#ccc;
    transform:translate(20px,20px);
}
<!-- HTML代码 -->
<body>
    <div class="box1">
        <p>translate(20px,20px)</p>
    </div>
</body>

  效果:

translate(20px,20px)

  2)translateX()

    指定对象X轴(水平方向)的平移。

  例子 源代码:

/* CSS代码 */
.box2{
    width:200px;
    height:50px;
    border:1px solid #000;
}
.box2 p{
    padding:0;
    margin:0;
    width:200px;
    height:50px;
    background:#ccc;
    transform:translateX(20px);
}
<!-- HTML代码 -->
<body>
    <div class="box2">
        <p>translateX(20px)</p>
    </div>
</body>

  效果:

translateX(20px)

  3)translateY()

    指定对象Y轴(垂直方向)的平移。

  例子 源代码:

/* CSS代码 */
.box3{
    width:200px;
    height:50px;
    border:1px solid #000;
}
.box3 p{
    padding:0;
    margin:0;
    width:200px;
    height:50px;
    background:#ccc;
    transform:translateY(20px);
}
<!-- HTML代码 -->
<body>
    <div class="box3">
        <p>translateY(20px)</p>
    </div>
</body>

  效果:

translateY(20px)

  4)rotate()

    指定对象的2D rotation(2D旋转)。

  例子 源代码:

/* CSS代码 */
.box4{
    width:100px;
    height:100px;
    border:1px solid #000;
}
.box4 p{
    padding:0;
    margin:0;
    width:100px;
    height:100px;
    background:#ccc;
    transform:rotate(45deg);
}
<!-- HTML代码 -->
<body>
    <div class="box4">
        <p>rotate(45deg)</p>
    </div>
</body>

  效果:

rotate(45deg)

  5)transform-origin

    指定元素的中心点。

    任何一个元素都有一个中心点,默认情况之下,其中心点是居于元素X轴和Y轴的50%处。

  例子 源代码:

/* CSS代码 */
.box5{
    width:100px;
    height:100px;
    border:1px solid #000;
}
.box5 p{
    padding:0;
    margin:0;
    width:100px;
    height:100px;
    background:#ccc;
    transform-origin:0 0;
    transform:rotate(15deg);
}
<!-- HTML代码 -->
<body>
    <div class="box5">
        <p>rotate(15deg)</p>
    </div>
</body>

  效果:

rotate(15deg)

  6)scale()

    指定对象的2D scale(2D缩放)。

    第一个参数表示水平方向缩放的倍数,第二个参数表示垂直方向的缩放倍数。如果第二个参数未提供,则默认取第一个参数的值。

  例子 源代码:

/* CSS代码 */
.box6{
    width:100px;
    height:100px;
    border:1px solid #000;
}
.box6 p{
    padding:0;
    margin:0;
    width:100px;
    height:100px;
    background:#ccc;
    transform:scale(0.8,0.8);
}
<!-- HTML代码 -->
<body>
    <div class="box6">
        <p>scale(0.8,0.8)</p>
    </div>
</body>

  效果:

scale(0.8,0.8)

  7)skew()

    指定对象skew transformation(斜切扭曲)。

    第一个参数是水平方向扭曲角度,第二个参数是垂直方向扭曲角度。如果第二个参数未设置,则默认值为0。

  例子 源代码:

/* CSS代码 */
.box7{
    width:100px;
    height:100px;
    border:1px solid #000;
}
.box7 p{
    padding:0;
    margin:0;
    width:100px;
    height:100px;
    background:#ccc;
    transform:skew(30deg,10deg);
}
<!-- HTML代码 -->
<body>
    <div class="box7">
        <p>skew(30deg,10deg)</p>
    </div>
</body>

  效果:

skew(30deg,10deg)

  如果设置"transform:skewX(30deg);":

skewX(30deg)

  如果设置"transform:skewY(30deg);":

skewY(30deg)

9.过渡动画

  1)过渡属性transition-property

    设置对象中的参与过渡的属性。

    默认值为:all,默认为所有可以进行过渡的css属性。如果提供多个属性值,以逗号进行分隔。

   有过渡效果的属性:

  例子 源代码:

/* CSS代码 */
.property{
    width:200px;
    height:100px;
    border:1px solid #000;
    background:#fff;
    color:#000;
    transition-property:background-color,color;
}
.property:hover{
    background:#000;
    color:#fff;
}
<!-- HTML代码 -->
<body>
    <p>请将鼠标移动到下面的矩形上:</p>
    <div class="property">
        设置过渡的属性:
        background-color , color
    </div>
</body>

  效果:

请将鼠标移动到下面的矩形上:

设置过渡的属性:
background-color , color

  2)过渡所需时间transition-duration

    设置对象过渡的持续时间,就是从旧属性过渡到新属性所花的时间。

    如果提供多个属性值,以逗号进行分隔。

  例子 源代码:

/* CSS代码 */
.duration{
    width:200px;
    height:100px;
    border:1px solid #000;
    background:#fff;
    color:#000;
    transition-property:background-color,color;
    transition-duration:2s;
}
.duration:hover{
    background:#000;
    color:#fff;
}
<!-- HTML代码 -->
<body>
    <p>请将鼠标移动到下面的矩形上:</p>
    <div class="duration">
        过渡的时间是:2s
    </div>
</body>

  效果:

请将鼠标移动到下面的矩形上:

过渡的时间是:2s

  3)过渡函数transition-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代码 */
.ease{
    width:100px;
    height:100px;
    border:1px solid #000;
}
.ease-in{
    margin-left:0px;
    transition-property:all;
    transition-duration:2s;
    transition-timing-function:ease-in;
}
.ease-out{
    margin-left:0px;
    transition-property:all;
    transition-duration:2s;
    transition-timing-function:ease-out;
}
.ease:hover{
    margin-left:200px;
}
<!-- HTML代码 -->
<body>
    <p>请将鼠标移动到下面的矩形上,并跟着矩形移动:</p>
    <div class="ease ease-in">
        加速 ease-in
    </div>
    <div class="ease ease-out">
        减速 ease-out
    </div>
</body>

  效果:

请将鼠标移动到下面的矩形上,并跟着矩形移动:

加速 ease-in

减速 ease-out

  4)过渡延迟时间transition-delay

    指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行。

  例子 源代码:

/* CSS代码 */
.delay{
    width:200px;
    height:100px;
    border:1px solid #000;
    background:#fff;
    color:#000;
    transition-property:background-color,color;
    transition-duration:2s;
    transition-delay:1s;
}
.delay:hover{
    background:#000;
    color:#fff;
}
<!-- HTML代码 -->
<body>
    <p>请将鼠标移动到下面的矩形上:</p>
    <div class="delay">
        过渡延迟的时间是:1s
    </div>
</body>

  效果:

请将鼠标移动到下面的矩形上:

过渡延迟的时间是:1s

  5)过渡动画缩写transition

    transition : <transition-property> < transition-duration > <transition-timing-function> < transition-delay> , ……

  例子 源代码:

/* CSS代码 */
.all{
    width:208px;
    height:100px;
    border:1px solid #000;
    background:#fff;
    color:#000;
    transition:all 2s ease-in 1s;
}
.all:hover{
    background:#000;
    color:#fff;
}
<!-- HTML代码 -->
<body>
    <p>请将鼠标移动到下面的矩形上:</p>
    <div class="all">
        transition:all 2s ease-in 1s;
        所有属性 过渡2s 加速 延迟1s
    </div>
</body>

  效果:

请将鼠标移动到下面的矩形上:

transition:all 2s ease-in 1s; 所有属性 过渡2s 加速 延迟1s

                                  

时间: 2024-10-15 17:42:22

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.)越是简洁凝练的总结越是代表着对本质

《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网页布局 让

Linux基础知识第八讲,系统相关操作命令

目录 Linux基础知识第八讲,系统相关操作命令 一丶简介命令 2.磁盘信息查看. 3.系统进程 Linux基础知识第八讲,系统相关操作命令 一丶简介命令 时间和日期 date cal 磁盘和目录空间 df du 进程信息 ps top kill 1.时间和日期命令学习. 序号 命令 作用 01 date 查看系统时间 02 cal calendar 查看日历,-y 选项可以查看一年的日历 如下: 2.磁盘信息查看. 序号 命令 作用 01 df -h disk free 显示磁盘剩余空间 02

CSS 奇技淫巧十八招

http://www.tuicool.com/articles/VZneI3 開始覺得自己會寫 CSS 也算有一段時間了,常常遇到一些非常實用的技巧不斷地反覆使用,但是我個人覺得對初學者來說很難從樣式作用上自己發現可以如此的用法. 例如 border-radius: 50% 現在已經成了大家隨手都會用來搓圓仔的標準寫法了,但不知道可以這樣直接設百分比從正方形變成圓形的初學者我猜應該也是不少. 正好最近在教人學習 CSS ,整理下來也方便自己備忘參考. 設定 margin 讓區塊置中 對,擺在第一

网页制作常用的CSS知识

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

ssh,ssi基础知识(八)

1.谈谈你对Struts的理解. 答: 1. struts是一个按MVC模式设计的Web层框架,其实它就是一个大大的servlet,这个Servlet名为ActionServlet,或是ActionServlet的子类.我们可以在web.xml文件中将符合某种特征的所有请求交给这个Servlet处理,这个Servlet再参照一个配置文件(通常为/WEB-INF/struts-config.xml)将各个请求分别分配给不同的action去处理. 一个扩展知识点:struts的配置文件可以有多个,可

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