城乡建设环保部网站源码网站程序

当前位置： 首页 > news >正文

城乡建设环保部网站,源码网站程序,好的网页设计网站推荐,工信部网站 验证码53 个 CSS 特效 2 这里是第 17 到 32 个#xff0c;跟上一部分比起来多了两个稍微大一点的首页布局#xff0c;上篇#xff1a;53 个 CSS 特效 1#xff0c;依旧#xff0c;预览地址在 http://www.goldenaarcher.com/html-css-js-proj/#xff0c;git 地址#xff1a; …53 个 CSS 特效 2 这里是第 17 到 32 个跟上一部分比起来多了两个稍微大一点的首页布局上篇53 个 CSS 特效 1依旧预览地址在 http://www.goldenaarcher.com/html-css-js-proj/git 地址 https://github.com/GoldenaArcher/html-css-js-proj 3D Card 日常用得到基本逻辑其实上面都实现过挺多次了 Helicopter 和自行车一样炫技之作不过背景的移动倒是具有一些参考意义有些情况下可能会用得到 Business Card 日常……可能用得到……感觉如果有什么 logo 需要 hover并且正反内容都不一样的话确实有可能需要。 这个技巧比较妙的就是它是纯 CSS 实现没用 JS。 card 的特效和之前写的差不多不过这个最主要的区别还是在于前后卡片内容不同并且全都由 CSS 控制这里也学到了一个新的 CSS backface-visibility: hidden;这样在翻转到反面时backface卡片的内容就是隐藏的了。 没有这个特性的效果如下 这个特性在实现的时候会同时管理前后两面的 visibility不怎么做 3D 还真的不太了解这些 CSS…… 之前在学黑马的时候也有做过类似的特效 区别在于这个这个用了 z-index 去进行控制管理二者实现上稍稍不太一样不过同样都挺妙的。 这个硬币的笔记在学完一起做个走马灯吧 - CSS 3D 转换学习笔记学习案例 里面对于 2D 和 3D 的转换有更多的解释性注释。 另外一点就是背景的实现这里用的是 linear-gradient然后子内容用的是 margin 去控制和边框的距离: background: linear-gradient(100deg,rgb(255, 255, 255) 40%,rgb(38, 38, 38) 0 );另一种技巧用的是 border 我个人可能会偏向用 border 去实现……这样感觉 margin 的过度是不是会更自然……但是这样的话姓名那边要做到左边穿模也要另外加一下 border-left 去拼一个三角补全缺口吧…… 上面 border 的笔记CSS 的十个高级使用技巧 Radio Button 同 toggle 和 checkbox Slide Show 日常……可能用得到…… 主要还是看业务需求如果使用框架大多数情况下总是能够找到对应的 react/vue/ang 的 slideshow/carousel二者都是用来寻找这个类似功能的关键词看怎么命名了前者叫幻灯片后者叫轮播这里指代的就是一个东西 总体效果有这么几个因为间隔时间比较多所以可能看得不是很清楚 自动播放喜爱暗的按钮可以控制自动播放点击一下停止转播放或反过来点击左右手动翻页停止播放 CSS 方面这里倒是没有什么特别特殊的技巧主要还是用 JS 控制 slideshow 的播放和 class 的增删 我还以为写过好几个 slide show结果找了一下一个都没看到这可真是…… 不敢相信 Atom Animation 也是纯 CSS 实现主要就是 3Danimation 特效的这些事儿使用场景感觉也有限不过用来学学 3D 挺好的 另外就是如果要做正方/正圆可以定义高度之后使用 aspect-ration: 1; 进行实现 Button .
和其他的 UI 功能需求相似 Hamburger Menu2 日常可能用得到不过如果使用 UI 库的话有一定概率 navbar 是覆盖内容 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rJZiI0Fx-1692916019760)(img/hamburger2.gif)] 其实这个效果之前有提到过这里唯一的区别大概就是多了一个背景放大的过度以及 menu 不是出现在 sidebar而是出现在屏幕正中间 这是另一个效果的直观对比可以看出来 hamburger icon 的效果是一样的这里的是一个简化版 Sidebar 日常可能用得到不过如果使用 UI 库的话有一定概率 sidebar 是覆盖内容 特效大概是这样的 这里做了几个 breakpoints主要就是 menu 和背景的大小区别小屏幕两个都是全屏大屏幕大概是 55 分37 分28 分这样就不重复放了 顺便讲几个新学到的 tricks 定位 这也算是一个新的 trick 吧以前都是用 position: absolute 去解决的这里使用的是 transform: translateX()也是以前没有考虑过的点 flex-grow 不用 flex-grow: 1 的效果 flex-grow: 1 会让当前内容也就是这个 text 的内容填补这个 flex 剩下的所有空间间接实现了让箭头填充到最右边的功能。 以前看的免费教程大多数都是比较老的教程里面 flex 相对而言都是比较新的内容所以一般都是用 position: absolute 把旁边的 icon 拉出文档流。现在看来使用 flex 的方法代码量更少实现起来也挺妙的。 flex margin 使用 margin-left: auto 就会自动的实现左对齐即等同于 margin-left: 10% 上面是这是不使用 margin-left: auto 的情况。不过就算使用 margin-right: 0其实也不会将多余的部分 assign 给 margin-left 同样实现的内容还有父元素使用 padding-left 之类的总体来说实现方法较多 这个负载度在这个半成品系列中算是比较高的了顺便感叹下在 yt 上刷新的 css 教程果然……还蛮新的…… Flower 用不太到但是思路挺有趣的如果想要更加自然一点的效果可以不同花瓣使用 z-index 调整一下或者看看能不能用 pseudo-element 增加点锯齿/大小。当然本身效果就挺自然的自然界的花朵同一朵花上的花瓣其实真说起来差异不是特别大 这还是第一个静态的效果如下 其实这里主要还是更深入地了解了一下 ::before 和 ::after 的特性如果直接讲 CSS 作用在 div 上那么在做 rotate 的时候会将原本的 CSS 也进行修改 但是如果用 ::before 和 ::after 的话那么 ::before 和 ::after 上的 CSS 只会随着主 div 上的 css 进行修改本身变形 堆叠效果玩成后 Navbar 日常可能用得到思路比较巧妙的 navbar适用于个人项目或者特质化项目一般情况下 UI 库应该是会包括这个功能了 Navigation 2 同上 dropdown 实用性同其他的 UI 组件一样 有个比较有趣的特点就是这个 dropdown 的视线是二阶段的它的组成也是通过两部分实现第一个是白色的背景第二个才是下拉框的主题 动画的实现有几个要点 CSS 中dropdown 主体的高度从 0hover 时变为 auto 让 CSS 自动计算高度通过 JS 获取当前下拉框的长度并将下拉框的值赋给背景为了实现从有到左的淡入dropdown 的主题有一个 translateX() 的位移为了完成延迟渲染的效果dropdown 本体的 animation 需要有一个 delay 的操作 这样综合操作就能够完成先显示背景随后主题内容再滑入的一个特效 个人来说这样的实现有好有坏最大的问题就在于会有一个额外的 div 悬浮在空中 如果验货一方完全不懂技术这个还是可以操作的但是如果上一些 automated test 的话可能会有点问题 navigation 和其他的 nav 差不多适合个人/特质化项目 顺便提一下这里用到的挺有趣的一个特性就是 pointer-events: none这个 CSS 主要是可以管理鼠标时间比如说其实这些 div 都是存在的只不过 opacity 设置成了 1: 但是上面的动图很明显的可以看到鼠标经过原本图标所在的地方时背景变色的动画并没有被触发这实际上是因为子类所有的 pointer-events在没有 FOLLOW US 这段话没有被 hover 的时候是设置成 none也就是任何鼠标事件都不被触发。当 hover 事件触发后pointer-events 设置成了自动那么该元素的鼠标事件才会正常被触发。 这也是一个相对而言比较新但是以前没接触过的 CSS3 的知识点。 animated earth 不太常用这里亮暗地图用的是图片所以相似的案例反而找图会比较困难。其他方面CSS 本身不太复杂主要是几个比较少见的特性运用 clip-path https://bennettfeely.com/clippy/ 可以到上面这个网站研究一下想要的形状这是拖拽式的 box-shadow 这里主要同时应用了外部和内部的并且内部的 inset 是用了亮色形成了明暗对比 grid menu 完成布局后大概这样 特效 CSS grid 之前多多少少提过一些现在这里再复述一下。简单来说就是对于页面的 2D 规划grid 是有无与伦比的优势的。简单的三行代码就可以实现如下布局 display: grid; grid-template-columns: 2rem 1fr 2rem; grid-template-rows: 10rem 1fr 2rem;对于将内容放置于网格上的操作也很简单如我想将内容放置于中间最大的那块只需要选中对应的 div然后添加代码 grid-column: ²⁄₃; grid-row: ²⁄₃;就可以轻松实现效果 特效部分这里做的延迟主要就是应用两重 transition并且使用 delay 做延迟。 这里也做了 responsive基本上来说就是要把所有的布局都重写一遍如 最后写到一半突然注意到这个