在 Visual Studio 2022中配置vue框架，以及一些简单的css效果展示（1）

1.配置框架首先找到这个应用安装必要构建在官网中安装这个配置好就可以了新建项目2.顶框.pox2 { width: 100%; height: 60px; padding: 0 25px; background-color:#689be8; position: fixed; top: 0; left: 0; border-bottom: 1px solid #f0f2f5; }3.右侧悬浮框.pox3 { width: 300px; position: fixed; top: 70px; right: 100px; height: auto; padding: 15px; background-color: #f6f8fa; border-radius: 6px; box-sizing: border-box; box-shadow: 0 4px 12px rgba(0,0,0,0.06); border: 1px solid #f0f0f0; }高度由里面塞的东西决定4.中部主要内容框.pox { width: 800px; margin: 20px auto; padding: 20px; background-color: #ffffff; height: auto; z-index: 1000; border-radius: 6px; box-sizing: border-box; box-shadow: 0 4px 12px rgba(0,0,0,0.06); border: 1px solid #f0f0f0; }大概就是这样的布局了。5.svg的一个简单动画实例图案样式pox44 width: 150px;height: 650px;svg classpox44 path dM40,0 L40,0 40,320 L40,320 150,320 L150,320 150,0 fill#39D7DB/path path dM50,320 L50,320 54,324 C54,320 35,348 38,362 C38,362 34,352 34,352 L34,352 100,452 L100,452 115,450 L97,415 147,390 C147,390 140,324 140,324 L140,324,140,320 Z fill#FCD2BB/path /svg然后在pox中加 transition: height 1s ease;把height改成100px加.pox43:hover { height: 650px; }这样就可以实现鼠标范围hover动画效果