css 记录

1. 设置icon图标使用字体方式,接着需要icon图标css类名前缀一致。

[class^="icon-"],
[class*=" icon-"] {}

ios 使用字体失效,在iconfont.css,将 font-family: 'font_family'; 修改为

@font-face {
  font-family: 'iconfont';
}




2. 变形动画 transform 执行动画时,希望有3d效果需要加上

perspective: 1800px;
(Tip:  定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。)

transform-style: preserve-3d;
(Tip:  3D 效果开启)

//父级
.a{
  perspective: 1800px;
}

//子级
.a .b{
  transform-style: preserve-3d;
  transition: transform 1s;
  transform: rotateY(-180deg);
} 





持续更新ing。。。

同伴与我同在,所以能战斗,所以能坚强,为了所要守护的人,赌上自己的一切!

5 声望
0 粉丝
0 条评论
推荐阅读
微信小程序 记录
一. 安装 npm。二. 自定义 底部 tab bar。小程序 自定义底部 tab bar三. 短视频模式 video-swiper。微信小程序 短视频模式 video-swiper四. 全局分享。app.js {代码...} Good luck。

夏哥阅读 755

还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.2k评论 2

封面图
CSS 如何设置自动滚动定位的“安全”间距?
欢迎关注我的公众号:前端侦探介绍两个和滚动定位相关的 CSS 属性:scroll-padding和 scroll-margin在平时开发中,经常会碰到需要快速定位的问题,比如常见的锚点定位 {代码...} 这样,在点击a标签时会自动定位到...

XboxYan30阅读 2.2k评论 2

封面图
CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan29阅读 3.5k评论 2

封面图
现代 CSS 之高阶图片渐隐消失术
在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样: {代码...} {代码...} 但是,CSS 的功能如此强大的今天。我们可以利用 CSS 实现的渐隐效果已经不再是如此的简单。想想看,...

chokcoco25阅读 2.1k

封面图
除了 filter 还有什么置灰网站的方式?
大家都知道,当一些重大事件发生的时候,我们的网站,可能需要置灰,像是这样:当然,通常而言,全站置灰是非常简单的事情,大部分前端同学都知道,仅仅需要使用一行 CSS,就能实现全站置灰的方式。像是这样,我...

chokcoco19阅读 1.6k评论 1

封面图
vue中style scope深度访问新方式(:deep())
1、>>>如果vue的style使用的是css,那么则 {代码...} 但是像scss等预处理器却无法解析>>>,所以我们使用下面的方式.2、/deep/ {代码...} 但是有些开发者反应,在vue-cli3编译时,deep的方式会...

寒水寺一禅11阅读 34.8k评论 9

同伴与我同在,所以能战斗,所以能坚强,为了所要守护的人,赌上自己的一切!

5 声望
0 粉丝
宣传栏