zxuqian/html-css-examples

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

HTML CSS Examples

中文版

This repository contains the source code for my videos at Bilibili, 峰华前端工程师

Text in videos and codes are primarily in Chinese, But you can use this repository without knowing Chinese. Just read the critical part.

You can use this repository for inspirations and cheatsheets.

Online Demo： https://zxuqian.github.io/html-css-examples/

Each folder contains the source code of HTML and CSS examples, including:

• CSS/SVG Animation
• Shadows/Glowing/Glass Effects
• Responsive Layout
• Type-Writer Effect
• Face Recognition
• 3D Transformations
• Native Canvas
• and more...

My Personal Homepage

Blog

Bilibili

Or scan the QR code below:

Contributing

Contributing is welcome! Follow these steps to add your examples:

1. Fork this repository
2. Create a new branch, starting with feature/.
3. Structure your project according to the existing ones (note the latest numbering).
4. Run yarn run watch or npm run watch. This will monitor changes in src/index.js and compile it to /index.js, which is used to display React components for the demo page.
5. Update src/index.js. Add your example name and link at the top of the uis array, set newItem to true, and remove the newItem property from the previous item.
6. Test and issue a PR.
7. Please ensure examples are aethetically pleasing.

Notice: By contributing, you agree that your code may be used for demonstration in some of my videos.

html-css-examples's Issues

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); } }

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.

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;
}

Html

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

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

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

canvas {
    display: block;
}

然后滚动条就消失了。