CSS笔记（10）

最新推荐文章于 2024-09-26 19:50:45 发布
最新推荐文章于 2024-09-26 19:50:45 发布
阅读量50 收藏
点赞数
文章标签： css 笔记 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71067366/article/details/132113819
版权

1.小球跳跃 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            height:500px;
            border-bottom: 10px black solid;
            margin:50px auto;
            overflow:hidden;
        }
        .outer div{
            float:left;
            width:100px;
            height:100px;
            border-radius: 50%;
            animation:ball .5s forwards linear infinite alternate;
        }
        div.box1{
            
            background-color: #bfa;
animation-delay: .1s;
        }
        div.box2{
            width:100px;
            height:100px;
            border-radius: 50%;
            background-color:red;
            animation-delay: .2s;
        }
        div.box3{
            width:100px;
            height:100px;
            border-radius: 50%;
            background-color: olivedrab;
            animation-delay: .3s;
        }
        div.box4{
            width:100px;
            height:100px;
            border-radius: 50%;
            background-color: #bfa;
            animation-delay: .4s;
        }
        div.box5{
            width:100px;
            height:100px;
            border-radius: 50%;
            background-color: orange;
            animation-delay: .5s;
        }
        div.box6{
            width:100px;
            height:100px;
            border-radius: 50%;
            background-color: blue;
            animation-delay: .6s;
        }
        div.box7{
            width:100px;
            height:100px;
            border-radius: 50%;
            background-color: black;
            animation-delay: .7s;
        }
        @keyframes ball {
            from{
                margin-top: 0;
            }
            to{
                margin-top: 400px;
            }
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
        <div class="box7"></div>
    </div>
</body>
</html>

2.变形平移

1）变形就是指通过CSS来改变元素的形状或位置

2）变形不会影响到页面的布局

3）transform用来设置元素的变形效果

平移

translateX( ) 沿着x轴方向平移

translateY( ) 沿着y轴方向平移

translateZ( ) 沿着z轴方向平移

平移元素，百分比是相对于自身计算的

当元素大小不确定时的居中代码

.box3{
        position:absolute;
        background-color: orange;
        left:50%;
        top:50%;
        transform:translateX(-50%) translateY(-50%);
    }

3.z轴平移

1）设置当前网页的视距，人眼距离网页的距离

html{
perspective:800px;
}

2)z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离

3）距离越大，元素离人越近

4）平移属于立体效果（近大远小），默认情况下网页不支持透视，如果需要看见效果，必须设置网页的视距

4.旋转

通过旋转可以使元素沿着x  y  或z轴旋转指定的角度

1）rotateX( )

2）rotateY( )

3）rotateZ( )

设置视距之后才会有近大远小的效果

        transform:rotateX(180deg);

 5.鸭子表

<style>
        .clock{
            width:500px;
            height:500px;
            margin:0 auto;
            margin-top: 100px;
            background-image: url(./图片列表/u=2385787802\,2145275951&fm=253&fmt=auto&app=138&f=PNG.webp);
            background-size: cover;
            border-radius: 50%;
            position: relative;
        }
        .clock>div{
            position: absolute;
            top:0;
            left: 0;
            bottom: 0;
            right: 0;
            margin:auto;
        }
        .hour-wrapper{
            width:70%;
            height:70%;
            animation:run 3600s infinite;
        }
        .hour{
            width:6px;
    height: 50%;
    background-color: black;
    margin: 0 auto;
        }
        .min-wrapper{
            width:80%;
            height:80%;
            animation:run 360s steps(60) infinite;
        }
        .min{
            width:4px;
    height: 50%;
    background-color: black;
margin: 0 auto;
}
        .sec-wrapper{
            width:95%;
            height:95%;
            animation:run 60s steps(60) infinite;
        }
        .sec{
            width:2px;
    height: 50%;
        background-color: black;
    margin: 0 auto;
    }
    @keyframes run{
        from{
            transform: rotateZ(0);
        }
        to{
            transform: rotateZ(360deg);
        }
    }
    </style>
<body>
    <div class="clock">
        <div class="hour-wrapper">
            <div class="hour"></div>
        </div>
        <div class="min-wrapper">
            <div class="min"></div>
        </div>
        <div class="sec-wrapper">
            <div class="sec"></div>
        </div>
    </div>
</body>

 6.立方体练习

1）设置3D变形效果

transform-style:preserve-3d;

2) 为元素设置透明效果

opacity:0.7;

7.缩放

对元素进行缩放的函数

1）scaleX( ) 水平方向的缩放

2）scaleY( ) 垂直方向的缩放

3）scale( )双方向的缩放

4）变形的原点

