html-css8 背景特性/链接点击移入/雪碧图/渐变/果冻泡泡渐变动画

木一叶liuyue

已于 2022-04-14 21:38:24 修改

阅读量252

点赞数

分类专栏：前段文章标签： css3

于 2021-08-11 23:41:50 首次发布

本文链接：https://blog.csdn.net/Kerryliuyue/article/details/119619970

版权

前段专栏收录该内容

47 篇文章 0 订阅

订阅专栏

背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box1{
        height:500px;
        width:500px;
        background-color: aqua;
        background-image: url("/01/图片/京东练习1.png");
        /*
        background-image 设置背景图片
            可以同时设置背景图片和背景颜色，这样背景颜色就会成为图片的背景色
            如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满
            如果背景的图片大于元素，将会无法完全显示
            
            如果背景图片和元素一样大，则会直接正常显示
        */
        background-repeat: no-repeat;
        /*background-repeat用来设置背景的重复方式
            repeat默认值，背景会沿着x轴，y轴双方向重复
            repeat-x 沿着x轴方向重复
            repeat-y 沿着y轴方向重复
            no-repeat 背景图片不重复
        */
        background-position:50px 100px;
        background-position:left top;
        /*background-position背景图片的位置
通过偏移量（px）：水平方向/垂直方向的偏移量(左边和上边偏移量)
            通过top left right center bottom几个方位词
                使用方位词必须要同时指定两个值，只写一个那么第二个默认是center;
            
        */
        background-size: 250px 200px;
         background-size: 100% 80%;
         background-size:cover;
        /*
        background-size 设置背景图片的大小
                第一个值表示宽度
                第二个值表示高度
                如果只写第一个，第二个默认是auto

                cover图片的比例不变，将元素铺满
                contain 图片的比例不变，将图片在元素中完整显示
        */
        background-origin:padding-box;
       /* background-origin: 背景图片的偏移量计算的原点
            padding-box 默认值，background-position从内边距出开始计算
            content-box 背景图片的偏移量从内容区处计算
            border-box  背景图片的变量从边框处开始计算（设置一个边界就看出来了）
                
       */
       border:10px red double;
      background-clip:border-box;
      /*background-clip
      border-box  默认值，背景会出现在边框的下边
      padding-box 背景只会出现在内容区和内边距
      content-box  背景只会出现在内容区
      */

    }


    .box2{
        width:400px;
        height: 1000px;
        background-image: url('/01/图片/京东练习2.png');
        background-repeat: no-repeat;
        background-position: 0 0;
        background-color: blue;
        background-attachment: fixed;
        /*
        background-attachment 背景图片是否会随元素移动
                scroll 默认值 背景图片会随元素移动
                fixed  背景会固定在 页面中，不会随元素移动
        background 简写属性
        */

    }
</style>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接点击移入的状态</title>
</head>
<style>
    a:link{
        display: block;
        width: 193px;
        height: 180px;
        background-image: url("/01/图片/京东练习1.png");
    }

    a:hover{
        background-image: url("/01/图片/京东练习2.png");
    }
    a:active{
        background-image: url("/01/图片/京东练习3.jpg");
    }
    /*
    图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载
     浏览器加载外部资源时是按需加载的，用则加载，不用则不加载

    */
</style>
<body>
    <a href="javascript:;"></a>
</body>
</html>

css-sprite雪碧图

       解决图片闪烁的问题，可以将多个小图片统一保存到一个大图片中，
       然后通过backgr-position来调整显示的位置 
       这样图片会同时加载到网页中，就可以有效的避免出现闪烁的问题

雪碧图使用步骤:
1.确定要使用的图标
2.测量图标的大小
3.根据测量结果创建一个元素
4.将雪碧图设置为元素的背景图片
5.设置一个偏移量以显示正确图片

雪碧图的优点：
一次性将多个图片加载进页面，降低请求的次数，加快访问速度

在这里插入图片描述

渐变

线性渐变

  颜色沿着一条直线发生变化
    linear-gradient(red,yellow),红色在开头，黄色在结尾，中间是过渡区域
    线性渐变的开头，我们可以指定一个渐变的方向
    to left
    to right
    to bottom
    to top
    deg 表示度数
    turn 表示圆
    repeating-linear-gradient

   background-image: linear-gradient( to left top,red,yellow);
   background-image: linear-gradient( to left ,red,yellow);
   background-image: linear-gradient(red,yellow);
   background-image: linear-gradient( .25turn,red,yellow);
   background-image: linear-gradient(150deg,blue,green);
   background-image: linear-gradient(blue,green,yellow,red);
   background-image:repeating-linear-gradient(to right,#bfa,yellow 50px);

径向渐变，放射性的效果

  默认情况下是按照元素的形状来计算的
            正方形的元素-->生成圆形渐变
            长方形-->椭圆形
        radial-gradient(大小 at 位置，颜色位置，颜色位置,颜色位置)
        大小:
            circle 圆形
            ellipse 椭圆
            closest-side近边
            closest-cornor近角
            farthest-side远边
            farthest-cornor 远角
        位置:
            top right left center bottom

 
background-image: radial-gradient(red,#bfa);
background-image: radial-gradient(100px 100px,red,#bfa);
/*指定渐变大小是多少*/
background-image: radial-gradient(closest-side at 100px 100px,red,#bfa);
/*指定渐变的位置在100,100这个地方*/
background-image: radial-gradient(farthest-corner at 100px 100px,red,#bfa);/*最远的那个角*/
background-image: radial-gradient(circle ,red,yellow);

萌翻少女心的发光果冻泡泡

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>萌翻少女心的发光果冻泡泡</title>
	<!-- <link rel="stylesheet" href="./css/test01.css"> -->

</head>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	body {
		height: 100vh;
		/* 弹性布局，居中显示 */
		display: flex;
		justify-content: center;
		align-items: center;

		background: linear-gradient(150deg, #e99aa8, #fef9d7);

	}

	.container {
		width: 200px;
		height: 200px;
		position: relative;
		/* background-color: aqua; */
	}

	/*泡泡*/
	.bubble {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		/* 径向渐变 */
		background: radial-gradient(circle at 75% 30%, #fff 5px, #e785b6 8%, #5b5b5b 60%, #e96c96 100%);

		/* 阴影 */
		box-shadow: inset 0 0 20px #fff,
			inset 10px 0 46px #eaf5fc,
			inset 80px 0 60px #efcde6,
			inset -20px -60px 100px #f9f6de,
			inset 0 50px 140px #f9f6de,
			0 0 90px #fff;
		animation: bubble 4s ease-in-out infinite;
	}

	.shadow {
		background-color: rgba(0, 0, 0, 0.15);
		width: 150px;
		height: 40px;
		border-radius: 50%;
		position: absolute;
		left: 50%;
		margin-left: -75px;
		bottom: -100px;
		/* 一点点模糊效果 */
		filter: blur(1px);
		animation: shadow 4s ease-in-out infinite;
	}



	/* 定义动画

泡泡浮动动画*/
	@keyframes bubble {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-80px);
		}
	}

	/* 投影动画 */
	@keyframes shadow {

		0%,
		100% {
			transform: scale(0.5);
		}

		50% {
			transform: scale(1);
		}
	}
</style>

<body>
	<div class="container">
		<div class="bubble"></div>
		<div class="shadow"></div>
	</div>
</body>

</html>

木一叶liuyue

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html-css8 背景特性/链接点击移入/雪碧图/渐变/果冻泡泡渐变动画

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
复制链接

扫一扫