CSS 知识总结

最新推荐文章于 2024-10-02 23:33:51 发布
最新推荐文章于 2024-10-02 23:33:51 发布
阅读量81 收藏
点赞数
分类专栏： c's's 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44809439/article/details/108914171
版权
本文探讨了浏览器如何实现动画效果，重点介绍了CSS的transition和transform属性。transition用于平滑过渡，如位移、缩放、旋转和倾斜等变换；transform则提供了这些变换功能。通过掌握这两个属性，可以创建出流畅的网页动态效果。
摘要由CSDN通过智能技术生成
浏览器渲染原理

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

两种方式做动画
transition

transform

  1. 位移：translate
  2. 缩放：scale
  3. 旋转：rotate
  4. 倾斜：skew

transition做过渡
transition：属性名 时长 过渡方式 延迟
在这里插入图片描述
在这里插入图片描述

animation做动画

在这里插入图片描述
在这里插入图片描述
这只是简单罗列一下基本的属性，平时给自己做的总结，mdn上都查得到。
图片出自于 饥人谷

王大锤_code
关注
专栏目录
CSS知识点总结
weixin_48494427的博客
03-16 2218
CSS知识点总结
HTML+css知识总结(建议收藏）
05-09
一个页面的主要组成由结构（html5）表现（css）行为（JavaScript）组成， 今天学习的是以标签和路径为主的html5的内容。 lang语言：作用于提示浏览器编译 charset字符：用UTF-8为全球通用准没错。 骨架标签：html...
CSS知识总结
m0_63600776的博客
01-23 2423
CSS基础知识总结CSS引入方式选择器 CSS引入方式 一、内嵌式：CSS写在style标签中 作用范围：当前页面 使用场景：小案例 二、外联式：CSS写在单独的CSS文件中,通过link标签引入 作用范围：多个页面 使用场景：项目中 三、行内式：CSS写在标签的style属性中 作用范围：当前标签 使用场景：配合js使用 选择器 一、标签选择器 结构：标签名(css属性名：属性值) 作用：通过标签名，找到页面中所有这类标签，设置样式 注意点： 1、标签选择器选择的是一类标签，而不是单独的某一个 2、标签选
CSS基础知识总结
Lotus_fragrance的博客
04-29 4055
一、基础认识 css的中文又叫做：层叠样式表。 语法：选择器 + {属性名： 属性值}、 css引入方式：1.内嵌式，写在style标签中。通常放在head中。2.行内式：写在style标签中，写在标签中。3.外联式：单独写一个css文件，通过link把该文件引入。 二、选择器 选择器 在html中写法 在css中写法 标签选择器 就是标签本身 div{ } 类选择器 class= "banner" .banner { }.
html与css 知识总结
余笙.'的博客
02-28 2918
HTML html结构 HTML结构由<html>、<head>、<body>等几部分组成 html>:定义整个html文档 head>:包含所有头部标签 在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。 可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, &
CSS基本知识点总结
qq_40046544的博客
07-29 9675
CSS指的是层叠样式表（CascadingStyleSheets）CSS描述了如何在屏幕、纸张或其他媒体上显示HTML元素CSS节省了大量工作。它可以同时控制多张网页布局。盒子的概念页面中的每一个标签都可以看做是一个盒子；通过盒子的视角，可以更方便的进行布局浏览器在渲染网页时会将网页中的元素看做是一个个的矩形区域，我们也形象称之为盒子盒子模型内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成。...
HTML+CSS知识点总结
m0_62435786的博客
03-24 1790
HTML+CSS知识点总结第一章基础HTML 基础文本第二章列表、表格、多媒体列表第三章表单表单第四章CSS1CSS语法与引入第五章CSS2常用属性第六章 盒子盒子块与行内margin的合并第七章浮动浮动浮动元素的高度塌陷解决浮动对齐第八章定位定位第九章动画动画 第一章基础 HTML 基础 （1）标记： 单独标记/成对标记（不分大小写） 开始标记： 头部标记： 元信息标记: 文件标题标记: 主体标记： （2）元素： 每一组标记及其内部文字就构成了一个元素,整个html文件就是 由一个大元素包含许多小元素
CSS3知识总结
weixin_51109349的博客
12-15 2337
CSS3什么是css3浏览器前缀css3选择器边框圆角渐变径向渐变线性渐变文本和盒子阴影文字换行CSS3字体css3 背景倒影滤镜过渡2D装换3D转换动画1.指定动画2.使用动画flex布局多媒体查询怪异盒子多列布局 什么是css3 CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了， IE10以后也开始全面支持CSS3了。 最需要注意的问题是各个浏览器
CSS 知识总结分享—— 踩坑记录——关于CSS切角的实现与踩坑解决（clip-path）
Sunnyyy_的博客
03-04 1654
关于CSS切角的实现与踩坑解决（clip-path）
css知识点总结
一枚数学专业的小码农的博客
09-12 780
css全面解析
CSS 核心知识点总结
大剑师兰特的GIS世界
05-27 2250
CSS（Cascading Style Sheets，层叠样式表）是用于描述网页文档如何呈现给用户的样式语言。它与HTML一起构成了网页设计的基础。以下是CSS的一些核心知识点归纳总结
HTML.css知识总结.md
06-19
对于小白新手入手可借鉴，都是HTML+CSS基础 打好基础才会让代码写的轻松像云上游走，不费吹灰之力学好HTML+CSS
CSS画出三角形的做法
mingangel的博客
10-01 203
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
CSS-Day3
m0_74039531的博客
09-29 268
伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}您可以使用 :first-child 伪类来选择父元素的第一个子元素。p:first-child { color:blue; }在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：p > i:first-child { color:blue; }在下面的例子中，选择器匹配所有作
CSS 盒子属性
m0_74012211的博客
10-02 203
CSS 盒子属性
如何用JavaScript编写一个简单的计数器
Jiaberrr的博客
10-01 288
在网页开发中，计数器是一种常见的功能，它可以帮助我们记录点击次数、显示时间等。下面我将介绍如何在HTML页面中使用JavaScript实现一个基本的计数器。
【CSS】position
小秀的博客
10-02 135
特点：粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。特点：不影响元素本身特性，元素不脱离文档流，相对于原位置进行偏移。特点：元素脱离文档流 ，块级元素由内容撑开宽高，清除子集浮动。参考物：距离最近的使用了定位的父级，没有时找body。position: static 静态定位（默认）参考物：根据用户的滚动位置进行定位。参考物：元素的初始位置。
CSS 中的@media print 是干什么用的？
读心悦
09-29 143
在这个查询块内，你可以设置各种样式，以确保打印输出的内容看起来整洁、专业，并且只包含必要的信息。例如，你可能还想隐藏某些不重要的元素，如广告、侧边栏或仅用于装饰的图片，同时增加标题和段落的字体大小，以及为页面添加页眉和页脚（但这次是在打印样式中自定义的，与网页上的不同）。这种做法通常很有用，因为网页的页眉和页脚可能包含导航链接、社交媒体图标、版权声明等对于在线浏览很有用的信息，但在打印版本中，这些信息可能并不必要，甚至可能占用宝贵的页面空间。元素都将被隐藏（即不显示在打印的页面上）。这是通过将这些元素的。
CSS——文字闪烁效果
最新发布
懒羊羊大王的博客
10-02 852
今天来完成一个文字闪烁的动态效果，包含倒影、闪烁、可编辑等细节。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值