CSS3特效页面设计

少年白马

已于 2022-03-01 19:01:54 修改

阅读量757

点赞数

分类专栏： html 文章标签： css3 css 前端

于 2020-08-19 21:31:48 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44833724/article/details/106503556

版权

本文介绍了CSS3在页面设计中的应用，包括2D转换效果、过渡效果、导航栏设计、派生选择符的使用以及伪类的实践，通过这些技巧可以创建出富有动态感和交互性的前端页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS3特效页面设计

页面结构
参考资料
代码实现

页面结构

在这里插入图片描述

参考资料

在这里插入图片描述

2d转换效果


<!DOCTYPE html>
<html>
<head>
		<style> 
		div
		{
   
			margin:30px;
			width:300px;
			height:200px;
				
		}
		div img{
   
			width:100%;
			height:100%;
		}
		div:hover{
   
			transition:all 1s;
			//transform:rotate(360deg);
			transform:scale(1.1,1.1);
		}
		</style>
</head>
<body>

<div><img src="building.jpg"></img></div>

</body>
</html>

CSS3过度效果


<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <style> 
	div
	{
   
		width:100px;
		height:100px;
		background:yellow;
		transition:width 2s;
	}

	div:hover
	{
   
	    width:300px;
	}
</style>
</head>
<body>

<div></div>

<p>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</p>

</html>