css基础(6)

css基础(6)

css用户界面样式

所谓的界面样式就是更改一些用户操作样式,比如更改用户鼠标样式,表单轮廓等。

鼠标样式cursor

设置或检索在对象上移动的指针采用何种系统预定义的光标形状
cursor:default 小白 | pointer 小手 | move 移动 | text 文本

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标手势</title>
    <style>
        li:first-child {
            cursor: default;
        }

        li:nth-child(2) {
            cursor: pointer;
        }

        li:nth-child(3) {
            cursor: move;
        }

        li:last-child {
            cursor: text;
        }
    </style>
</head>

<body>
    <ul>
        <li>小白</li>
        <li>小手</li>
        <li>移动</li>
        <li>文本</li>
    </ul>
</body>

</html>

尽量不要用hand 因为火狐不支持 pointer是ie6以上都支持

轮廓 outline

是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
outline:outline-color || outline-style || outline-width
一般都是去掉的

<input  type="text"  style="outline: 0;"/>

防止拖拽文本框

resize:none;这个属性可以防止火狐、谷歌等浏览器拖动文本域。
右下角不可拖拽

textarea  style="resize: none;"></textarea>

垂直对齐vertical-align

有宽度的块级元素居中对齐margin:0 auto;
文字居中对齐 text-align:center;
vertical-align : baseline |top |middle |bottom
基线对齐:默认的是文字和图片基线对齐 vertical-align:baseline;
垂直居中:默认的是文字和图片垂直对齐 vertical-align:middle;
顶部对齐:默认的是文字和图片顶部对齐 vertical-align:top;
底部对齐:默认的是文字和图片底部对齐 vertical-align:bottom;
vertical-align 不影响块级元素中的内容对齐,它只针对于 行内元素或者行内块元素,特别是行内块元素, 通常用来控制图片和表单等。

去除图片底侧空白缝隙

如果一个元素没有基线,比如图片或者表单等行内块元素,则他的底线会和父级盒子的基线对齐,这样就是图片底侧会有一个空白缝隙。
解决方法:
1.给img vertical-align:middle | top等等,让图片不要和基线对齐
2.给img 添加display:block;转换为块级元素就不会存在问题了。

溢出的文字隐藏

word-break:自动换行
normal:使用默认浏览器的换行规则
break-all:允许在单词内换行
keep-all:只能在半角空格或连字符处换行
text-overflow:文字溢出
text-overflow:clip | ellipsis
设置或检索是否使用一个省略号标记(…)表示对象内文本的溢出
clip:不显示省略标记(…),而是简单的裁切
ellipsis:当对象内文本溢出时显示省略标记(…)

css精灵技术(雪碧图)

当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户
然而,一个网页中往往会应用很多小的背景图作为修饰,当网页中的图像过多时,服务器就会频繁的接收和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现css精灵技术。
使用css的background-image、background-repeat、background-position属性进行背景定位,其中最关键使用background-position属性精准定位
字体图标
图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的”http请求”,这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”,因为图片放大和缩小会失真。 我们后面会学习移动端响应式,很多情况下希望我们的图标是可以缩放的。这就是字体图标(iconfont).可以使用阿里巴巴的iconfont矢量图标库。
字体图标优点
可以做出跟图片一样可以做的事情,改变透明度、旋转度,等…
但是本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果等等…
本身体积更小,但携带的信息并没有削减。
几乎支持所有的浏览
阿里巴巴矢量库
fontello
font-awesome
Glyphicon Halflings
Icons8

css滑动门技术

核心技术就是利用css精灵(主要是背景图片位置)和盒子padding撑开宽度,以便能适应不同字数的导航栏。
一般经典布局:

<li>
  <a href="#">
    <span>导航栏内容</span>
  </a>
</li>