默认值：center

transform-origin

transform-origin:20px 20px;

8.less简介

1）less是一门CSS的预处理语言

2）less是一个CSS的增强版，通过less可以编写可以编写更少的代码实现更强大的样式

3) 在less中添加了许多的新的特性，像对变量的支持、对mixin的支持......

4）css原生也支持变量的设置

--color:#bfa;
background-color:var(--color);

5) calc( )计算函数

width:calc(200px*2);

6)less的语法大体上和css语法一致，但是less中增添了许多对css的拓展

所有浏览器无法直接执行less代码，要执行必须将less转换为css，然后再由浏览器执行

9.less的语法

1）less中的单行注释，注释中的内容不会被解析到css中；而css中的注释，内容会被解析到css文件中

2）变量，在变量中可以存储一个任意的值，并且我们可以在需要时，任意修改变量中的值

变量的语法：@变量名

3）使用变量时，如果是直接使用，则以@变量名的形式使用即可

4）作为类名，或者一部份值使用时，必须以@{变量名}的形式使用

5）变量发生重叠时，会优先使用比较近的变量

6）可以在变量声明前就使用变量

less中代码

.box1{
    background-color: aquamarine;
    .box2{
        background-color: black;
        .box4{
            background-color: azure;
        }
    }
    
    .box3{
        background-color: red;
    }
}
@a:200px;
@c:box6;
.box5{
    width:@a;
}
.@{c}{
    width:@a;
}

css中代码

.box1 {
  background-color: aquamarine;
}
.box1 .box2 {
  background-color: black;
}
.box1 .box2 .box4 {
  background-color: azure;
}
.box1 .box3 {
  background-color: red;
}
.box5 {
  width: 200px;
}
.box6 {
  width: 200px;
}

10.父元素和扩展

1）&表示外层的父元素

2）:extend( ) 对当前选择器扩展指定选择器的样式（选择器分组）

3）直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制

.p3{
.p1();
}

4) 使用类选择器可以子啊选择器后面添加一个括号，这时实际上就创建了一个mixins

less中代码 

.p4(){
    width:200px;
    height:200px;
    background-color:#bfa;
  }
  .p5{
    .p4;
  }

 css中代码

.p5 {
  width: 200px;
  height: 200px;
  background-color: #bfa;
}

