斑码教育web前端课程笔记-第十六天-CSS3

一、阴影

box-shadow: 水平偏移量、垂直偏移量、模糊程度、模糊半径、阴影的颜色、位置
- box-shadow:支持多组阴影效果
- 外部阴影的outset不需要书写
text-shadow：x轴偏移量、y轴偏移量、模糊程度、颜色
执行代码：

<!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>* {margin: 0;padding: 0;}p {font-size: 30px;letter-spacing: 20px;/* 文本阴影 */text-shadow: 2px 5px 5px red;}</style>
</head>
<body><p>近日，黑龙江鸡西市发生一起因家庭聚餐食用“酸汤子”（酵米面食品）引发的食物中毒事件，9人食用后全部死亡。19日，公众号“健康中国”发布国家卫健委提示：①夏秋季节制作发酵米面制品容易被椰毒假单胞菌污染，该菌能产生致命的米酵菌酸。高温煮沸不能破坏毒性，中毒后没有特效救治药物，病死率达50%以上。②北方的臭碴子、酸汤子、格格豆，南方的发酵后制作的汤圆、吊浆粑、河粉等最容易致病。③为保证生命安全，最好的预防措施是不制作、不食用酵米面类食品。</p>
</body>
</html>

结果：
在这里插入图片描述

二、背景
背景起源与背景裁剪请看详解
2.1 背景起源

background-origin：背景起源背景从什么位置开始渲染

属性值：

padding-box: 从内边距开始渲染（默认值）border-box： 从边框开始渲染content-box: 内容区域开始渲染

执行代码：

    <!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>* {margin: 0;padding: 0;}div {width: 560px;height: 300px;border: 20px solid rgba(0, 0, 0, .5);padding: 50px;margin: 50px auto;background-color: pink;background-image: url('./imgs/0.jpg');background-repeat: no-repeat;/* 从内边距开始渲染 */background-origin: padding-box;/* 从内容盒开始渲染 */background-origin: content-box;/* 从边框开始渲染 */background-origin: border-box;/* background-origin 控制背景图片的渲染位置，但不能控制背景颜色，背景颜色从border-box */}</style></head><body><div class="box"></div></body></html>

结果：
在这里插入图片描述

注意：background-origin 控制背景图片的渲染位置，但不能控制背景颜色，背景颜色从border-box

2.2 背景裁剪

background-clip: 控制背景在哪里开始显示

属性值：

padding-box: 从内边距开始显示border-box： 从边框开始显示（默认值）content-box: 内容区域开始显示text： 文字部分显示

2.3 浏览器新特性的使用

格式：前缀-属性名

谷歌浏览器和苹果浏览器： -webkit-属性名
火狐浏览器： -moz-属性名
欧朋浏览器： -o-属性名
IE浏览器： -ms-属性名

执行代码：

    <!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>* {margin: 0;padding: 0;}div {font-size: 40px;background-image: url(./imgs/1.jpg);color: rgba(0, 0, 0, .3);background-origin: border-box;background-clip: text;-webkit-background-clip: text;-moz-background-clip: text;-o-background-clip: text;-ms-background-clip: text;}</style></head><body><div>此外，财富涨幅最大的是新上市公司稳健医疗的李建全家族，财富上涨了956%，以380亿元成为科创板首富；其他涨幅较大的还包括在线教育平台跟谁学的陈向东，增长了662%，房产交易平台贝壳的左晖，增长了483%。据了解，胡润百富榜人数比去年的1819人增加579人，达到2398位企业家财富超过20亿。胡润表示：“中国上榜企业家人数增加到2398人，创下历史新高。”上榜企业家总财富比去年的17.9万亿增长54%，达到27.5万亿。胡润表示：“这一年是历史上财富创造最快的一年，中国上榜企业家的总财富都超过了世界第四大经济体德国一年的GDP。”千亿级企业家比去年的19人骤增一倍，达41人。胡润表示：“今年我们找到41位千亿级企业家，十年前一个都没有。有近2400位企业家财富超过20亿，实际上应该还要多，多多少？最起码多一倍，因为有些企业家比较低调，实际中国应该有7000多人财富都超过20亿。”</div></body></html>

结果：

在这里插入图片描述

2.4 多背景

背景图片支持多张图片

注意事项：将小图放在前面，最大的背景图放在最后，如果多张背景图出现了重叠现象，显示的是前面的图片

