css3-背景、渐变、过渡、2D变换

最新推荐文章于 2022-11-23 16:33:14 发布
最新推荐文章于 2022-11-23 16:33:14 发布
阅读量361 收藏 2
点赞数 1
文章标签： css3-背景、渐变、过渡、2D变换
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuke666666/article/details/84190006
版权

一、背景(background)

1.background-size

背景大小：水平 垂直

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.wrap {
				width: 300px;
				height: 200px;
				border: 1px solid black;
				background: url(img/baby0.jpg) no-repeat;
				margin: 100px auto;
			}
		</style>
	</head>
	<body>
		<div class="wrap"></div>
	</body>
</html>

2.background-origin

原点/起始点:

background-origin:border-box(以边框为起始点)；

background-origin:content-box(以内容为起始点)；

background-origin:padding-box(以内边距为起始点).

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.wrap {
				width: 500px;
				height: 500px;
				border: 20px solid rgba(0,0,255,0.2);
				background: url(img/baby0.jpg) no-repeat;
				background-origin: border-box;
				margin: 100px auto;
				padding: 30px;
			}
		</style>
	</head>
	<body>
		<div class="wrap"></div>
	</body>
</html>

3.background-clip

背景裁剪：

background-clip：border-box(以边框裁剪)；

background-clip：content-box(以内容裁剪)；

background-clip：padding-box(以内边距裁剪)；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.wrap {
				width: 500px;
				height: 500px;
				border: 35px solid rgba(0,0,255,0.3);
				margin: 100px auto;
				background: url(img/baby0.jpg) no-repeat;
				background-clip: content-box;
				padding: 35px;
			}
		</style>
	</head>
	<body>
		<div class="wrap"></div>
	</body>
</html>

4.多背景

background:url() left top no-repeat,right top no-repeat, left bottom no-repeat,right bottom no-repeat;

background:url() no-repeat center center;居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.wrap {
				width: 623px;
				height: 417px;
				border: 1px solid black;
				background: url(img/bg1.png) no-repeat left top,
							url(img/bg2.png) no-repeat right top,
							url(img/bg3.png) no-repeat right bottom,
							url(img/bg4.png) no-repeat left bottom,
							url(img/bg5.png) no-repeat center center;
				margin: 100px auto;
				line-height: 400px;
				text-align: center;
				font-family: "微软雅黑";
				color: blueviolet;
				font-size: 40px;
				font-weight: 900;
			}
		</style>
	</head>
	<body>
		<div class="wrap">好好学习!</div>
	</body>
</html>

在这里插入图片描述

二、渐变

1.线性渐变

background:linear-gradient(to left,yellow,green);

to left:渐变方向 值2:颜色

background:linear-gradient(45deg,yellow,green);

值1:渐变角度 值2：颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 1000px;
				height: 100px;
				border: 1px solid black;
				margin: 0 auto;
				margin-top: 20px;
			}
			
			.div1 {
				background: linear-gradient(to left,yellow,green);
			}
			
			.div2 {
				height: 300px;
				background: linear-gradient(to left,green,yellow);
			}
			
			.div3 {
				background: linear-gradient(90deg,yellow,pink,blue,red);
			}
			
			.div4 {
				background: linear-gradient(135deg,
					black 0%,
					black 25%,
					yellow 25%,
					yellow 50%,
					green 50%,
					green 75%,
					red 75%,
					red 100%);
			}
			
			.div5 {
				background: linear-gradient(135deg,
					#000 0%,
					#000 25%,
					#fff 25%,
					#fff 50%,
					#000 50%,
					#000 75%,
					#fff 75%,
					#fff 100%
				);
				background-size: 100px 100px;
				animation: move 1s linear infinite;
			}
			@keyframes move{
					from{
							background-position: 0px 0px;
						}
					
					to{
							background-position: 100px 0px;
						}
					}

		</style>
	</head>
	<body>
		<div class="div1"></div>
		<div class="div2"></div>
		<div class="div3"></div>
		<div class="div4"></div>
		<div class="div5"></div>
	</body>
</html>

在这里插入图片描述

2.径向渐变

background:radial-gradient(at center,yellow,green);

at:关键词 center:中心点/起始点 值2:颜色

background:radial-gradient(at 50px 50px,yellow,green);

50px 50px:距离水平50像素，垂直50像素的距离。

background:radial-gradient(100px 50px at center,yellow,green);中心显示椭圆

