HTML5/CSS3进阶知识点

最新推荐文章于 2023-04-05 19:29:27 发布

CookChopper

最新推荐文章于 2023-04-05 19:29:27 发布

阅读量119

点赞数

分类专栏：努力学前端

本文链接：https://blog.csdn.net/hjc13348/article/details/114967511

版权

努力学前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

HTML5语义化标签

	<header>头部标签</header>
	<nav>导航标签</nav>
	<article>内容标签</article>
	<section>块级标签</section>
	<aside>侧边栏标签</aside>
	<footer>尾部标签</footer>
	//针对搜索引擎的语义化标签
	//在IE9中，这些标签为行内标签

在这里插入图片描述

CSS选择器

	//nth-child(n)  		选择父元素中的第几个元素 不区分元素类型
	//nth-of-type(n)		选择父元素中的第几个指定子元素 区分元素类型

	伪类选择器
	::after		必须要有content属性 是行内元素
	::before	必须要有content属性 是行内元素

在这里插入图片描述

CSS3（2D转换）

	// css3样式
	//transition 		过渡
	.container{
		transiton:all 0.3s;   					//过渡写在本身上 谁做动画给谁加
	}
	
	//translate() 		相当于定位
	.container{
		transform:translate(100px,200px)  	 	//沿x轴向右移动100像素，沿y轴向下移动200像素
		transform:translate(50%，50%)			//百分比是盒子大小的百分比  即盒子的50%
		transform:translateX(100px);			//沿x轴向右移动100像素
		transform:translateY(200px); 			//沿y轴向下移动200像素
	}
	
	//rotate()		旋转 单位deg
	.container{
		transform:rotate(45deg);				//沿中心旋转45度
	}

	//transform-origin:x y; 	转换中心点 x与y中间空格隔开
	.container{
		transform-origin:50% 50%;  //即盒子的中心点
		transform-origin:right bottom;  //可以使用方位名词 也可以用像素
	}

	//scale(x,y) 		缩放效果
	.container{
		transform:scale(2);						//放大盒子的2倍  等比缩放
		transform:scale(0.5);					//缩小盒子的2倍  等比缩放
		//可以使用transform-origin设置中心点
	}

2D动画

	//2D动画   1.先定义动画  2.调用动画
	<!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>Demo4</title>
    <style>
    	/*2.在需要调用动画的元素调用*/
        .container{
            width: 100px;
            height: 100px;
            background-color:lightblue;
            /* 动画名称 */
            animation-name:move;
            /* 持续时间 */
            animation-duration:5s;
            /* 运动曲线 */
            animation-timing-function:linaer;  /*匀速*/
            /* 何时开始 */
            animation-delay:2s;
            /* 重复次数 iteration 重复的 conut 次数  infinite  无限*/
            animation-iteration-count:1;   
            /* 是否反方向播放 默认normal 反向alternate*/
            animation-direction:alternate;
            /* 动画结束后的状态  默认backwards 回到起始位置  停在结束位置 forwards */
            animation-fill-mode:forwards;
            /* 简写模式 动画名称 持续时间必写*/
            /* animation: 动画名称 持续时间 运动曲线 何时开始 重复次数 是否反向播放 动画结束状态 */
            }
        /*1.定义动画*/
        @keyframes move{
            25%{
                transform:translate(1000px,0);
            }
            50%{
                transform:translate(1000px,500px);
            }
            75%{
                transform:translate(0px,500px);
            }
            100%{
                transform:translate(0,0);
            }
        }
    </style>
</head>
<body>
    <div class="container">

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

2D动画（大数据热点图案例）

<!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>
    <style>
        body{
            background-color:#333;
        }
        .map{
            width:747px;
            height:617px;
            background:url(media/map.png) no-repeat;
            margin: 10px auto;
            position:relative;
        }
        .city{
            position:absolute;
            top: 227px;
            right: 200px;
        }
        .dotted{
            width: 10px;
            height: 10px;
            border-radius:50%;
            background-color: #09f;
        }
        .city div[class^="pulse"]{
            position:absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 12px;
            height:12px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            /*调用动画*/
            animation: pulse 1.2s linear infinite; 
        }
		
        .city div.pulse2{
            animation-delay: 0.4s;
        }
        .city div.pulse3{
            animation-delay: 0.8s;
        }
        .tb{
            position: absolute;
            top: 500px;
            right: 80px;
        }
        /*定义动画*/
        @keyframes pulse{ 
            70%{
                width: 40px;
                height: 40px;
                opacity: 1;
            }
            100%{
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="map">
        <div class="city">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city tb">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>
</html>

steps() 阶跃函数将一段动画分成几等分帧数

<!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>Demo6</title>
</head>
    <style>
        .text{
            width: 0;
            height: 30px;
            background-color: pink;
            font-size: 20px;
            /*强制让文本在同一行显示  */
            white-space:nowrap;
            /* 超出范围不显示 */
            overflow:hidden;
            animation: w 4s steps(10) forwards;
        }
        @keyframes w{
            0%{
                width: 0;
            }
            100%{
                width: 200px;
            }
        }
    </style>
<body>
    <div class="text">
        世纪佳缘我在这里等你
    </div>
</body>
</html>

3D转换知识点

三维坐标系水平向右垂直向下垂直屏幕朝外是正朝内是负
左手定则大拇指方向为正方向其他手指方向为正方向
transform:translate3d(x,y,z) rotate3d(x,y,z)
透视perspective 需要写在被观察的父元素上一般用像素单位
3D呈现 transform-style:preserve-3d; 开始3D立体空间效果给父元素写代码给子元素呈现

<!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>
    <style>
        body{
            /* 透视效果 */
            perspective:1000px;
        }
        section{
            width: 300px;
            height: 200px;
            margin: 100px auto;
            position: relative;
            /* 开启立体空间 */
            transform-style:preserve-3d;
            /* transition:all 1s; */
            /* 调用动画 */
            animation: rotate1 10s linear infinite;
            background: url(media/pig.jpg) no-repeat;
        }
        /* 定义动画 */
        @keyframes rotate1{
            form{
                transform: rotateY(0);
            }
            to{
                transform: rotateY(360deg);
            }
        }
        section div{
            position: absolute;
            left: 0;
            top: 0;
            width:300px;
            height: 200px;
            background-image: url(media/dog.jpg);
            background-repeat:  no-repeat;
        }
        section div:nth-child(1){
            transform: rotateY(0) translateZ(300px);
        }
        section div:nth-child(2){
            transform: rotateY(60deg) translateZ(300px);
        }
        section div:nth-child(3){
            transform: rotateY(120deg) translateZ(300px);
        }
        section div:nth-child(4){
            transform: rotateY(180deg) translateZ(300px);
        }
        section div:nth-child(5){
            transform: rotateY(240deg) translateZ(300px);
        }
        section div:nth-child(6){
            transform: rotateY(300deg) translateZ(300px);
        }

    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>
</html>

CookChopper

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5/CSS3进阶知识点

HTML5语义化标签 <header>头部标签</header> <nav>导航标签</nav> <article>内容标签</article> <section>块级标签</section> <aside>侧边栏标签</aside> <footer>尾部标签</footer> //针对搜索引擎的语义化标签 //在IE9中，这些标签为行内标签 .
复制链接

扫一扫