背景图、边框图、阴影、圆角、过渡、动画(css)（0721）

最新推荐文章于 2024-02-29 06:24:39 发布
最新推荐文章于 2024-02-29 06:24:39 发布
阅读量220 收藏
点赞数
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_71439967/article/details/125915206
版权

     背景图

     background属性是一个简写属性，可以在一个声明中设置所有的背景属性，包括：

  • background-color 指定要使用的背景颜色

  • background-position 指定背景图像的位置

  • background-size 指定背景图片的大小

  • background-repeat 指定如何重复背景图像

  • background-origin 指定背景图像的定位区域

  • background-clip 指定背景图像的绘画区域

  • background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动

  • background-image 指定要使用的一个或多个背景图像

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.div1 {
				width: 500px;
				height: 280px;
				/* 背景图像大小 */
				background-size: 100px, 500px;
				/* 背景图 */
				background-image: url(img/kl.webp), url(img/bj.webp);
				/* 背景图像的起始位置。 */
				background-position: right bottom, left center;
				/* 背景图像平铺 */
				background-repeat: no-repeat, repeat;
				color: #FFFFFF;
				text-indent: 2rem;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<p> 斯蒂芬·库里于2009年通过选秀进入NBA后一直效力于金州勇士队，新秀赛季入选最佳新秀第一阵容；
				2014-15、2016-17、2017-18赛季、2021-22赛季四次夺得NBA总冠军，并于2021-22赛季当选总决赛MVP（FMVP）；
				[400] 两次荣膺常规赛MVP；2015-16、2020-21赛季两次荣膺常规赛得分王；
				2021-22赛季荣膺西部决赛MVP； [308] [382] 8次入选最佳阵容（4次一阵、3次二阵、1次三阵）；
				[311] [380] 8次入选全明星首发阵容，2021年10月入选NBA75大巨星，12月成为NBA历史三分王，2022年荣膺全明星正赛MVP。
			</p>
		</div>
	</body>
</html>

运行效果:

 background-Origin属性指定background-position属性应该是相对位置。

值描述
padding-box背景图像填充框的相对位置
border-box背景图像边界框的相对位置
content-box背景图像的相对位置的内容框
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">

			.div2 {
				margin-top: 40px;
				width: 1520px;
			}

			.a1 {
				width: 380px;
				height: 280px;
				padding: 30px;
				border: 30px solid rgba(255, 0, 0, 0.257);
				background-size: 20px;
				background-image: url(img/kl.webp);
				background-repeat: no-repeat;
				/*背景图像边界框的相对位置*/
				background-origin: border-box;
				text-indent: 2rem;
				float: left;
			}

			.a2 {
				width: 380px;
				height: 280px;
				padding: 30px;
				border: 30px solid rgba(255, 0, 0, 0.257);
				background-size: 20px;
				background-image: url(img/kl.webp);
				background-repeat: no-repeat;
				/* 背景图像填充框的相对位置 */
				background-origin: padding-box;
				text-indent: 2rem;
				float: left;
				margin-left: 10px;
			}

			.a3 {
				width: 380px;
				height: 280px;
				padding: 30px;
				border: 30px solid rgba(255, 0, 0, 0.257);
				background-size: 20px;
				background-image: url(img/kl.webp);
				background-repeat: no-repeat;
				/* 背景图像的相对位置的内容框 */
				background-origin: content-box;
				text-indent: 2rem;
				float: left;
				margin-left: 10px;
			}

		</style>
	</head>
	<body>
		<div class="div2">
			<div class="a1">
				<p> 斯蒂芬·库里于2009年通过选秀进入NBA后一直效力于金州勇士队，新秀赛季入选最佳新秀第一阵容；
					2014-15、2016-17、2017-18赛季、2021-22赛季四次夺得NBA总冠军，并于2021-22赛季当选总决赛MVP（FMVP）；
					[400] 两次荣膺常规赛MVP；2015-16、2020-21赛季两次荣膺常规赛得分王；
					2021-22赛季荣膺西部决赛MVP； [308] [382] 8次入选最佳阵容（4次一阵、3次二阵、1次三阵）；
					[311] [380] 8次入选全明星首发阵容，2021年10月入选NBA75大巨星，12月成为NBA历史三分王，2022年荣膺全明星正赛MVP。
				</p>
			</div>
			<div class="a2">
				<p> 斯蒂芬·库里于2009年通过选秀进入NBA后一直效力于金州勇士队，新秀赛季入选最佳新秀第一阵容；
					2014-15、2016-17、2017-18赛季、2021-22赛季四次夺得NBA总冠军，并于2021-22赛季当选总决赛MVP（FMVP）；
					[400] 两次荣膺常规赛MVP；2015-16、2020-21赛季两次荣膺常规赛得分王；
					2021-22赛季荣膺西部决赛MVP； [308] [382] 8次入选最佳阵容（4次一阵、3次二阵、1次三阵）；
					[311] [380] 8次入选全明星首发阵容，2021年10月入选NBA75大巨星，12月成为NBA历史三分王，2022年荣膺全明星正赛MVP。
				</p>
			</div>
			<div class="a3">
				<p> 斯蒂芬·库里于2009年通过选秀进入NBA后一直效力于金州勇士队，新秀赛季入选最佳新秀第一阵容；
					2014-15、2016-17、2017-18赛季、2021-22赛季四次夺得NBA总冠军，并于2021-22赛季当选总决赛MVP（FMVP）；
					[400] 两次荣膺常规赛MVP；2015-16、2020-21赛季两次荣膺常规赛得分王；
					2021-22赛季荣膺西部决赛MVP； [308] [382] 8次入选最佳阵容（4次一阵、3次二阵、1次三阵）；
					[311] [380] 8次入选全明星首发阵容，2021年10月入选NBA75大巨星，12月成为NBA历史三分王，2022年荣膺全明星正赛MVP。
				</p>
			</div>
		</div>
	</body>
</html>

运行效果:

 background-clip属性指定背景绘制区域。

值说明
border-box默认值。背景绘制在边框方框内（剪切成边框方框）
padding-box背景绘制在衬距方框内（剪切成衬距方框）
content-box背景绘制在内容方框内（剪切成内容方框）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.div3 {
				width: 1520px;
			}

			.b1 {
				width: 380px;
				height: 280px;
				padding: 30px;
				border: 30px solid rgba(255, 0, 0, 0.257);
				background-color: orange;
				/* 默认值。背景绘制在边框方框内 */
				background-clip: border-box;
				text-indent: 2rem;
				float: left;
			}

			.b2 {
				width: 380px;
				height: 280px;
				padding: 30px;
				border: 30px solid rgba(255, 0, 0, 0.257);
				background-color: orange;
				/* 背景绘制在衬距方框内 */
				background-clip: padding-box;
				text-indent: 2rem;
				float: left;
				margin-left: 10px;
			}

			.b3 {
				width: 380px;
				height: 280px;
				padding: 30px;
				border: 30px solid rgba(255, 0, 0, 0.257);
				background-color: orange;
				/* 背景绘制在内容方框内 */
				background-clip: content-box;
				text-indent: 2rem;
				float: left;
				margin-left: 10px;
			}
		</style>
	</head>
	<body>
		<div class="div3">
			<div class="b1">
				<p> 斯蒂芬·库里于2009年通过选秀进入NBA后一直效力于金州勇士队，新秀赛季入选最佳新秀第一阵容；
					2014-15、2016-17、2017-18赛季、2021-22赛季四次夺得NBA总冠军，并于2021-22赛季当选总决赛MVP（FMVP）；
					[400] 两次荣膺常规赛MVP；2015-16、2020-21赛季两次荣膺常规赛得分王；
					2021-22赛季荣膺西部决赛MVP； [308] [382] 8次入选最佳阵容（4次一阵、3次二阵、1次三阵）；
					[311] [380] 8次入选全明星首发阵容，2021年10月入选NBA75大巨星，12月成为NBA历史三分王，2022年荣膺全明星正赛MVP。
				</p>
			</div>
			<div class="b2">
				<p> 斯蒂芬·库里于2009年通过选秀进入NBA后一直效力于金州勇士队，新秀赛季入选最佳新秀第一阵容；
					2014-15、2016-17、2017-18赛季、2021-22赛季四次夺得NBA总冠军，并于2021-22赛季当选总决赛MVP（FMVP）；
					[400] 两次荣膺常规赛MVP；2015-16、2020-21赛季两次荣膺常规赛得分王；
					2021-22赛季荣膺西部决赛MVP； [308] [382] 8次入选最佳阵容（4次一阵、3次二阵、1次三阵）；
					[311] [380] 8次入选全明星首发阵容，2021年10月入选NBA75大巨星，12月成为NBA历史三分王，2022年荣膺全明星正赛MVP。
				</p>
			</div>
			<div class="b3">
				<p> 斯蒂芬·库里于2009年通过选秀进入NBA后一直效力于金州勇士队，新秀赛季入选最佳新秀第一阵容；
					2014-15、2016-17、2017-18赛季、2021-22赛季四次夺得NBA总冠军，并于2021-22赛季当选总决赛MVP（FMVP）；
					[400] 两次荣膺常规赛MVP；2015-16、2020-21赛季两次荣膺常规赛得分王；
					2021-22赛季荣膺西部决赛MVP； [308] [382] 8次入选最佳阵容（4次一阵、3次二阵、1次三阵）；
					[311] [380] 8次入选全明星首发阵容，2021年10月入选NBA75大巨星，12月成为NBA历史三分王，2022年荣膺全明星正赛MVP。
				</p>
			</div>
		</div>
	</body>
</html>

运行效果:

 边框图

border-image 属性允许在元素的边框上绘制图像

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.div1{
				width: 300px;
				height: 200px;
				/* 透明边框 */
				border: 15px solid transparent;
				border-image: url(img/border.png) 30 30 round;
			}
			.div2{
				width: 300px;
				height: 200px;
				/* 透明边框 */
				border: 15px solid transparent;
				border-image: url(img/border.png) 30 30 repeat;
			}
			.div3{
				width: 300px;
				height: 200px;
				/* 透明边框 */
				border: 15px solid transparent;
				border-image: url(img/border.png) 30 30 stretch;
			}
		</style>
	</head>
	<body>
		<div class="div1">铺满</div>
		<div class="div2">平铺</div>
		<div class="div3">拉伸</div>
	</body>
</html>

运行效果:

 阴影

box-shadow属性可以设置一个或多个下拉阴影的框。

box-shadow:水平阴影的位置 垂直阴影的位置 阴影模糊度  阴影颜色 内阴影外阴影(默认外阴影)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.div1{
				width: 100px;
				height: 100px;
				background-color: #008000;
				border-radius: 50%;
				/* 同时给元素设置内外阴影 */
				/* box-shadow:水平阴影的位置 垂直阴影的位置 阴影模糊度  阴影颜色 内阴影外阴影(默认外阴影)*/
				box-shadow: 10px 10px 5px #47BDBE inset,7px 5px 5px #A6A6A6;
			}
		</style>
	</head>
	<body>
		<div class="div1"></div>
	</body>
</html>

运行效果:

 过渡

transition 属性设置元素当过渡效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.div1{
				width: 300px;
				height: 300px;
				background-color: #008000;
				/* 过渡动画  all 全部过渡*/
			    transition: all 3s;
				/* 过渡动画 部分过渡 */
				/* transition: background-color 3s,border-radius 3s; */
				/* 分3段执行 */
				/* transition-timing-function: steps(3); */
			}
			.div1:hover{
				background-color: #FF0000;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div class="div1"></div>
	</body>
</html>

运行效果:

 动画(css)

一些 CSS 属性是可以有动画效果的，这意味着它们可以用于动画和过渡。

动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.div1{
				width: 300px;
				height: 300px;
				background-color: #008000;
				border-radius: 50%;
				/* 应用动画 */
				animation-name: name;
				/* 动画时长 */
				animation-duration: 4s;
				/* 动画填充模式,forwaeds的作用是将动画的样式停留在最后一个 */
				animation-fill-mode: forwards;
				/*动画延迟的时间 当值为负数时表示动画已经执行了多长时间(这里为正数所以2s后才 
                执行动画)*/
				animation-delay: 2s;
				/* 动画来反过渡 */
				animation-direction: alternate;
				/* 动画过渡次数(无限) */
				animation-iteration-count: infinite;
			}
			@keyframes name{
                /*默认属性*/
				/* from{
					background-color: #008000;
				}
				to{
					background-color: #FF0000;
				} */
                /*分为四段*/
				25%{
					background-color: #0000FF;
				}
				50%{
					background-color: #00FFFF;
				}
				75%{
					background-color: #0198CD;
				}
				100%{
					background-color: #EA5F50;
				}
			}
		</style>
	</head>
	<body>
		<div class="div1"></div>
	</body>
</html>

运行效果:

 

爱敲代码的斯蒂芬
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css背景动画_CSS背景动画
culuo8053的博客
08-02 1005
css背景动画Background animations are an awesome touch when used correctly. In the past, I used MooTools to animate a background position. Luckily these days CSS animations are widely supported enough to...
CSS动画效果-用于背景（旋转等）
linxuanasd的博客
06-20 1215
图示，我加了一张图片，不需要的可以不用添加，主要是10个正方形进行旋转。喜欢不同的图形可以进行更改，对颜色可以进行调整。 话不多说，直接上代码
图片过渡效果html,html – 背景图像上的CSS3过渡
weixin_42526101的博客
06-03 323
当然可以,尝试这样的事情：HTMLCSS#planet {width:200px;height:200px;background: transparent url(http://cdn3.iconfinder.com/data/icons/nx11/Internet%20-%20Real.png) no-repeat center center;}#planet {-webkit-animatio...
CSS——scss中动态引入背景图
最新发布
qq_43201350的博客
02-29 1117
CSS——scss中动态引入背景图
css动画唯美背景,小码哥-利用CSS3渐变实现唯美背景图
weixin_32999557的博客
08-03 416
原标题：小码哥-利用CSS3渐变实现唯美背景图CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变(gradients)，你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变(gradient)是由浏览器生成的。接下来奉上几张图片来一睹CSS3 渐变的魔法吧~ 以...
关于css3如何实现圆角边框
01-08
除了基本用法，`border-radius`还可以与其他CSS3特性结合使用，比如过渡（transition）和动画（animation），以创建动态的圆角效果。例如，可以改变圆角半径来实现按钮的悬停效果： ```css .button{ width: 100px;...
CSS3 iPhoneX手机屏幕背景和页面背景图片同时切换特效
06-11
- `css`文件：CSS文件将定义这些元素的样式，包括手机屏幕的形状、边框、阴影以及背景图片的过渡效果。例如，可以使用`border-radius`创建圆角，`box-shadow`添加阴影，`@media`查询来适配不同设备。 - `js`文件：...
CSS3打开弹出登陆框背景图片代码.zip
10-08
在实际应用中，CSS3用于设置登录框的样式，包括背景图片、边框、阴影、圆角等，同时通过CSS3的transition和animation属性实现平滑的过渡和动画效果。而jQuery则可以用于处理用户交互，如点击按钮时弹出登录框，或者...
15款css3鼠标悬停图片动画过渡特效.zip
07-05
这个压缩包"15款css3鼠标悬停图片动画过渡特效.zip"显然包含了15个不同的CSS3实现，专门用于图片在鼠标悬停时的动态效果。这些效果可以为网站增添交互性和视觉吸引力，从而提高用户体验。 首先，我们来详细了解一下...
CSS3图片导航效果.zip_CSS3图片导航效果_导航
09-23
再者，CSS3的边框半径（border-radius）属性可以创建圆角效果，为导航菜单增添现代感。结合使用背景图片，我们可以创建出带有独特形状和图标的导航项。 此外，CSS3的盒阴影（box-shadow）和文字阴影（text-shadow）...
image target behaviour 和image target的关系_CSS3中用background-image实现粒子动画效果
weixin_39945810的博客
11-20 101
前言继续前几天的文章《王者荣耀匹配人员加载页面动画用纯CSS撸出来，你信吗？》，添加按钮、背景粒子动画效果。其实在码代码的时候会发现，很多东西都是殊途同归的，方法千千万，能解决问题的都是好办法，不一定非要把代码写的特别高深，这样反而后来的人看不懂，维护根据头疼。所以用最简单通俗的代码，更能利于后期的维护开发。ok！先来看看背景粒子动画效果预览图：以下代码都是基于前一篇文章《王者荣耀匹配人员加载页面...
过渡动画 css3渐变
m0_62487693的博客
02-21 363
background: linear-gradient(red 0%, green 50%, blue 50%) 和 background: linear-gradient(red 0%, green 50%, blue 10%)默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。10% 到 85% 是 red-green 的过渡色，85%-90% 是 green-blue 的过渡色。
CSS实现炫酷动画背景
m0_61643133的博客
11-13 2670
因为在视频号的后台，有小伙伴留言说，想要这个案例的源码，所以，今天就把这个源码也分享出来了，有兴趣的小伙伴可以自行练习起来。
CSS 渐变背景动画的实现
军火库
03-15 2939
如果你用过SASS/LESS，你应该写过一些全局的变量。这东西不是新概念，在其他语言中早就有的！而对于CSS来说，自定义变量不亚于一场革命！声明一个自定义属性，属性名需要以（--）开始，属性值则可以是任何有效的 CSS 值。通过var(--*)来使用但是这这种方式也有缺点，就是我们只能定义变量的初始值，没有办法指定变量的类型。于是CSS又增加了@property规则之后，我们还可以像下述代码这样去定义个 CSS 自定义属性,同样通过var()使用syntax：=表示属性的类型。
html中的svg阴影、渐变、动画
m0_67883007的博客
12-20 1414
在 元素中定义的图形元素不会直接呈现。可以在视图的任意地方利用 元素呈现这些元素。每一像素的颜色值（一个表示为 [红，绿，蓝，透明度] 的矢量）都经过矩阵乘法计算出新的颜色。 将输入图像作为一个整体，通过属性 dx 和属性 dy 的值指定一个偏移量。 元素是用来定义形状的通用元素。将 和 结合在一起，即可创建图形的阴影效果。 元素用来定义径向渐变，以对图形元素进行填充或描边。
css3边框、背景、过渡以及动画
weixin_71437031的博客
07-21 665
css3时钟小动画
CSS技巧：实现背景动画
m0_47883103的博客
09-17 1090
关键点 当 box-shadow 的模糊半径和扩张半径都为 0 的时候，我们可以得到一个和元素大小一样的阴影 box-shadow 是可以设置多层的，也就是多层阴影，而且可以进行过渡变换动画（补间动画） background-image: linear-gradient()，也就是渐变背景是不能进行补间动画的 <div class="shadow"></div> <div class="gradient"></div> .shadow { po
如何在CSS3中使用多个背景和动画
cukeoumuqian0413的博客
08-04 382
Multiple backgrounds with CSS3 and a little of animation. In CSS3 appear new possibility to use multiple backgrounds for the objects, in our new article I will demonstrate how to do it. And, I going t...
CSS3动画实现背景图轮播
热门推荐
weixin_43885123的博客
12-01 1万+
CSS3动画实现背景图轮播 利用css3动画切换背景图的路径；使这个动画无限循环下去，以实现背景图切换的效果。 代码： &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&am
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值