CSS3——03

最新推荐文章于 2022-05-05 19:42:49 发布
最新推荐文章于 2022-05-05 19:42:49 发布
阅读量243 收藏 1
点赞数
分类专栏： 学习笔记 文章标签： CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41857060/article/details/104103338
版权

目录

1.动画

1.1 创建动画及添加动画效果

1.2 时钟案例

2.多列布局

3.伸缩布局

3.1 flex-flow

3.2 flex-grow：定义比例值，扩展子元素宽度

3.3 flex-shink：定义比例值，收缩子元素宽度

3.4 flex

3.5 align-items和align-self

3.6 案例1：宽高自适应

3.7 案例2：携程网

1.动画

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

1.1 创建动画及添加动画效果

1.2 时钟案例

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .clock{
            width: 300px;
            height: 300px;
            border: 10px solid #ccc;
            /*百分比参照元素的实际宽高*/
            border-radius: 50%;
            margin:100px auto;
            position: relative;
        }
        .line{
            width:8px;
            height: 300px;
            background-color: #ccc;
            position: absolute;
            /*居中*/
            left: 50%;
            top:0;
            transform: translate(-50%,0);
        }
        .line1,.line4{
            width: 10px;
        }
        .line2{
            transform: translate(-50%,0) rotate(30deg);
        }
        .line3{
            transform: translate(-50%,0) rotate(60deg);
        }
        .line4{
            transform: translate(-50%,0) rotate(90deg);
        }
        .line5{
            transform: translate(-50%,0) rotate(120deg);
        }
        .line6 {
            transform: translate(-50%, 0) rotate(150deg);
        }
        .cover{
            width: 250px;
            height: 250px;
            border-radius: 50%;
            background-color: #fff;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        /*时*/
        .hour{
            width: 6px;
            height: 80px;
            background-color: red;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-100%);
            transform-origin: center bottom;
            animation: clockAnimation 43200s linear infinite;
        }
        /*分*/
        .minute{
            width: 4px;
            height: 90px;
            background-color: green;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-100%);
            transform-origin: center bottom;
            animation: clockAnimation 3600s linear infinite;
        }
        /*秒*/
        .second{
            width: 2px;
            height: 100px;
            background-color: blue;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-100%);
            /*设置旋转轴心*/
            transform-origin: center bottom;
            /*添加动画*/
            /*秒针：匀速且分为60步*/
            /*steps(60)与animation-timing-function的其它属性(linear...)冲突*/
            animation: clockAnimation 60s infinite steps(60);
        }

        /*圆心*/
        .center{
            width: 20px;
            height: 20px;
            background-color: #ccc;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }

        /*创建动画*/
        @keyframes clockAnimation {
            from{
                transform:translate(-50%,-100%) rotate(0deg);
            }
            to{
                transform:translate(-50%,-100%) rotate(360deg);
            }
        }
</style>

<div class="clock">
    <div class="line line1"></div>
    <div class="line line2"></div>
    <div class="line line3"></div>
    <div class="line line4"></div>
    <div class="line line5"></div>
    <div class="line line6"></div>
    <div class="cover"></div>
    <div class="hour"></div>
    <div class="minute"></div>
    <div class="second"></div>
    <div class="center"></div>
</div>

2.多列布局

CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充，能让文本呈现多列显示。我们知道，当一行文字太长时，读者读起来就比较费劲，有可能读错行或读串行；人们的视点从文本的一端移到另一端、然后换到下一行的行首，如果眼球移动浮动过大，他们的注意力就会减退，容易读不下去。所以，为了最大效率的使用大屏幕显示器，页面设计中需要限制文本的宽度，让文本按多列呈现，就像报纸上的新闻排版一样。（主要是为了提高用户体验）

3.伸缩布局

布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便。CSS3在布局方面做了非常大的改进，使得对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

3.1 flex-flow

(在flex容器里设置)

flex-flow属性是flex-direction属性（定义flex容器子元素的排列方向）和flex-wrap属性（控制flex容器子元素是否换行显示）的简写形式，默认值为row nowrap。

flex-flow:row wrap;相当于flex-direction:row; flex-wrap:wrap;

3.2 flex-grow：定义比例值，扩展子元素宽度

(在子元素里设置)

3.3 flex-shink：定义比例值，收缩子元素宽度

(在子元素里设置)

3.4 flex

(在子元素里设置)

flex属性：flex属性是flex-grow， flex-shrink 和 flex-basis的简写，默认值为0 1 auto，后两个属性可选。

语法：

  1. flex: [flex-grow] [flex-shrink] [flex-basis]  大多数情况下没必要使用这种语法，当使用flex缩写时，大多数情况下没必要使用这种语法
  2. flex: [number]  指定了一个数字，代表了这个伸缩项目该占用的剩余空间比例（最常用，这种语法相当于在设置flex-grow，默认为0）
  3. flex: auto  被设为auto的伸缩项目，会根据主轴自动伸缩以占用所有剩余空间 

应用场景：

3.5 align-items和align-self

align-items：设置子元素(伸缩项)在侧轴方向上的对齐方式（在flex容器里设置）

align-self：设置单个元素在侧轴方向上的对齐方式（在子元素里设置）

align-self的属性值与align-items的属性值一样，不再赘述

3.6 案例1：宽高自适应

  <style>
        *{
            padding: 0;
            margin: 0;
        }
        .layout{
            width: 500px;
            height: 600px;
            background-color: #CCCCCC;
            margin:10px auto;
            /*设置父容器为伸缩盒子*/
            display: flex;
            /*默认的主轴是row,这里需要以column的方式进行排列*/
            flex-direction: column;
        }
        header{
            width: 100%;
            height: 60px;
            background-color: red;
        }
        main{
            width: 100%;
            background-color: green;
            /*main高度不好确定,所以让当前伸缩项占据父容器的剩余空间(这时主轴为column)*/
            flex: 1;
            /*让main成为伸缩盒子*/
            display: flex;
        }
        main > article{
            height: 100%;
            flex: 1;
            background-color: pink;
        }
        main > aside{
            height: 100%;
            flex: 3;
            background-color: darkblue;
        }
        footer{
            width: 100%;
            height: 80px;
            background-color: purple;
        }
    </style>

<div class="layout">
    <header>header</header>
    <main>
        <article>article</article>
        <aside>aside</aside>
    </main>
    <footer>footer</footer>
</div>

3.7 案例2：携程网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>携程网</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        /*顶部块样式*/
        header{
            width: 100%;
            /*设置为伸缩盒子*/
            display: flex;
        }
        header > a{
            /*flex:设置当前子元素占据父容器剩余宽度的比例*/
            flex: 1;
        }
        header > a > img{
            width: 100%;
        }
        /*主体内容块样式*/
        main{
            width: 100%;
            padding:0 10px;
            /*设置盒模型*/
            box-sizing: border-box;
        }
        main > .item{
            width: 100%;
            height: 100px;
            background-color: #57c3ae;
            border-radius: 10px;
            margin-top:10px;
            /*设置为伸缩盒子*/
            display: flex;
        }
        main > .item:nth-of-type(2){
            background-color: #33aa46;
        }
        main > .item:nth-of-type(3){
            background-color: #aa4b40;
        }
        main > .item:nth-of-type(4){
            background-color: #445faa;
        }
        main > .item > .left{
            flex: 1;
        }
        main > .item > .right{
            flex: 2;
            /*设置换行显示*/
            flex-wrap: wrap;
            /*设置为伸缩盒子*/
            display: flex;
        }
        main > .item > .right > a{
            /*如果想让子元素换行显示，必须为子元素设置宽度(子元素宽度总和超过父元素时)*/
            width: 50%;
            box-sizing: border-box;
            border-left: 1px solid #fff;
            border-bottom: 1px solid #fff;
            display: block;
            color: #fff;
            line-height: 50px;
            text-align: center;
            text-decoration: none;
        }
        main > .item > .right > a:nth-last-of-type(-n+2){
            border-bottom:none;
        }
        main > .extra{
            width: 100%;
            display: flex;
        }
        main > .extra > a{
            flex: 1;
        }
        main > .extra > a > img{
            width: 100%;
        }
        /*底部块样式*/
        footer{
            width: 100%;
            font-size: 13px;
        }
        footer > nav{
            width: 100%;
            display: flex;
            border-top:1px solid #ccc;
            border-bottom:1px solid #ccc;
        }
        footer > nav > a{
            flex: 1;
            line-height: 30px;
            text-align: center;
            color: #888;
            text-decoration: none;
        }
        footer > .link{
            text-align: center;
            line-height: 25px;
        }
        footer > .copyRight{
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <header>
        <a href="">
            <img src="../images/banner.jpg" alt="">
        </a>
    </header>
    <main>
        <section class="item">
            <div class="left"></div>
            <div class="right">
                <a href="">海外酒店</a>
                <a href="">团购</a>
                <a href="">特惠酒店</a>
                <a href="">客栈公寓</a>
            </div>
        </section>
        <section class="item">
            <div class="left"></div>
            <div class="right">
                <a href="">海外酒店</a>
                <a href="">团购</a>
                <a href="">特惠酒店</a>
                <a href="">客栈公寓</a>
            </div>
        </section>
        <section class="item">
            <div class="left"></div>
            <div class="right">
                <a href="">海外酒店</a>
                <a href="">团购</a>
                <a href="">特惠酒店</a>
                <a href="">客栈公寓</a>
            </div>
        </section>
        <section class="item">
            <div class="left"></div>
            <div class="right">
                <a href="">海外酒店</a>
                <a href="">团购</a>
                <a href="">特惠酒店</a>
                <a href="">客栈公寓</a>
            </div>
        </section>
        <section class="extra">
            <a href="">
                <img src="../images/extra_1.png" alt="">
            </a>
            <a href="">
                <img src="../images/extra_2.png" alt="">
            </a>
        </section>
    </main>
    <footer>
        <nav>
            <a href="">电话预订</a>
            <a href="">下载客户端</a>
            <a href="">我的订单</a>
        </nav>
        <p class="link">
            <a href="">网站地图</a>
            <a href="">ENGLISH</a>
            <a href="">电脑版</a>
        </p>
        <p class="copyRight">&copy;20** 携程旅行</p>
    </footer>
</div>
</body>
</html>

Galaksen
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
表格新增的属性及高级表单
qq_38068491的博客
09-05 410
一.表格标签与属性 1.表格的新增html属性 1）valign=“top/middle/bottom/baseline”垂直对齐 2）rules=“groups（添加行组与行组和列组和列组之间的分割线）/rows（添加行之间的分割线）/cols（添加列之间的分割线）/all（位于行列之间的线）/none（没有线条）（注意：这个属性添加到table标签里） 行组分组：thead tbody tfo...
day06 移动适配：vw/vh
weixin_43730921的博客
02-09 456
移动适配：vw/vh
前端Html5(18)
weixin_64909133的博客
01-13 761
1.ifame iframe是用来在网页中插入第三方页面，早期的页面使用iframe主要是用于导航栏这种很多页面都相同的部分，这样在切换页面的时候避免重复下载。 --> <!-- 语法：<iframe src="规定在 iframe 中显示的文档的 URL(默认的显示页面)" width="" height="" frameborder="1/0" name="iframe名称" scrolling="yes/no/auto"> </iframe> -->
web前端进阶:＜2＞转换的补充、动画和小案例
aiwanchengxu的博客
05-05 316
想要做好一个精美的网页还是要多练习一下转换，这一期我呢就带大家做一个3d立体魔方，对于大家学习3d和动画还是不错的； 1、那么我们回顾一下上一期的知识点，关于遮罩，我们就要想到定位，一般我们使用子绝父相，然后将遮罩的盒子放在 top:0; left:0; 的位置，更换背景色为渐变： background-image: linear-gradient( transparent, rgba(0,0,0,.4) ); 就可以了； 还记得3d转换的两个重要属性
动画实现始终效果案例（动画的使用，居中的使用）
xqiitan的专栏
03-11 537
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;时钟案例&lt;/title&gt; &lt;style type="text/css"&gt; * { padding: 0; margin:
CSS3——字体颜色渐变
csdn_Sandy的博客
03-21 5880
html <p class="welcome">欢迎光临，地球欢迎你</p> CSS .welcome{ font-size: 3rem; line-height: 4rem; color: #59a5ff; /* Fallback Color */ } @media screen and (-webkit-min-device-pixel-rati...
Css3——模块划分
qq_27628085的博客
11-27 629
选择器 2.css盒子模型 3.总体结构图  
CSS3——齿轮转动关键代码
09-25
css3实现转动的齿轮(chrome)，代码简单实用，感兴趣的朋友可以参考下哈，希望对你有所帮助
CSS3旋转——彩色扇子兼容firefox浏览器
09-25
看到一网站做了一个彩色扇子的视频教程，尼玛还需要10大洋，至此，我有点不爽，于是自己去搞了一个，具体实现html、css如下，感兴趣的朋友可以了解下哈
动态调用css文件——jquery的应用
10-31
动态调用css文件——jquery的应用
走进css——01
01-08
阅读者最好有一点css基础，才能更好深入了解 css中常见长度单位 em 相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：该div继承的父级字体大小*1.5。（根据他爸） rem r即root，始终相...
前端Html5（21）
weixin_64909133的博客
01-13 383
1.表格table </head> <body> <!-- 表格标签自带的非css属性 --> <!-- width="500" 表格的宽 --> <!-- height="400" 表格的高 --> <!-- border="1" 表格的边框 --> <!-- bgcolor="pink" 表格的背景色 --> <!-- bordercolor="red" 表格的边框颜色 --> <!-
animation做时钟
自学前端开发
06-14 298
html代码 <DOCTYPE html> <html> <meta charset="UTF-8"> <title>时钟</title> <link rel="stylesheet" style="text/css" href="css/clock.css"> <body> <div class="clock"> <div class="clock1"></div>
HTML5——接口
Galaksen的博客
10-17 3611
目录 1.网络监听接口 2.全屏接口的使用 3.FileReader的使用 4.拖拽接口 5.地理定位接口 6.Web存储 6.1 sessionStorage 6.2 localStorage 7.应用缓存 8.多媒体接口（自定义播放器案例） 1.网络监听接口 2.全屏接口的使用 全屏操作的主要方法和属性 ： requestFullScreen()：开启全屏显示...
轮播图案例
Galaksen的博客
08-24 2368
1.简单的轮播图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单的轮播图</title> <style> ul { list-style: none;...
offset系列
Galaksen的博客
08-25 2104
元素的样式属性是无法直接通过：对象.style.属性来获取的(这种方式只能获取内联样式) 补充：对象.style.属性="value" 设置的也是内联样式 用offset(位移)系列获取元素尺寸(无论样式是设置在属性中还是标签中都可以获取) offsetWidth：获取元素的宽 offsetHeight：获取元素的高 offsetLeft：就是这个元素左边框外，到自己的offsetPar...
DOM——01（获取元素；onclick事件；案例1）
Galaksen的博客
08-04 1701
目录 1.为元素注册事件案例(onclick事件) 2.点击按钮显示图片并设置其宽高 3.点击按钮修改p标签的内容 4.点击按钮修改a标签的地址和文字内容 5.点击按钮设置多个p标签的内容 6.点击按钮修改图片的alt和title属性 7.点击按钮修改所有文本框的值 8.点击每个图片弹出对话框 9.点击按钮修改当前按钮(自身)的value属性 10.排他功能 11.点击超链接...
HTML三大元素——行内元素、块级元素、行内块级元素
Galaksen的博客
04-18 1491
HTML元素大体被分为三种：行内元素、块级元素、行内块级元素 想实现三者之间的转换，可使用display属性： display:inline;//行内元素 display:block;//块级元素 display:inline-block;//行内块级元素 1.行内元素 1.1 行内元素列表 b,big,i,small,tt abbr,acronym,cite,...
client系列
Galaksen的博客
09-04 1178
1.client(可视区)系列 clientWidth：可视区域的宽(没有边框)，边框内部的宽度 clientHeight：可视区域的高(没有边框)，边框内部的高度 clientLeft：左边框的宽度 clientTop：上边框的宽度 2.图片跟随鼠标移动案例 注意点：图片要脱离文档流（absolute） 因为IE8的浏览器中针对事件参数对象使用的是window.event...
css3——div内文字换行及省略显示
最新发布
05-13
要实现在div内的文字换行和省略显示，可以使用CSS3中的text-overflow属性和white-space属性。 text-overflow属性可以设置当文本溢出容器时如何显示。常见的值有： - clip：裁剪文本，超出部分不显示。 - ellipsis...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值