css基础（6）

最新推荐文章于 2024-08-14 15:56:32 发布

触不可及的Allen

最新推荐文章于 2024-08-14 15:56:32 发布

阅读量314

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/Jy123_/article/details/105864661

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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>

总结：

a设置背景左侧，padding撑开合适宽度
span设置背景右侧，padding撑开合适宽度，剩下由文字继续撑开
之所以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可以互换
在这里插入图片描述
属性

flex-direction：调整主轴方向
justify-content：调整主轴对齐
align-items：调整侧轴对齐
flex-wrap：控制是否换行
align-content：对齐
flex-flow是flex-direction、flex-wrap的简写形式
flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
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)

当元素旋转以后，坐标轴也跟着发生的转变
调整顺序可以解决，把旋转放到最后
注意单位是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有两种写法

作为一个属性，设置给父元素，作用于所有3D转换的子元素
作为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>

触不可及的Allen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基础（6）

css用户界面样式所谓的界面样式就是更改一些用户操作样式，比如更改用户鼠标样式，表单轮廓等。鼠标样式cursor设置或检索在对象上移动的指针采用何种系统预定义的光标形状cursor：default 小白 | pointer 小手 | move 移动 | text 文本<!DOCTYPE html><html lang="en"><head> ...
复制链接

扫一扫

专栏目录