Day7——CSS3的简单基础

最新推荐文章于 2024-05-24 18:01:44 发布
最新推荐文章于 2024-05-24 18:01:44 发布
阅读量60 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44188598/article/details/112647024
版权

前言：此文章为在校期间老师所授，记录着课堂知识。

CSS3的简单基础

过渡

盒子 位置

<style type="text/css">
			
			div{
				width: 100px;
				height: 100px;
				background-color: pink;
				
				
			}
			
			
			div:hover{
				width: 500px;
				height: 500px;
				
			}
			
		</style>

先不加过渡，然后运行起来就是本来100x100大小，鼠标移上去瞬间500x500.

	transition:all 5s；

在div下加入这个就会变成鼠标移上去，从100x100到500x500花费5秒缓慢张开。

			div{
				width: 100px;
				height: 100px;
				background-color: pink;
				transition: width 5s ease 1s ,height 3s; 
				/* 参与过度的属性，完成过度的时间，完成过度的类型，延迟时间 */
				
			}

颜色

		<style type="text/css">
			
			div{
				width: 100px;
				height: 100px;
				background-color: pink;
				transition: width 5s ease-out 1s ,height 3s,
				background-color .5s ease-in .1s; 
				
				
				
			}
			
			
			div:hover{
				width: 500px;
				height: 500px;
				background-color:#bbb;
				
			}
			
		</style>

鼠标移上去变色，在div里加入background-color 即可。
然后在下面的hover那里把要变的颜色加上。

另外还有渐变色。
background: linear-gradient(to right,#fe6785,#fca6aa);
to right 是从左到右进行渐变色
to bottom 是从上到下进行渐变色设置

图片左右移动

		<style type="text/css">
			div{
				width: 600px;
				height: 300px;
				border: 1px solid red;
				overflow: hidden;
			}
			div img{
				width: 300px;
				height: 300px;
				transition: all 0.5s;
			}
			div:hover img{
				margin-left: 300px;
			}
		</style>

...

		<body>
			<div>
				<img src="img/lf.png" />
			</div>
		</body>

在下面插入图片，然后让图片移动的话，要在图片的div img下面设置transition。
在hover里面设置位移的方向距离。

放大缩小

		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background-color: #FFC0CB;
				transition: all 3s;
			}
			div:hover{
				/* 大于1，放大，小于1，缩小 */
				/* X轴宽度，Y轴高度 */
				transform: scale(0.8,1.2);
			}
		</style>

...

		<body>
		
			<div></div>
			
		</body>

在hover加入transform：scale即可，若只有一个参数，那么就是放大或缩小。
两个参数就是宽度和高度。

图片缩放

	<style type="text/css">
		div{
			margin-top: 200px;
			margin-left: 200px;
			width: 200px;
			height: 200px;
			background-color: #FFC0CB;
			
		}
		div img{
			width: 200px;
			height: 200px;
			transition: all 0.5s;
			
		}
		div img:hover{
			
			transform: scale(2);
		}
	</style>

	<body>
		
		<div><img src="img/lf.png"></div>
		
	</body>

和之前盒子缩放大同小异…

位移

		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: pink;
				transition: all 5s;
				margin-top: 200px;
			}
			div:hover{
				/* transform: translate(100px,100px); */
				/* transform: translateX(100px) */ /* x坐标平移; */
				transform: translateY(-100px);
			}
			
				
			</style>

两个参数就（X方向位移，Y方向位移）。

旋转

		<style type="text/css">
			
			div{
				width: 100px;
				height: 100px;
				background-color: #f153ff;
				margin: 200px auto;
				transition: all 3s;
				
			}
			div:hover{
				transform: rotate(360deg);
			}
			
			
		</style>

div上面没变，只变了hover，改为transform：rotate（360deg）。
设置旋转的原点：

	transform-origin:top left;

若旋转物100x100，设为中心还可以：

	transform-origin:50px 50px; 
	transform-origin:center;

展开旋转

<style type="text/css">
			
			div img{
				width: 225px;
				height: 150px;
				
				position: absolute;
				margin-top:300px ;
				margin-left: 300px;
				transition: all 2s;
				transform-origin:top right; 
			}
			
			div:hover img:nth-child(6){
				transform: rotate(360deg);
			}
			div:hover img:nth-child(5){
				transform: rotate(300deg);
			}
			div:hover img:nth-child(4){
				transform: rotate(240deg);
			}
			div:hover img:nth-child(3){
				transform: rotate(180deg);
			}
			div:hover img:nth-child(2){
				transform: rotate(120deg);
			}
			div:hover img:nth-child(1){
				transform: rotate(60deg);
			}
			
			
		</style>

	<body>
		
		<div>
			<img src="img/1.jpg">
			<img src="img/2.jpg">
			<img src="img/3.jpg">
			<img src="img/4.jpg">
			<img src="img/5.jpg">
			<img src="img/6.jpg">
		</div>
		
	</body>

在这里插入图片描述
div:hover img:nth-child(1){
transform: rotate(60deg);
}
鼠标移上去之后，第1个图片旋转60度。

