标签 CSS 下的文章 - 易航博客
首页
统计
友链
4K壁纸
留言板
关于
推荐
百度一下: 易航博客
搜 索
1
Joe主题再续前缘版 - 本站同款
5,878 阅读
2
易航网址引导系统
3,131 阅读
3
Js自动播放HTML音乐(不受浏览器限制,无需先与浏览器交互,无需对浏览器进行修改)
2,008 阅读
4
六个好看实用的HTML登录界面源码
1,774 阅读
5
V免签全开源免签约码支付系统(支持:支付宝 微信 QQ)
716 阅读
源码大全
PHP源码
HTML模板
Java源码
小程序源码
热门程序
Typecho
ThinkPHP
Joe主题
技术教程
HTML教程
PHP教程
CSS教程
JS教程
MySQL教程
SEO教程
正则表达式教程
网络技术
话题讨论
PHP话题
书虫小说
剑来
雪中悍刀行
值得一看
媒体新闻
人生语录
热门事件
活动线报
经验分享
关于我们
站点公告
其他文章
登录
/
注册
搜 索
标签搜索
网站源码
PHP
PHP教程
PHP源码
PHP函数方法
JavaScript
HTML模板
HTML
Joe主题
网站模板
Typecho
ThinkPHP
PHP网络请求
支付系统
通信协议
码支付
API接口
Typecho插件
PHP发送数据
网络攻击
易航
累计撰写
90
篇文章
累计收到
925
条评论
首页
栏目
源码大全
PHP源码
HTML模板
Java源码
小程序源码
热门程序
Typecho
ThinkPHP
Joe主题
技术教程
HTML教程
PHP教程
CSS教程
JS教程
MySQL教程
SEO教程
正则表达式教程
网络技术
话题讨论
PHP话题
书虫小说
剑来
雪中悍刀行
值得一看
媒体新闻
人生语录
热门事件
活动线报
经验分享
关于我们
站点公告
其他文章
页面
统计
友链
4K壁纸
留言板
关于
推荐
百度一下: 易航博客
用户登录
登录
注册
找到
2
篇与
CSS
相关的结果
2022-12-09
网站添加Loading加载动画
Loading动画作用网站添加Loading动画可有效防止部分浏览器打开网页后因为有些静态资源还没有加载完毕导致的闪屏、白屏、花屏、错误排版等BUG效果展示![Loading动画]()Loading动画代码HTML是从上至下解析,所以添加到哪里合适应该知道了吧 location.href='http://bri6.cn/archives/143.html'
2022年12月09日
280 阅读
5 评论
10 点赞
2022-07-08
三个令人期待的CSS特性即将推出!
大家好,我是易航,今天给大家总结分享一下很 🐂🍺 的3个即将推出的 CSS 属性,等你看完,每一个都要喊:绝了!声明一下:这些特性现在基本都不好使,就算有的高级浏览器支持了,也只是个例。可以期待一下以后 ~一、@container@container 是一个容器查询方法,正如它的名字一样,它是用来支持根据当前元素所在容器的大小来进行动态修改添加样式的,这跟 @media 基于视口大小是不一样的。来举个🌰先创建一个侧边栏和一个主内容<body> <aside class="sidebar"> <div class="card"> <h4>侧边栏</h4> <p> To the world you may be one person, but to one person you may be the world. </p> </div> </aside> <main class="content"> <div class="card"> <h4>主内容</h4> <p> To the world you may be one person, but to one person you may be the world. </p> </div> </main> </body>让这两个元素横向布局,且侧边栏宽度占 30% ,主内容宽度占 70%body { display: flex; color: white; } h4 { color: black; } .sidebar { width: 30%; } .content { width: 70%; background: #f0f5f9; /* 给个底色,与侧边栏区分 */ } .card { background: lightpink; box-shadow: 3px 10px 20px rgba(0, 0, 0, 0.2); border-radius: 8px; }目前为止是这样的效果:现在我们发现主内容这块儿空间很富余,便想改变一下标题和内容文字的布局,此时就可以用上 @container 了,直接让主内容在当前容器宽度大于 400px 时变成横向布局@container (min-width: 400px) { .content .card { display: flex; } }此时效果如下:是不是很酷 😎基于这点,还想到了一个之前我做过的需求中很头疼的需求,就是字体大小随着容器宽高的改变而动态改变,如果支持了这个特性,那这个需求也就很简单了二、object-view-boxobject-view-box 属性就类似于 SVG 中的 viewBox 属性。它允许您使用一行 CSS 来平移、缩放、裁剪 图像。我们就对这张图来动动刀子加一行代码.crop { object-view-box: inset(10% 50% 35% 5%); }实现的效果就是这样:跟原图对比一下就是这样:除了简单的裁剪,我们还能基于它实现一些好玩的效果,例如:三、animation-timelineanimation-timeline 相比前两个就更好玩了!它允许我们基于容器滚动的进度来对动画进行处理,简而言之就是页面滚动了百分之多少,动画就执行百分之多少。而且动画也能根据页面倒着滚动而倒着播放 .shoes { animation-name: Rotate; animation-duration: 1s; animation-timeline: scrollTimeline; } @scroll-timeline scrollTimeline { source: selector('#container'); orientation: "vertical"; } @keyframes Rotate { from { transform: translate(-200px, -200px) rotate(0deg); } to { transform: translate(100vw, 100vh) rotate(720deg); } }使用起来很简单,就是在本身的基础动画上,新增一个 animation-timeline 属性即可,我们也可以对这个 timeline 定义是基于哪个容器,滚动方向是水平还是竖直大致效果就是:最后这三个 CSS 新特性,你们最喜欢哪个?有没有想到一些比较实用的场景,欢迎在评论区分享~
2022年07月08日
38 阅读
0 评论
1 点赞