zxuqian/html-css-examples

A collection of HTML and CSS examples, including effects and UIs.

中文版

Hi there 👋

• 👨‍💻 Actively looking for jobs
• 💻 I'm a frontend developer and tutor
• 🌱 I wrote a book about JavaScript
• 🔭 I’m currently working on React Chat UI course
• 🤔 I’m looking for improving communication and public speaking skills
• 💬 Ask me about learning frontend development
• 📫 How to reach me: [email protected], zxuqian(wechat), Bilibili

html-css-examples's Issues

Using English language will be more relevant

hey, I think you should use English language and this will help us to understand and clarifying the codebase with more ease.

关于35-collision-physics，圆停止在圆上面这能实现吗

Circle.changeVelocityAndDirection函数可以更简单

代码如下：

changeVelocityAndDirection(other) {
    let velocity1 = new Vector(this.vx, this.vy);
    let velocity2 = new Vector(other.vx, other.vy);
    let cor = 0.8;

    let cdifn = new Vector(this.x - other.x, this.y - other.y).normalizs();
    let v1n = velocity1.dot(cdifn);
    let v2n = velocity2.dot(cdifn);
    let v1nAfter = (this.mass*v1n + other.mass*v2n + cor*other.mass*(v2n - v1n)) / (this.mass + other.mass);
    let v2nAfter = (this.mass*v1n + other.mass*v2n + cor*this.mass*(v1n - v2n)) / (this.mass + other.mass);

    if(v1nAfter < v2nAfter) {
        console.log(v1n, v2n, v1nAfter, v2nAfter);
        return;
    }

    let velocity1After = velocity1.add(cdifn.multiply(v1nAfter - v1n));
    let velocity2After = velocity2.add(cdifn.multiply(v2nAfter - v2n));

    this.vx = velocity1After.x;
    this.vy = velocity1After.y;

    other.vx = velocity2After.x;
    other.vy = velocity2After.y;
}

应该添加canvas的样式表，不然会出现滚动条，遮挡canvas画布。

因为canva的默认样式为display: inline;，所以应该在样式表中添加样式：

canvas {
    display: block;
}

然后滚动条就消失了。

Html

about 07-3d-cubic-images

只展示5个面，修改代码如下
@keyframes rotate-cube { 0% { transform: rotateX(0deg) rotateY(0deg); } 16.6% { transform: rotateY(-90deg); } 33.2% { transform: rotateX(-90deg); } 49.8% { transform: rotateY(90deg); } 66.4% { transform: rotateX(90deg); } /*这里需要展示后面*/ 83% { transform: rotateX(180deg); } 100% { transform: rotateX(0deg) rotateY(0deg); } }