dont touch me！
关注
css笔记css笔记css笔记
04-03
在网页设计领域，CSS（层叠样式表）扮演着至关重要的角色，它使得网页的布局、字体、颜色、背景等视觉元素得以精确控制。CSS 的引入解决了早期纯 HTML 页面表现与结构混合的问题，实现了内容与样式的分离，提高了...
狂神说视频-CSS笔记.pdf
11-12
CSS 笔记 CSS（Cascading Style Sheets）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。它可以静态地美化网页，也可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行...
3D旋转
m0_56175362的博客
03-30 133
3d旋转 格式： 3D旋转 格式： transform：rotateX（旋转角度） transform：rotateY（旋转角度） transform：rotateZ（旋转角度） transform：rotate3d（1,1,1,45deg） 指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z取值为0/1 0表示不旋转 1表示旋转 第4个参数表示旋转的角度，参数不允许省略 浏览器默认是2d的，如果我们想要看到3d效果，需要添加一个视距属性。 视距：人眼与网页的距离
CSS中动画——Z轴平移，旋转，缩放
王春燕的博客
04-14 8210
一、Z轴平移 z轴平移，调整元素在z轴的位置，正常情况下调整元素和人眼之间的距离，距离越大，元素离人越近，z轴平移属于立体效果（近大远小），默认情况下网页不支持透视，如果需要看到效果，必须要设置网页的视距 1:设置视距 —perspective [pə'spektiv] 设置当前网页的视距为800px，人眼距离网页的距离，一般不小于600px —设置方式一 html{ perspective: 800px; } —设置方式二： —perspective(800px) 谷歌要直接设置在tra
CSS笔记
2201_76100326的博客
08-12 1960
before定位的基准是其主元素的右上⻆，after定位的基准是主元素的结尾处。当主元素没有内容时before与after仍会正常⼯作，属性为行内元素，若需要设置高宽度等属性需要首先设置为块元素。content是伪元素必需的属性。若伪元素没有内容，需赋值为空格：content: ' ';before与after的主要用途是对元素默认样式的的美化：美化时需要结合定位于内容。⼀般讲主元素设置为position：relative，伪元素设置为position：absolute，以方便对伪元素定位。
CSS学习笔记
m0_58761900的博客
09-18 3109
5.1 边框:border 5.2 内边距：padding 5.3 外边距:margin 5.4 块级元素的水平居中 7.1 弹性布局：flex 7.2 水平方向的排列方式：justify-content 7.3 垂直方向的排列方式：align-items
CSS入门学习笔记+案例
热门推荐
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
HTML CSS整理笔记
Lin16819的博客
12-12 3万+
常见字体单位： 1.em 移动端常用的字体尺寸单位，说白em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5。 但当div进行嵌套时，em始终按当前div继承的字体大小来缩放。 2.rem r是root的意思，即相对于根节点html的font-size进行缩放，当有嵌套关系时，嵌套关系的元素的字体大小始终按照根节点的字体大小...
css 笔记2
m0_68844946的博客
06-13 1785
这是div标签</div>复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。} </style> <div id="red">这是div标签
CSS 学习笔记
weixin_42098295的博客
05-06 1275
定位（Positioning）：static, relative, absolute, fixed, sticky。组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)。媒体查询（Media Queries）：根据不同的屏幕尺寸或设备特性应用不同的样式。属性选择器：根据元素属性选择，如 [type="text"]。Grid：二维布局模型，提供网格系统，进行更复杂的布局设计。伪元素选择器：如 ::before, ::after。
前端css基础学习笔记
a_big_panda的博客
01-22 999
例如： 效果：例如：效果：例如：效果：选择页面中对应的标签（找她），方便后续设置样式（改她）例如：效果：例如：效果：注意：一个id选中多个标签也有效果，但不符合规范，规范是一个id选择器只选中一个标签例如：效果：例如：效果：例如：效果：注意点：例如：效果：例如：效果：注意：注意：例如：效果：例如：效果：注意：例如：效果：例如：效果：注意：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置例如：效果：注意：开发中会使用text-decoration：none；清除a标签默认的下
CSS入门笔记
m0_74293254的博客
09-19 1064
CSS（Cascading Style Sheets，层叠样式表）是一种用于描述网页外观和布局的样式表语言。它为 HTML 提供了视觉上的美化工具，能够控制网页中元素的展示方式，包括字体、颜色、布局、间距、边框等。层叠：CSS 的“层叠”概念意味着样式规则可以以多种方式应用，它们的优先级会按一定的规则叠加生效。样式可以直接在 HTML 元素中定义，可以在页面的<style>标签中编写，也可以存储在外部的 CSS 文件中。样式。
CSS笔记(1).pdf
01-26
CSS笔记 CSS（Cascading Style Sheets），即层叠样式表，是一种用于描述网页样式的语言。CSS的出现拯救了混乱的HTML，让HTML专注于结构呈现，而样式交给CSS处理。 一、CSS简介 1.1 CSS的发展历程 从HTML被发明...
css笔记
04-02
这本“css笔记”是对CSS技术的深入理解和实践的总结，旨在帮助开发者巩固基础知识，提升技能水平。 **基本概念** 1. **选择器**：CSS通过选择器来定位HTML元素，如标签选择器（`p`）、类选择器（`.myClass`）、ID...
css课堂笔记前端css课堂笔记
08-05
CSS课堂笔记 本文档详细介绍了CSS的基本概念、语法、选择器、导入方式等知识点，为读者提供了系统的CSS基础知识。 一、CSS概念 CSS（Cascading Style Sheets）是一种用来表现HTML或XML等文件样式的计算机语言。...
前端工程规范-3：CSS规范（Stylelint）
最新发布
Vinca@的博客
09-26 601
Stylelint 是一个灵活且强大的工具，适用于保持 CSS 代码的质量和一致性。结合其他工具（如 Prettier 和 ESLint），可以更全面地保障前端代码的整洁性和可维护性。
css 下拉框展示：当hover的时候展示下拉框 z-index的用法解释
jjw_zyfx的博客
09-26 314
css 下拉框展示：当hover的时候展示下拉框
【H2O2|全栈】关于CSS（7）CSS基础（六）
过期的H2O2的博客
09-26 908
本系列博客将分享层叠样式表（CSS）有关的知识点。本期主要分享元素显示隐藏、透明度、溢出属性、滚动条、居中布局以及网页的部分结构的编写方法。不是专业的科普博主，主打一个分享知识，写的不好，多多包涵（嘿嘿）。
【CSS】变换
千里之行，始于足下
09-23 833
变换：空间概念，平移，旋转，缩放，倾斜，案例（六面骰子，旋转照片）
HTML与CSS基础学习笔记
“html和css笔记，包括HTML基础、XHTML注意事项、常用标签等内容，结合了书籍、网站和知名专家的资源，以及各种网页调试工具的介绍。” HTML与CSS是构建网页设计的基础，它们分别负责网页的结构和样式。HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值