倾斜

		<style type="text/css">
			
			div{
				width: 100px;
				height: 100px;
				margin: 300px auto;
				background-color: #FFC0CB;
				/* transform: skew(60deg); */
				/* transform: skewX(60deg); */
				/* transform: skewY(60deg); */
				transform: skew(60deg);
				
				
			}
			
		</style>

transform:skew 倾斜。
skewX，X轴不变，Y轴偏移。
skewY，Y轴不变，X轴偏移。
只写skew并且后面参数只有一个，默认skewX。
skew（30deg，30deg）就是这样：
在这里插入图片描述

一个30deg，一个60deg就是直线了，不显示了。
加上hover可以更清楚看到变化过程：

		<style type="text/css">
			
			div{
				width: 100px;
				height: 100px;
				margin: 300px auto;
				background-color: #FFC0CB;
				/* transform: skew(60deg); */
				/* transform: skewX(60deg); */
				/* transform: skewY(60deg); */
				
				
				
			}
			div:hover{
				transition: all 3s;
				transform: skew(30deg,60deg);
				
			}
			
			
		</style>

垂直居中

		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: #FFC0CB;
				position: absolute;
				top:50%;
				left:50%;
				transform: translate(-50%,-50%);
			}
		</style>

在Day5里面，曾经也使用过垂直居中，这算是第二种方法了。