总结:

  1. a设置背景左侧,padding撑开合适宽度
  2. span设置背景右侧,padding撑开合适宽度,剩下由文字继续撑开
  3. 之所以a包含span就是因为整个导航都是可以点击的、
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css滑动门</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background: url(wx.jpg) repeat-x;
        }

        ul li {
            list-style: none;
        }

        .nav {
            height: 75px;
        }

        .nav li {
            float: left;
            color: #ccc;
            margin: 0 10px;
            padding-top: 20px;
        }

        .nav li a {
            display: block;
            color: #ccc;
            text-decoration: none;
            background: url(to.png) no-repeat;
            line-height: 30px;
            padding-left: 15px;
        }

        .nav li span {
            display: block;
            line-height: 30px;
            padding-right: 15px;
            background: url(to.png) right center;
        }

        .nav li a:hover {
            background-image: url(ao.png);
        }

        .nav li a:hover span {
            background-image: url(ao.png);
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li><a href="#"><span>首页</span></a></li>
            <li><a href="#"><span>帮助与反馈</span></a></li>
            <li><a href="#"><span>微信支付</span></a></li>
            <li><a href="#"><span>公众平台</span></a></li>
        </ul>
    </div>
</body>

</html>
在这里插入图片描述

伸缩布局(css3)

主轴:Flex容器的主轴主要是用来配置Flex项目,默认是水平方向
侧轴:与主轴垂直的轴叫侧轴,默认是垂直方向
方向:默认主轴从左向右,侧轴默认从上到下
主轴和侧轴并不是固定不变的,通过flex-direction可以互换
在这里插入图片描述
属性

  1. flex-direction:调整主轴方向
  2. justify-content:调整主轴对齐
  3. align-items:调整侧轴对齐
  4. flex-wrap:控制是否换行
  5. align-content:对齐
  6. flex-flow是flex-direction、flex-wrap的简写形式
  7. flex子项目在主轴的缩放比例,不指定flex属性,则不参与伸缩分配
  8. order控制子项目的排列顺序,正序方式排序,从小到大
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            display: flex;
            width: 100%;
            height: 150px;
            background-color: #ccc;
            text-align: center;
        }

        .sing {
            width: 150px;
            line-height: 150px;
            background-color: pink;
            border: 1px solid #ccc;
        }

        /* 为自动缩放 */
        .sings {
            flex: 1;
            line-height: 150px;
        }

        .box1 {
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid green;
            height: 250px;
        }

        .p {
            border: 1px solid pink;
        }

        .demo {
            display: flex;
            /*设置为flex布局*/
            justify-content: space-around;
        }

        .demo>div {
            flex: none;
        }

        .left {
            width: 200px;
            height: 200px;
            background: #d4cdcd;
        }

        .right {
            width: 380px;
            height: 200px;
        }

        .demo1 {
            width: 600px;
            height: 150px;
            border: 1px solid #b7b2b7;
            margin: 30px auto;
            padding-top: 17px;
            display: flex;
            /*设置为flex布局*/
            justify-content: space-around;
        }

        .demo1>div {
            flex: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="sing">歌手</div>
        <div class="sings">歌手</div>
        <div class="sing">歌手</div>
        <div class="sing">歌手</div>
    </div>

    <div class="box1">
        <div class="p">
            我是一个p标签
            我是一个p标签
            我是一个p标签
            我是一个p标签
        </div>
    </div>

    <div class="demo">
        <div class="left"></div>
        <div class="right">
            <p>Iphone7 PLUS XXXXXXXXXX</p>
            <span>总人数99</span>
            <span>剩余人数33</span>
            <div class="btn">立即参与</div>
        </div>
    </div>

    <div class="demo1">
        <div class="left1"></div>
        <div class="center1">
            <p>description</p>
            <p>description</p>
            <p>description</p>
            <span>description</span>
        </div>
        <div class="btn1">确认</div>
        <div class="btn1">取消</div>
    </div>

</body>

</html>
在这里插入图片描述

过渡(css3)

过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
语法:
transition:要过渡的属性 花费的时间 运动曲线 何时开始;

属性描述
transition简写属性,用于在一个属性中设置四个过渡属性
transition-property规定应用过渡的css属性的名称
transition-duration定义过渡效果花费的时间,默认是0.
transition-timing-function规定过渡效果的时间曲线,默认是ease
transition-delay规定过渡效果何时开始,默认是0.

linear 匀速 ease 逐渐慢下来 ease-in 加速 ease-out 减速 ease-in-out 先加速后减速

img {
  width:80px; height: 80px; border:8px solid #ccc; border-radius: 50%;
  transition:transform 0.5s ease-in 0s;
}
img:hover {
  transform:rotate(180deg);
}

2D变形(css3)

转换是css3中具有颠覆性的特征之一,可以实现元素的位移、旋转、变形、缩放,甚至支持矩阵方式。
变形转换transform
移动 translate(x,y)

translate(50px,50px);

使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。
可以改变元素的位置,x、y可为负值;
translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)
translateX(x)仅水平方向移动(X轴移动)
translateY(Y)仅垂直方向移动(Y轴移动)
让定位的盒子水平居中
缩放scale(x,y)
scale(X,Y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)
scaleX(x)元素仅水平方向缩放(X轴缩放)
scaleY(y)元素仅垂直方向缩放(Y轴缩放)
scale()的取值默认的值为1,当值设置为0.01到0.99之间的任何值,作用使一个元素缩小;而任何大于或等于1.01的值,作用是让元素放大
旋转rotate(deg)
可以对元素进行旋转,正值为顺时针,负值为逆时针;
transform:rotate(45deg)

  1. 当元素旋转以后,坐标轴也跟着发生的转变
  2. 调整顺序可以解决,把旋转放到最后
  3. 注意单位是deg度数
    倾斜skew(deg,deg)
    transform:skew(30deg,0deg)
    该实例通过skew方法把元素水平方向上倾斜30度,处置方向保持不变。
    可以使元素按一定的角度进行倾斜,可为负值,第二个参数不写默认为0。
    transform-origin:可以调整元素转换的原点
 div{transform-origin: left top;transform: rotate(45deg); }  /* 改变元素原点到左上角,然后进行顺时旋转45度 */   