100px 50px:由中心点向外辐射的范围

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				border: 1px solid black;
				float: left;
				margin-top: 60px;
				margin-right: 40px;
			}
			
			.div1 {
				background: radial-gradient(at center,yellow,green);
			}
			
			.div2 {
				background: radial-gradient(at left top,yellow,green);
			}
			
			.div3 {
				background: radial-gradient(at 50px 50px,yellow 0%,pink 30%,green 60%,red 100%);
			}
			
			.div4 {
				background: radial-gradient(100px 50px at center,yellow,green);
			}
		</style>
	</head>
	<body>
		<div class="div1"></div>
		<div class="div2"></div>
		<div class="div3"></div>
		<div class="div4"></div>
	</body>
</html>

在这里插入图片描述

三、过渡

transiation:param1,param2;

param1:过度的属性

param2:过度的时间

简便方式:transiation:all 3s;

all表示该元素所有属性。

可分开写：transiation-property:left;过渡的属性

​ transiation-duration:2s;过渡的时间

设置过渡的速度:

transiation-timing-function:linear(匀速/线性过渡)/ease(平滑过渡)/ease-in(加速/由慢到快)/

​ ease-out(由慢到快)/ease-in-out(由慢到快再到慢)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.wrap {
				width: 200px;
				height: 200px;
				border: 1px solid black;
				background: green;
				position: relative;
				left: 0;
				top: 0;
				transition: left 1s,top 1s;
			}
			
			.wrap:hover {
				left: 200px;
				top: 200px;
			}
		</style>
	</head>
	<body>
		<div class="wrap"></div>
	</body>
</html>

四、2D变换

都可从X、Y方向缩放、扭曲、旋转、位移

属性：transform:scale(x,y); 缩放倍数 (x,y)可为小数，不可为负数

​ transform:skew(45deg); 扭曲 单位为角度

​ transform:rotate(45deg); 旋转 单位为角度

​ 设置旋转的中心点：transform-origin:center bottom;

​ transform:tranlate(x,y); 位移 x表示水平位移 y表示垂直位移

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.wrap {
				width: 300px;
				height: 300px;
				background: red;
				margin: 150px auto;
				transition: all 0.5s;
			}
			
			.wrap:hover {
				background: purple;
				border-radius: 50%;
				transform: rotate(360deg);
			}
		</style>
	</head>
	<body>
		<div class="wrap"></div>
	</body>