执行代码：

    <!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>* {margin: 0;padding: 0;}body {overflow: hidden;}.box {width: 100%;height: 650px;border: 1px solid #000;background-image: url('./imgs/1.png'), url('./imgs/1.jpg'), url('./imgs/bg.jpg');background-repeat: no-repeat;background-position: 0 0, right top, center;}</style></head><body><div class="box"></div></body></html>

结果：

在这里插入图片描述

2.5 渐变色

线性渐变：linear-gradient

径向渐变：radial-gradient

使用必须是background-image，渐变色属于图片属性值

线性渐变：linear-gradient（方向，颜色）

方向：可以使用关键字、可以角度

颜色：多种颜色之间使用逗号分隔，最少为两种颜色。可以设置颜色从哪个位置开始，可以在颜色的后面添加百分比。

径向渐变:radial-gradient（设置图形及圆心所在的位置，颜色）

设置图形和圆心的位置：位置由方向确定，图形 circle:圆形 ellipse：椭圆

线性渐变执行代码：

    <!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>* {margin: 0;padding: 0;}.box {height: 400px;border: 1px solid #000;/* 线性渐变色 *//* 直接书写颜色：从上往下 *//* background-image: linear-gradient(red, yellow); *//* 设置方向:角度设置 0deg 从左下角垂直向上 *//* background-image: linear-gradient(135deg, red, yellow); *//* 通过关键字设置 */background-image: linear-gradient(to right top, red, yellow);/* background-image: linear-gradient(to right top, red 30%, yellow 70%); *//* background-image: linear-gradient(to right, red 0%, blue 30%, orange 70%, green 90%); */}</style></head><body><div class="box"></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>Document</title><style>* {margin: 0;padding: 0;}.box {width: 400px;height: 400px;border: 1px solid #000;margin: 100px auto;background-image: radial-gradient(red, yellow);background-image: radial-gradient(red,blue, pink, yellow);background-image: radial-gradient( circle at right bottom, red,blue, pink, yellow);background-image: radial-gradient( circle at center, red,blue, pink, yellow);background-image: radial-gradient( ellipse at center bottom, red,blue, pink, yellow);}</style></head><body><div class="box"></div></body></html>

结果：

在这里插入图片描述

三、2D的动画

缩放、旋转、倾斜、偏移

属性名: transform （变形）

属性值：

缩放： scale
旋转：rotate
倾斜： skew
偏移： translate

2D分为x轴和y轴，3D分为x轴、y轴和z轴。

缩放：

    <!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>* {margin: 0;padding: 0;}.box {width: 560px;height: 300px;border: 1px solid #000;margin: 100px;float: left;}.box:nth-child(1):hover {/* 2D动画属性名为：transform *//* scale() x和y轴都变化 */transform: scale(.5);/* x轴发生变化 */transform: scaleX(1.2);/* y轴发生变化 */transform: scaleY(.8);}</style></head><body><div class="box"><img src="./imgs/1.jpg" alt="" srcset=""></div><div class="box"><img src="./imgs/2.jpg" alt="" srcset=""></div><div class="box"><img src="./imgs/3.jpg" alt="" srcset=""></div><div class="box"><img src="./imgs/4.jpg" alt="" srcset=""></div></body></html>

结果：

在这里插入图片描述

rotate：

.box:nth-child(2):hover {/* 沿z轴旋转 */transform: rotate(45deg);/* 沿x轴旋转 *//* transform: rotateX(45deg); *//* 沿y轴旋转 *//* transform: rotateY(45deg); *//* 沿z轴旋转 *//* transform: rotateZ(45deg); */
}

结果：

在这里插入图片描述

太极实例：

在这里插入图片描述

skew:

.box:nth-child(3):hover {/* 倾斜 */transform: skew(30deg, 30deg);/* 沿x轴倾斜 */transform: skewX(30deg);/* 沿y轴倾斜 */transform: skewY(30deg);/* 一个值代表的是x轴 */transform: skew(30deg);/* 第一个值代表x轴，第二个值代表y轴 */transform: skew(30deg, 30deg);
}

结果：

在这里插入图片描述

translate:

.box:nth-child(4):hover {/* 偏移 *//* 一个值： x轴 */transform: translate(100px);/* 二个值: 第一个值代表x， 第二个值代表y */transform: translate(100px, 200px);/* 沿x轴偏移 */transform: translateX(100px);/* 沿y轴偏移 */transform: translateY(-50%);/* translate中的偏移，百分比单位是针对于自身元素而言的，x相对于宽度， y相对于高度 *//* transform: translateZ(100px); */
}

结果：

在这里插入图片描述

定位居中（面试题）：

    <!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>* {margin: 0;padding: 0;}.parent {width: 600px;height: 400px;margin: 100px auto;background-color: orange;position: relative;}.sun {width: 300px;height: 350px;background-color: pink;position: absolute;/* 定位设置为父相子绝 *//* 定位的百分比针对的是父元素 */left: 50%;top: 50%;/* 偏移的百分比针对的是自己本身 *//* transform: translateX(-50%) translateY(-50%); */transform: translate(-50%, -50%);}</style></head><body><div class="parent"><div class="sun"></div></div></body></html>

结果：

在这里插入图片描述

四、过渡

元素从一个状态瞬间到达另一个状态称之为“干蹦效果”，元素从一个状态经过一段时间到达另一个状态称之为“动画效果”。

过渡： transition

transition-property：过渡属性 all所有属性必需属性（property 属性）
transition-duration: 过渡时间
transition-timing-function：过渡的速度曲线支持贝塞尔曲线
transition-delay: 过渡的延迟时间

注意：过渡并不是能应用到所有的属性上，有些属性不支持过渡，比如背景颜色，一般属性值为数值类型的都支持过渡。

五、动画

调用动画：animation

animation-name: 动画的名字
animation-duration：动画的时间
animation-timing-function：动画的速度曲线
animation-delay：动画延迟时间
animation-iteration-count: 动画的执行此处 infinite 无限循环 n为具体的次数
animation-direction: 动画的方向 alternate 反向执行动画
animation-fill-mode： forwards 可以保留动画最后一帧的状态

六、css3动画实现轮播图

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

Gitlab基本原理
gitlab是常用的版本管理工具相对于github来说，gitlab不收费，而且基本具有github的全部功能 fetch：将本地已有的工程从远端拉取到本地repository；clone：将本地没有的工程从远端拉取到本地repository；pull&…...
2024/4/9 4:40:32
springBoot整合springCache 简化缓存开发
1.）引入依赖 spring-boot-starter-cache和spring-boot-starter-data-redis <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-cache</artifactId></dependency>…...
2024/4/9 4:40:29
抛弃 Java 改用 Kotlin 的六个月后，我后悔了！
毫无疑问，Kotlin 目前很受欢迎，业界甚至有人认为其将取代 Java 的霸主地位。它提供了 Null 安全性，从这一点来说它确实比 Java 更好。那么是不是这就意味着开发者应该毫不犹豫地拥抱 Kotlin，否则就落伍了？ 等等&#…...
2024/4/9 4:40:28
菜鸡程序媛，又开始了新的一轮代码学习之路！！！（JAVA真香）
菜鸡程序媛，又开始了新的一轮代码学习之路！！！ 我打开java入门视频已经第三次了，（事不过三，这次，姐妹一定要看完！） 第一次入门，我要讨口饭吃 19年…...
2024/4/9 4:40:27
Leetcode刷题之【215. 数组中的第K个最大元素】
1 题目在未排序的数组中找到第 k 个最大的元素。请注意，你需要找的是数组排序后的第 k 个最大的元素，而不是第 k 个不同的元素。示例 1: 输入: [3,2,1,5,6,4] 和 k 2 输出: 5 示例 2: 输入: [3,2,3,1,2,4,5,5,6] 和 k 4 输出: 4 说明: 你可以假…...
2024/4/9 4:40:26
CSDN各位大牛齐聚一堂分享经验-1024
14:00-14:25主持人开场及领导致辞 14:25-14:30致辞倪光南中国工程院院士 14:30-14:40CSDN 2.0 新规划蒋涛CSDN 创始人&董事长、极客帮创投创始合伙人 14:40-16:40九大操作系统掌门人对话：九问操作系统主持人：陈渝清华大学长聘副教授王成录华为消…...
2024/4/28 11:45:07
linux高级IO
高级IO包括IO概念，类型，处理流程，多路转接IO的实现模型四种典型的IO：阻塞，非阻塞，信号驱动，异步 IO过程：发起IO调用，等待IO条件就绪，进行数据拷贝。阻塞…...
2024/4/9 4:40:24
跟着团子学SAP：项目物料的需求汇总-Grouping WBS
官方定义： SAP官方文档中对Grouping WBSE的定义是：A Grouping WBS element is a WBS element that has valuated project stock on which the requirements from several WBS elements are grouped together for materials requirement planning (MRP).…...
2024/5/7 13:17:37
单点登录协议有哪些？CAS、OAuth、OIDC、SAML有何异同？
单点登录实现中，系统之间的协议对接是非常重要的一环，一般涉及的标准协议类型有 CAS、OAuth、OpenID Connect、SAML，本文将对四种主流 SSO协议进行概述性的介绍，并比较其异同，读者亦可按图索骥、厘清关键概念。一、认…...
2024/4/19 14:40:40
初等数论课堂笔记第三章 -- 保密通讯与公开密钥
索引保密通讯仿射密码例子指数密码 ( Pohlig, Hellman, 1978 )例子RSA公开密钥体制( Rivest, Shamir, Adleman, 1977; 英国情报部门的Cocks 1973年已发明 )例子保密通讯保密通讯分为3步： 发送方使用密钥把明码转换成密码；密码的传输；接收方…...
2024/4/9 4:40:21
入驻京东淘宝CNAS CMA质量检测报告
一、电商检测报告要求有哪些? 入驻电商检测报告旗舰店、专卖店、专营店检测报告要求：质量监督检验所、质量检验中心或其它具备CNAS和CMA资质的第三方权威检测机构（具有CNAS及CMA）认证也可以，商家每款产品均可以出具质检报告&…...
2024/5/7 15:27:22
Windows10环境下，基于VS2019的WebRTC编译环境搭建
一、系统需求 1、64位机，最少8GB内存，16GB以上内存更佳。 2、至少100GB的剩余磁盘空间，且磁盘格式为NTFS。 3、Win7及以上系统 4、具备访问外网的vpn 二、软件准备 1、先确保os的版本> 10.0.19041 (我最开始用10.0.18363版本&…...
2024/4/9 3:49:21
WebRTC 基础 TURN的工作过程和原理
参考文档： https://www.jianshu.com/p/4a15556c6318 https://www.cnblogs.com/pannengzhi/p/5048965.html 我们在STUN工作过程介绍的文章中提到过，STUN能够处理Cone NAT，但是没有处理对称NAT的能力，也就是说位于对称NAT后面的2台…...
2024/4/12 13:42:59
一文纵览大数据计算生态
欢迎关注wx公众号：DLab数据实验室关注更多知识干货～ 概述大数据计算发展至今，已经形成了一个百花齐放的大数据生态，通用的、定制的，批量的、实时的，关系的、图的、非结构的，数据计算…...
2024/4/9 3:49:19
Filecion值不值得参与？看它的技术应用实景落地和前景
一：IPFS/Filecion生态目前现状 IPFS/Filecion上线了，这个沉淀了好几年，鸽了一次又一次。修复了一个又一个BUG的万年鸽王终于上线了。从15号夜晚高兴得睡不着，到目前生态流言飞起。对区块链以及IPFS/Filecion生态深入研究的我。也…...
2024/4/20 15:26:04
Filecoin值不值得投资？FIL期货何去何从？
Filecoin值不值得投资？FIL期货何去何从？ 自从 Filecoin 在周四推出以来，Filecoin一直不太平。并且有消息称，五个大的采矿池已经开始罢工，有传言称他们可能会分叉 Filecoin。 Filecoin 的创始人胡安（ Juan…...
2024/4/12 22:22:36
以太坊的问题能解决？|比特币、以太坊年底将创新高
最近整个币圈都很热闹，不说大概也都知道，比特币突破12000点，直接带动的整个数字货币币种的不断上升，成为太子的以太坊也同样上升到了一个高位。而因为以太坊的分流币的数量巨大，有人便对以太坊看好，因为以太…...
2024/4/26 1:51:12
filecoin官方资讯、太空竞赛细则、fil期货与矿池挖矿对比分析、与云算力有什么区别
恒讯云在filecoin官网中看到，协议实验室的150万 FIL砸盘，矿工反对 Filecoin经济模型的集体罢工。突然之间，协议实验室从“万众期待”变成了“万人唾骂”。　　如果给你10万人民币，参与Filecoin挖矿多久能回本? 目前对于Fil…...
2024/4/11 16:46:20
6种负载均衡算法
1、轮询法将请求按顺序轮流地分配到后端服务器上，它均衡地对待后端的每一台服务器，而不关心服务器实际的连接数和当前的系统负载。 2、随机法通过系统的随机算法，根据后端服务器的列表大小值来随机选取其中的一台服务器进行访问。由概率统…...
2024/4/23 11:12:15
webpack从入门及实战（二）webpack核心概念
Loaders 说到webpack，自然离不开他的一大堆loaders，没有loaders的webpack只能打包js文件，得益于众多的loaders，我们可以打包各种类型的文件。 loaders实际上可以理解为一种打包方案，webpack本身碰到除了js文件之外的其…...
2024/4/17 7:17:41

斑码教育web前端课程笔记-第十六天-CSS3

相关文章

最新文章