CSS基础篇之背景、过渡动画

background-origin（背景原点）

设置元素背景图片的原始起始位置。必须保证背景是background-repeat为no-repeat属性才能生效。

background-origin：border-box|padding-box|content-box；

border-box

这是用border-box时图片位于边框左上角

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

        .img{

                border: 30px dotted black;

                width: 400px;

                height: 204px;

                background: url(36686900_p0.jpg) no-repeat;

                background-origin: border-box;

        </style>

    </head>

    <body>

        <div class="img"></div>

    </body>

</html>

padding-box

它看上去和下面的content-box没什么不同，但仔细用浏览器的开发者工具(F12)来看一下图片的位置的话padding-box位于内边距以内含内边距、内容这两个里面。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

        .img{

                border: 30px dotted black;

                width: 400px;

                height: 204px;

                background: url(36686900_p0.jpg) no-repeat;

                background-origin: padding-box;

        </style>

    </head>

    <body>

        <div class="img"></div>

    </body>

</html>

content-box

content-box位于内容部分padding-box位于内边距以内包括内边距，两者需要区分好。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style type="text/css">

            .img{

                border: 30px dotted black;

                width: 400px;

                height: 204px;

                background: url(36686900_p0.jpg) no-repeat;

                background-origin: content-box;

        </style>

    </head>

    <body>

        <div class="img"></div>

    </body>

</html>

背景显示区域

设定背景区域裁剪的区域

语法：

background-clip：border-box|padding-box|content-box|text

将图片的溢出部分裁剪。

裁剪部分理解和背景原点意思理解可以为一样

三个以不同位置裁剪的图片。

背景大小

background-size

以长度或者百分比显示，还可以通过cover和contain对图片进行伸缩。

div{

    background：url(img.jpg);

    background-size:80px 30px;

    background-repeat:no-repeat;

}

背景样式缩写

规格background：背景色背景图背景平铺方式背景定位

缩写

div{background：#ccc url(img.png) no-repeat  left top;}

多重背景

也可以拆开写

background-repeat : repeat1,repeat2,...,repeatN;

backround-position : position1,position2,...,positionN;

background-size : size1,size2,...,sizeN;

background-attachment : attachment1,attachment2,...,attachmentN;

background-clip : clip1,clip2,...,clipN;

background-origin : origin1,origin2,...,originN;

background-color : color;

注意用缩写时记得用 , 号间隔

如果有size值，需要紧跟position用 / 隔开

如果有多个背景图，如果其它属性只有一个，表明所有图片都应用到。

background-color只能设置一个。

列表样式

1.项目符号

list-style-type：符号样式；

ul{

    list-style-type：符号样式；

}

符号样式有很多

disc：

实心圆(CSS1)

circle：

空心圆(CSS1)

square：

实心方块(CSS1)

decimal：

阿拉伯数字(CSS1)

lower-roman：

小写罗马数字(CSS1)

upper-roman：

大写罗马数字(CSS1)

lower-alpha：

小写英文字母(CSS1)

upper-alpha：

大写英文字母(CSS1)

none：

不使用项目符号(CSS1)

armenian：

传统的亚美尼亚数字(CSS2)

cjk-ideographic：

浅白的表意数字(CSS2)

georgian：

传统的乔治数字(CSS2)

lower-greek：

基本的希腊小写字母(CSS2)

hebrew：

传统的希伯莱数字(CSS2)

hiragana：

日文平假名字符(CSS2)

hiragana-iroha：

日文平假名序号(CSS2)

katakana：

日文片假名字符(CSS2)

katakana-iroha：

日文片假名序号(CSS2)

lower-latin：

小写拉丁字母(CSS2)

upper-latin：

大写拉丁字母(CSS2)

自定义项目符号

用图片插入

list-style-image：none|url

ul{

    list-style-image：url(img.png);

}

变形样式

改变元素大小，透明，旋转角度，扭曲等

语法：transorm：none |<transform-function>+

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

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

translateX()：指定对象X轴（水平方向）的平移

translateY()：指定对象Y轴（垂直方向）的平移

rotate()：指定对象的2D rotation（2D旋转），需先有 <' transform-origin '> 属性的定义

scale()：指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值

skew()：指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

translate3d()：指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略

过渡动画

<' transition-property '>：

检索或设置对象中的参与过渡的属性

<' transition-duration '>：

检索或设置对象过渡的持续时间

<' transition-timing-function '>：

检索或设置对象中过渡的动画类型

<' transition-delay '>：

检索或设置对象延迟过渡的时间

利用上面过渡动画和变形样式做出

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .img{

                width: 100px;

                height: 100px;

                border-radius: 10px;

                background-color: #808080;

                /*移动X,Y*/

                /*transform: translate(30% 30%);*/

                /*移动X*/

                /*transform: translateX(200%);*/

                /*移动y*/

            /*    transform: translateY(200%);*/

                transition: all 1s;

            }

            .img:hover{

                -webkit-transform: translateY(200%);

            }

            .img:active{

                -webkit-transform: translate(200% 200%);

            }

        </style>

    </head>

    <body>

        <div class="img"></div>

    </body>

</html>

还有

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .img2{

                width: 100px;

                height: 100px;

                border-radius: 10px;

                background-color: black;

                transform-origin:0 0;

                /*transform: rotate(15deg);*/

                transition: all 1s;

            }

            .img2:hover{

                -webkit-transform: rotate(15deg);

            }

            .img2:active{

                -webkit-transform:translateY(200%) ;

            }

        </style>

    </head>

    <body>

        <div class="img2"></div>

    </body>

</html>

CSS基础篇之背景、过渡动画的更多相关文章

CSS基础篇之了解CSS和它的基本属性
CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...
Css中的变形及过渡动画
在css3的标准中新增加了变形样式,这些样式使得网页中各元素的位置形状的变换变得更加容易.其语法如下: transform:none | <transform-function>+ 其中对 ...
css基础-盒子模型+背景和列表
border-style的值: none 无 dotted 点状 dashed 虚线 solid 实线 double 双实线 margin: 垂直方向两个相邻元素都设置了外边距,那么外边距会发生合并 ...
CSS 奇技淫巧：动态高度过渡动画
这个问题源自于掘金上的一个留言,一个朋友问到,为什么我下面这段代码的高度过渡动画失效了? 伪代码大概是这样: { height: unset; transition: all 0.3s linear; ...
CSS 基础篇、绝对有你想要
本章内容: 简介 CSS 定义四种引入方式样式应用的顺序选择器(Selector) * 通用元素选择器标签选择器 class 类选择器 # ID选择器 , 多元素选择器后代元素选择器 > ...
html+css基础篇
2016年11月19号,计划把基础在看一下,听大神说好的东西就要多看几遍,知识是学来用的解决问题的,加油接下来的是我在自学中的小笔记吧,每天都在保持几个小时的学习思考状态,由于要升本所以学前端的时间 ...
CSS基础篇之选择符3
border(边框) 如何用CSS调出边框我们给p标签加一个边框试一下 p{ border:1px solid #ccc:/*这是缩写*/ } 第一个值是为边框的宽度第二个值是为边框线样式为直线 ...
CSS基础篇之选择符
关系选择符 E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素. <html> <head> <meta chars ...
html/css基础篇——iframe和frame的区别【转】
转自共享圈的使用iframe的优缺点,为什么少用iframe以及iframe和frame的区别.其中本人不认同的地方有做小修改注:HTML5不再支持使用frame,iframe只有src 属性一. ...

随机推荐

iOS开发常用校验
一.身份证号码校验 + (BOOL)cheakIdentityCard: (NSString *)value { value = [value stringByTrimmingCharactersIn ...
Redis Sentinel集群配置中的一些细节
今天在配置Redis集群,用作Tomcat集群的缓存共享.关于Redis集群的配置网上有很多文章,这里只是记录一下我在配置过程中遇到的一些小的细节问题. 1. 关于Protected Mode的问题 ...
AspNetPager分页控件的使用
下面所记得东西仅仅是使用方法,详细知识点请看链接:http://www.webdiyer.com/Controls/AspNetPager/Downloads 首先:从网站上下载并安装控件下载地址: ...
MYSQL数据库相关知识合集
1 MYSQL取得某一范围随机数: 关键词:RAND() [产生0~1之间的随机数] mysql> SELECT RAND( ), RAND( ), RAND( ); +----------- ...
LeetCode 368
题目描述: Given a set of distinct positive integers, find the largest subset such that every pair (Si, S ...
embed chrome 无法播放问题
火狐下<embed src='1.mp3' autostart='false' hidden='true' loop='false' ></embed>正常, chrome 不 ...
Datazen安装
Datazen是被微软收购的移动端全平台的数据展现解决方案.此篇主要介绍其安装过程. 下载页面,需要留意一下的是目前还没有中文版: http://www.datazen.com/start/ 点击Do ...
Android-Spinner [使用C# And Java实现]
效果如下: C#实现代码 using Android.App; using Android.OS; using Android.Widget; namespace SpinnerDemo { [Act ...
KeyedPriorityQueue
// <copyright file="KeyedPriorityQueue.cs" company="Microsoft">Copyright ( ...
【Hibernate框架】flush机制
背景: 一个偶然的机会,我做了一个例子,中间我遇到了一个有意思的问题,就是在执行commit方法之前,做了两次save操作,如下: SessionFactory sf = new Configurat ...

CSS基础篇之背景、过渡动画

CSS基础篇之背景、过渡动画的更多相关文章

随机推荐

热门专题