</html>
wuke666666
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS3 background-image颜色渐变的实现代码
09-22
主要介绍了CSS3 background-image颜色渐变的实现代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS3中的transition和transform属性
m0_37756431的博客
03-14 5001
transform：转换，改变元素的外观，有很多方式来改变元素的外观，例如位移（translate），缩放（scale），旋转（rotate），倾斜（skew）等，它没用动画效果，数值改变元素样子立刻改变。 transition：过渡，指的是css的某个属性值如何平滑的改变，就是平常所说的动效 一、transform的使用 1、位移 translate(x,y) ...
CSS transition（过渡效果）详解
热门推荐
我只是个很菜的前端
10-25 7万+
CSS transition（过渡效果）详解
CSS初入门：过渡-Transitions
lalala_dxf的博客
03-22 4044
过渡 介绍 CSS transittions是一种更改CSS属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程，而不是立即生效。而要实现这一点，就必须满足如下两项内容： （1）指定要添加效果的CSS属性 （2）指定效果的持续时间 过渡的三要素： （1）必须要有属性发生变化 （2）必须告诉系统那个属性需要执行过渡效果 （3）必须告诉系统过渡的持续时长 触发过渡的方式： 1、:hover鼠标悬停触发 2、:active用户单击元素并按住鼠标时触发 3、:focus获得焦点时触发 4、@medi
CSS translation
南谖子的博客
05-02 2091
动画过渡属性 文章目录1、浏览器支持2、定义和用法3、语法4、transition-delay 属性5、transition-duration 属性6、transition-property 属性7、transition-timing-function 属性 1、浏览器支持 translation -moz-transition：Firefox -webkit-translation：Safari，Chrome，Edge -o-transition：Opera 2、定义和用法 transition .
css进阶（背景颜色渐变、过渡）
weixin_43847807的博客
10-21 8283
css进阶背景颜色径向渐变背景颜色线性渐变过渡 背景颜色径向渐变 径向渐变：中间部分椭圆形，四周填充（由中间到四周渐变） background: radial-gradient(red,yellow); 红椭圆填充黄色 background: radial-gradient(circle,red,yellow); 红正圆填充黄色 background: radial-gradient(red 60%,yellow 60%); 红60%，之后黄色 backgroun
css3实现背景动态渐变效果
11-21
本次案例为（背景颜色渐变），运用css3就能实现背景颜色渐变的效果； HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 渐变——天际线</title...
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
09-25
使用CSS3 的背景渐变 -webkit-gradient ，用一个背景渐变的 DIV 代替图片。下面是实现效果示例，相比以上方案优点是不使用图片，减小请求量和流量
详解CSS背景渐变图片transtion过渡效果技巧
09-27
主要介绍了详解CSS背景渐变图片transtion过渡效果技巧的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS3图标导航渐变背景切换特效
07-28
CSS3图标导航渐变背景切换特效是一款点击箭头方向可以设置不同渐变颜色效果。
CSS3给图片添加旋转背景特效
10-08
CSS3给图片添加旋转背景特效 || 鼠标悬停旋转背景特效
6种CSS3平滑过渡的渐变背景颜色
12-13
这是一款使用纯CSS3制作的平滑过渡的渐变背景颜色示例效果。背景渐变效果分别使用CSS3圆形渐变和线性渐变来完成。
CSS的渐变过渡
weixin_46162015的博客
07-29 527
一、线性渐变: 1.方向：默认从上到下 2.语法:background: linear-gradient(2~多个颜色，颜色中间用逗号分隔); linear-gradient(to方向[1到2两个],2~多个颜色，颜色中间用逗号分隔) linear-gradient(度数deg,2~多个颜色，颜色中间用逗号分隔) 3.加浏览器内核 4.方向:方向没有to直接跟的left/ri...
css的背景过渡
qq_53244180的博客
11-23 317
css的背景过渡
css设置过渡时间1s,transition CSS3动画属性之过渡
weixin_39809540的博客
08-03 4157
CSS3新增动画属性，transition(过渡)属性介绍，其作用就是：平滑的改变CSS的属性值transition 属性是一个简写属性，用于设置四个过渡属性：transition-property　　指定过渡的性质，(如：background属性，默认值为all)transition-duration　 　指定当前过渡的持续时间transition-timing-function　　延迟触发过...
CSS背景属性之颜色渐变
LuoYi_ly_的博客
10-25 6万+
这样的设计解决方案并不是只可以使用颜色渐变，我们可以使用两个div拼接，将文字放置两个div中间，但是有颜色渐变的话，我们就不需要那么复杂的解决。红色 ，黄色 ，绿色三色在0-100之间依照顺序有过渡的变化。0为红色，0-50为红色到黄色渐变， 100黄色。这里的 to top是默认的值，颜色渐变会从上而下由黄色到绿色有过渡渐变。下面两张效果图，前者是to right，后者是to left。效果图如下，左边是没有角度的，右边是45deg的。颜色渐变可以分为两种，线性渐变和径向渐变。...
前端高级技术之CSS3+Less+BootStrap实战教程
01-06
CSS 用于控制网页的样式和布局。 CSS3 是最新的 CSS 标准。Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性。Less 可以运行在 Node 或浏览器端。Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。本套视频旨在向学员全面剖析css3中的新增的各类属性与方案。深入了解预处理less，并从源码的角度解读Bootstrap相关实现。CSS3是最新的 CSS 级别,对CSS2.1中的边框、背景、文本、字体等做了扩展。新增2D、3D变换,过渡,动画。新增Flex、响应式、多列布局方案。Less 是一门CSS预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更易维护和扩展。Bootstrap是一套简洁、直观、强悍的前端开发框架，它可以让web开发更迅速、简单。
CSS transition
过客如期的博客
10-04 635
一，过渡属性 1.transition用于过渡属性，即属性值改变前后有过渡效果。 2.注意，过渡属于一定要定义过渡前的属性和过渡后的属性，**若过渡前属性未明确定义则不会产生过渡效果。**如下，若过渡前width没有直接定义，则width不会产生过渡效果。 3.transition定义在那个类或者那个伪类等等选择上都无所谓，只要该选择器仍作用于标签元素则过渡效果仍能生效。 二，子属性 1.transition-property: 定义过渡的属性，值为none时所有属性没有过渡效果，值为all，所有属性具有
css3 背景过度实现
weixin_30491641的博客
11-28 366
代码： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <p>Document</p><style>*...
css background-color 渐变
最新发布
04-24
CSS渐变背景颜色允许您使用多个颜色创建平滑过渡的背景，这在设计 Web 页面和应用程序时非常有用。您可以使用线性渐变或径向渐变来实现这一功能。线性渐变背景颜色沿着一条直线过渡，径向渐变背景颜色则是沿着一个...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值