shirley5li / ife-2018-css Goto Github PK
View Code? Open in Web Editor NEW2018 IFE CSS动画学习总结
License: MIT License
2018 IFE CSS动画学习总结
License: MIT License
// 邮箱输入框失去焦点时,根据输入框中是否内容设置label的样式
email_input.onblur = function() {
var form_label_content = email_input.nextElementSibling.children[0];
if (email_input.value) {
form_label_content.style.transform = 'translateY(-15px)';
form_label_content.style.fontSize = '0.9em';
} else {
// reset
}
};
因为你把景深和透视属性放到一个元素中了,把景深比作镜头、透视比作一个苹果,你本来只是想转动苹果,但你现在带着镜头一起转了。
所以再加一层 DOM 把景深和透视分开就行了
<div class="container">
<div class="cube-box"> <!-- 加一层 -->
<div class="cubic">
<div class="front">font</div>
<div class="back">back</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
</div>
</div>
.container .cube-box {
/* 景深效果 */
perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
/* 更改下透视点的位置 */
perspective-origin: 50% 50%;
}
.container .cubic {
width: 500px;
height: 500px;
position: relative;
display: flex;
/* 使cubic中的6个div水平、垂直居中*/
justify-content: center;
align-items: center;
/* 子元素保持3D效果 */
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
}
没发现你通过 :target 实现中,translateY(350px) 导致的原因是什么。
但是这两个组合在一起才会出现问题。推测可能是浏览器 🐛 。
给你两个解决方法:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.