3D变形

左手坐标系
伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方。这样我们就建立了一个左手坐标系,拇指、食指和中指分别代表X、Y、Z轴的正方向.
旋转rotateX(deg)、rotateY(deg)、rotateZ(deg)

透视(perspective)

perspective有两种写法

  1. 作为一个属性,设置给父元素,作用于所有3D转换的子元素
  2. 作为transform属性的一个值,做用于元素自身
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动</title>
    <style>
        div {
            height: 250px;
            width: 250px;
            background-color: pink;
            transition: all 5s;
            /* 垂直水平居中 */
            /* margin: 0 auto;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); */
            border: 1px solid black;
            /* 基于一点旋转 */
            /* transform-origin: 20px 30px; */
        }

        /* 向右移动 */
        /* div:active {
            transform: translateX(300px);
        } */

        /* 缩小放大 */
        /* div:hover {
            transform: scale(0.2);
        } */

        /* 旋转 */
        div:hover {
            transform: rotateY(360deg);
        }
    </style>
</head>

<body>
    <div></div>
    <!-- <div class="black"></div> -->
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片经某一点角度旋转</title>
    <style>
        div {
            width: 150px;
            height: 100px;
            margin: 200px auto;
            border: 1px solid black;
            position: relative;


        }

        div img {
            position: absolute;
            top: 0;
            left: 0;
            transition: all 0.6s;
            transform-origin: top right;
        }

        div:hover img:nth-child(1) {
            transform: rotate(60deg);
        }

        div:hover img:nth-child(2) {
            transform: rotate(120deg);
        }

        div:hover img:nth-child(3) {
            transform: rotate(180deg);
        }

        div:hover img:nth-child(4) {
            transform: rotate(240deg);
        }

        div:hover img:nth-child(5) {
            transform: rotate(300deg);
        }
    </style>
</head>

<body>
    <div>
        <img src="../0413/a.jpg" width="150px" height="100px">
        <img src="../0413/b.jpg" width="150px" height="100px">
        <img src="../0413/timg (2).jpg" width="150px" height="100px">
        <img src="../0413/timg (4).jpg" width="150px" height="100px">
        <img src="../0413/timg (6).jpg" width="150px" height="100px">
    </div>
</body>

</html>
在这里插入图片描述

3D呈现(transform-style)

设置内嵌的元素在 3D 空间如何呈现,这些子元素必须为转换原素。

flat:所有子元素在 2D 平面呈现

preserve-3d:保留3D空间

3D元素构建是指某个图形是由多个元素构成的,可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。

一般而言,该声明应用在3D变换的兄弟元素们的父元素上。

动画(css3)

动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。

语法格式:

animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;

在这里插入图片描述
@keyframes 动画名称 {
from{ 开始位置 } 0%
to{ 结束 } 100%
}
animation-iteration-count:infinite; 无限循环播放
animation-play-state:paused; 暂停动画”
开门大吉

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开门大吉</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 450px;
            height: 300px;
            background: url(chu.jpg) no-repeat;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
            /* 给盒子添加透视效果 */
            perspective: 1000px;
        }

        .b-left,
        .b-right {
            position: absolute;
            top: 0;
            width: 50%;
            height: 100%;
            transition: all 5s;
            background: url(bg.png);
        }

        .b-left {
            left: 0;
            transform-origin: left;
        }

        .b-right {
            right: 0;
            transform-origin: right;
        }

        .b-left::before,
        .b-right::before {
            content: "";
            width: 20px;
            height: 20px;
            position: absolute;
            top: 50%;
            border: 1px solid black;
            border-radius: 50%;
            transform: translateY(-50%);
        }

        .b-left::before {
            right: 5px;

        }

        .b-right::before {
            left: 5px;
        }

        .box:hover .b-left {
            transform: rotateY(-130deg);
        }

        .box:hover .b-right {
            transform: rotateY(130deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="b-left"></div>
        <div class="b-right"></div>
    </div>
</body>

</html>

发表评论