菲那(*´ ω `๓)♬
关注
前端自学day04——css基础
m0_59470174的博客
02-20 396
课程自学：（b站）黑马程序员【前端HTML5+CSS3+移动Web全套教程】
【前端每日基础】day7——css常见样式
modaoshi51991的博客
05-14 297
sticky：粘性定位，元素在滚动时表现为相对定位，但当其到达某个阈值（通常是距离顶部一定距离时）时会变为固定定位。inline-block：元素呈行内块显示，与inline类似，但可以设置宽度和高度。relative：相对定位，元素相对于其正常位置进行偏移，不会影响其他元素的布局。fixed：固定定位，元素相对于视窗进行定位，即使页面滚动，元素也不会移动。inline：元素呈行内显示，宽度和高度由内容决定，并且元素之间不会换行。absolute：绝对定位，元素相对于其最近的已定位祖先元素进行定位。
黑马程序员——html css基础——day03——CSS基础
qq_56444564的博客
01-25 969
层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。CSS 是开放网络的核心语言之一
【前端每日基础】day18——css清除浮动
modaoshi51991的博客
05-24 522
在CSS中，浮动（float）是一种常见的布局技术，但它常常导致父容器的高度无法自动扩展以包含浮动的子元素。通过给父容器设置 overflow: hidden 或 overflow: auto，可以强制其包含浮动的子元素。在使用CSS Flexbox布局时，父容器会自动包含浮动子元素，因此不需要额外清除浮动。这是更现代的clearfix实现，通过添加伪元素来清除浮动。然后在需要清除浮动的父容器上应用 clearfix 类。Flexbox可以简化布局，减少对清除浮动的需求。同样地，在父容器上应用该样式。
黑马程序员——html css基础——day04——CSS进阶
qq_56444564的博客
01-26 969
选择器写法：选择器1, 选择器2, …, 选择器N { CSS 属性}，选择器之间用。小技巧： 后代选择器执行代码的时候，先执行孩子，后执行父亲。我们找刘德华，先确定刘德华（li）， 然后确定刘德华在淄博 ul 吃烧烤。从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较。作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。选择器写法：父选择器 子选择器 { CSS 属性}，父子选择器之间用。注意：选择器类型相同则遵循层叠性，否则按选择器优先级判断。
黑马程序员——html css基础——day09——CSS高级
qq_56444564的博客
02-08 827
登录 → 素材库 → 官方图标库 → 进入图标库 → 选图标，加入购物车 → 购物车，添加至项目，确定 → 下载至本地。优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度。也可以为 all（两个状态属性值不同的所有属性，都产生过渡效果）iconfont：字体图标基本样式（字体名，字体大小等等）作用：设置定位元素的层级顺序，改变定位元素的显示顺序。（默认值为auto，取值越大，层级越高）使用场景：子级绝对定位，父级相对定位（：灵活地修改样式，例如：尺寸、颜色等。
小程序开发Day3——CSS盒模型
陈年的博客
02-16 556
标签 在微信开发者工具中，我们创建一个文件夹，就会自动生成四个文件，js,json,wxml,wxss。 在wxml中，wxml类似于我们web开发时的html，我们可以在原始代码中看到标签<view><text>,这是wxml里最常用的两种标签，两者功能基本相似但也有不同。 <view>:是一个块元素，独占一行，不同的标签会换行。宽高都是可以变的。 <...
【JavaWeb习笔记】DAY03——CSS
m0_62106729的博客
07-01 813
本文总结了CSS语言相关知识点。包括创建CSS文档、使用CSS语言、介绍了id选择器和class选择器、总结了常用的CSS样式。仅供学习，侵权必删！
WEB前端DAY7——CSS复合选择器
weixin_43163704的博客
09-24 230
WEB前端DAY7——CSS复合选择器 一.复合选择器 1.交集选择器 交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，交集选择器 是 并且的意思。 即…又…的意思 既是singer，又是div。 用的较少，不太建议使用。 2.并集选择器 并集选择器 和 的意思， 就是说，只要逗号隔开的，所有选择器都会执行后面样式。 3.后代选...
day004——CSS
Teeeeesting的博客
11-25 101
1.CSS：层叠样式表，用来美化网页。做到结构（HTML）和表现（CSS）分离。 2.基本语法： 选择器{ 属性：属性值 } 3.引用方式：行间样式、内部样式、外部样式、导入外部样式。 行间样式：直接在标签上书写样式、 内部样式：在文件的内部书写样式 <style> 样式内容 </style> 外部样式：（1）先创建一个css文件；（2）再用link标签引入这...
Java0基础_day16_Javaweb前端_HTML_CSS_mysql（csdn）————程序.pdf
12-01
例如，创建一个简单的数据库表： ```sql CREATE DATABASE myDatabase; USE myDatabase; CREATE TABLE users ( id INT AUTO_INCREMENT PRIMARY KEY, username VARCHAR(50) NOT NULL, password VARCHAR(50) NOT ...
中软Day04——CSS基础（盒子模型、浮动、定位）
qq_43542290的博客
11-20 676
中软Day04 盒子模型（css重点） 盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。 css三个大模块：盒子模型，浮动，定位 网页布局的本质 网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？ 牛奶是怎样运输，让消费者...
中软Day03——CSS基础（样式、选择器、标签类型）
qq_43542290的博客
09-24 946
中软Day03 认识css css的发展历程 随着html的发展，为了满足前端工程的需求，css应运而生 网页美容师——css 让 HTML 从样式中解脱苦海， 实现了 HTML 专注去做 结构呈现。 如果JavaScript是网页的魔法师，那么CSS它是我们网页的美容师 没有不好看的网页，只有不会CSS的前端。 css初识 CSS通常称为CSS样式表或层叠样式表（级联...
web应用开发学习——CSS利用
学习记录
03-02 876
一、学习内容 充分理解并掌握CSS基本用法，了解四种CSS样式应用的方法，包括行内样式、内嵌式、链接式以及导入式。学习并应用与布局密切相关的技术，例如浮动技术和定位技术，以及display、block、inline、table、flex等属性。学习并应用table+css、div+css、html5布局，固定布局、流动布局与弹性布局。 二、实验内容 1.创建一个新的HTML文档，获得一个完整的文档结构。 2.编写css文件定义HTML的显示样式。 （1）设置网页整体高度、图片背景 （2）利用元素选择器自
大学生职业生涯规划书Word模板范文就业求职简历应聘工作PPT医疗康复专业
最新发布
10-12
大学生职业生涯规划书Word模板范文就业求职简历应聘工作PPT医疗康复专业
基于Java的学生信息管理系统的实现与操作
10-12
本文介绍了一个Java实现的小型系统 -- 学生信息管理系统，包括学生数据的增删查改四个主要操作的功能演示，并具体讲解了涉及三个核心类（Student.java、StudentManager.java、StudentFrame.java）的设计思想以及代码逻辑。适合Java初学者用来了解面向对象的概念应用以及Swing工具包进行GUI创建的基础方法和步骤。系统通过提供文本框用于输入学生ID和其他必要信息，并提供按钮来执行对应指令，显示栏展示查询结果显示，使操作变得更为简洁直观有效。 适用于初步掌握Java基础的开发者，特别是想要加强自己对面向对象编码思维理解和运用的同学。 使用此管理系统可以在本地电脑环境上进行学生的数据维护工作（如增删改查），提高学校教务工作者处理信息的效率。 除了基本的数据录入和搜索之外，该项目也帮助理解如何设计合理的模型类并使用集合存储大量数据元素，另外还介绍了如何通过事件监听的方式绑定用户行为和应用程序之间的交互流程。
基于单片机控制的填块切割装置的设计_孟紫腾.pdf
10-12
基于单片机控制的填块切割装置的设计_孟紫腾
ImageNet-1K数据集索引和对应的中英文表单
10-12
ImageNet-1K数据集索引和对应的中英文表单
B站叫叫兽粉丝专属-YOLOv11改进免费送
10-12
B站叫叫兽粉丝专属-YOLOv11改进免费送 ！ YOLOv11全网最新创新点改进系列：免费送！！！改进且跑通的源码！！融入CBAM注意力，将通道注意力和空间注意力相结合，嘎嘎提升V11算法，叫叫首，改进速度遥遥领先，粉丝水文速度遥遥领先！！！ YOLOv11全网最新创新点改进系列：免费送！！！改进且跑通的源码！！通过增加检测层来提高对小目标特征信息的提取能力，旨在提升YOLOv11模型的小目标、密集型目标的检测精度！！！
HTML5与CSS3引用参考指南：理解cite元素
"HTML5与CSS3基础教程——第8版" 在HTML5中，`<cite>`元素用于标记引用或参考的内容，它可以是各种创意作品的名称，如书籍、电影、歌曲、艺术品等。在提供的代码片段中，可以看到`<cite>`元素被用来表示音乐专辑...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值