还在为酷炫css动画背景头疼吗?1分钟解决

简介: 还在为酷炫css动画背景头疼吗?1分钟解决

效果




完整代码


HTML部分

<div id="tsparticles"></div>
        <section>
            <div class="content">
                <h1>Let's Travel The World Together!</h1>
                <p>
                    Our tours are designed to transport you to the heart of the world's
                    most captivating destinations, creating memories that will last a
                    lifetime. You can uncover the hidden gems, iconic landmarks, and
                    unique cultural treasures that make each destination special.
                </p>
                <button>Explore Tours</button>
            </div>
        </section>

CSS部分

*,
        *::before,
        *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Nunito", sans-serif;
        }
        body {
            background-image: radial-gradient(circle at 20% 100%,
                    rgba(184, 184, 184, 0.1) 0%,
                    rgba(184, 184, 184, 0.1) 33%,
                    rgba(96, 96, 96, 0.1) 33%,
                    rgba(96, 96, 96, 0.1) 66%,
                    rgba(7, 7, 7, 0.1) 66%,
                    rgba(7, 7, 7, 0.1) 99%),
                linear-gradient(40deg, #040a22, #162561, #202e64, #6f7aa6);
            background-repeat: no-repeat;
            background-size: cover;
        }
        section {
            display: grid;
            grid-template-columns: 50% 45%;
            place-items: center;
            gap: 60px;
            min-height: 100vh;
            padding: 20px 60px;
        }
        /* CONTENT */
        .content {
            max-width: 2400px;
        }
        .content h1 {
            font-family: "Comfortaa", sans-serif;
            font-size: clamp(2rem, 4vw, 3.5rem);
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: 1px;
            margin-bottom: 36px;
            color: #fff;
        }
        .content p {
            font-size: clamp(1rem, 4vw, 1.1rem);
            font-weight: 300;
            line-height: 1.5;
            margin-bottom: 30px;
            color: #fff;
        }
        .content button {
            background: #eaeaea;
            color: #202134;
            font-size: clamp(0.9rem, 4vw, 1rem);
            font-weight: 600;
            border: 0;
            outline: 0;
            padding: 8px 14px;
            border-radius: 7px;
            transform: scale(1);
            transition: all 0.4s ease-in;
            cursor: pointer;
        }
        .content button:is(:hover, :focus) {
            transform: scale(0.98);
            background-color: #6f7aa6;
            color: #eaeaea;
        }
        @media (max-width: 1050px) {
            .swiper {
                width: 350px;
                height: 450px;
            }
        }
        @media (max-width: 930px) {
            section {
                grid-template-columns: 100%;
                grid-template-rows: 55% 40%;
                grid-template-areas:
                    "slider"
                    "content";
                place-items: center;
                gap: 64px;
                padding: 60px;
            }
            .swiper {
                grid-area: slider;
            }
            .content {
                grid-area: content;
                text-align: center;
            }
            .content h1 {
                margin-bottom: 20px;
            }
        }
        @media (max-width: 470px) {
            section {
                padding: 40px 40px 60px;
            }
            .swiper {
                width: 300px;
                height: 400px;
            }
        }

Js

<script src="https://cdn.jsdelivr.net/npm/tsparticles@1.26.0/dist/tsparticles.min.js"></script>
    <script>
        tsParticles.load("tsparticles", {
            fpsLimit: 60,
            backgroundMode: {
                enable: true,
                zIndex: -1,
            },
            particles: {
                number: {
                    value: 30,
                    density: {
                        enable: true,
                        area: 800,
                    },
                },
                color: {
                    value: [
                        "#3998D0",
                        "#2EB6AF",
                        "#A9BD33",
                        "#FEC73B",
                        "#F89930",
                        "#F45623",
                        "#D62E32",
                    ],
                },
                destroy: {
                    mode: "split",
                    split: {
                        count: 1,
                        factor: {
                            value: 5,
                            random: {
                                enable: true,
                                minimumValue: 4,
                            },
                        },
                        rate: {
                            value: 10,
                            random: {
                                enable: true,
                                minimumValue: 5,
                            },
                        },
                        particles: {
                            collisions: {
                                enable: false,
                            },
                            destroy: {
                                mode: "none",
                            },
                            life: {
                                count: 1,
                                duration: {
                                    value: 1,
                                },
                            },
                        },
                    },
                },
                shape: {
                    type: "circle",
                    stroke: {
                        width: 0,
                        color: "#000000",
                    },
                    polygon: {
                        sides: 5,
                    },
                },
                opacity: {
                    value: 1,
                    random: false,
                    animation: {
                        enable: false,
                        speed: 1,
                        minimumValue: 0.1,
                        sync: false,
                    },
                },
                size: {
                    value: 8,
                    random: {
                        enable: true,
                        minimumValue: 4,
                    },
                    animation: {
                        enable: false,
                        speed: 40,
                        minimumValue: 0.1,
                        sync: false,
                    },
                },
                collisions: {
                    enable: true,
                    mode: "destroy",
                },
                move: {
                    enable: true,
                    speed: 7,
                    direction: "none",
                    random: false,
                    straight: false,
                    out_mode: "out",
                    attract: {
                        enable: false,
                        rotateX: 600,
                        rotateY: 1200,
                    },
                },
            },
            detectRetina: true,
        });
    </script>
相关文章
|
4天前
|
前端开发 JavaScript
CSS 过渡和动画
CSS过渡和动画是用于为网页元素添加动态效果的两种重要技术
73 42
|
27天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
64 34
|
4月前
|
机器学习/深度学习 前端开发 JavaScript
|
1月前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
50 22
|
3月前
|
移动开发 前端开发 JavaScript
除了 CSS3,还有哪些技术可以实现动画效果?
除了 CSS3,还有哪些技术可以实现动画效果?
155 63
|
3月前
|
Web App开发 前端开发 JavaScript
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
147 58
|
3月前
纯css3实现的百分比渐变进度条加载动画源码
纯css3实现的百分比渐变进度条加载动画特效源码
70 31
|
4月前
|
前端开发 搜索推荐 UED
实现 CSS 动画效果的兼容性
【10月更文挑战第16天】实现 CSS 动画效果的兼容性需要对不同浏览器的特性有深入的了解,并采取适当的策略和方法。通过不断的实践和优化,你可以在各种浏览器上创造出流畅、美观且兼容的动画效果,为用户带来更好的体验。在实际开发中,要密切关注浏览器的发展动态,及时掌握最新的兼容性技巧和解决方案,以确保你的动画设计能够在广泛的用户群体中得到良好的呈现。
134 58
|
2月前
|
Web App开发 移动开发 JavaScript
纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
这是一款基于纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码。画面中左下角是一个圆锥形礼炮卡通效果,呈现出节日庆祝时礼花爆破、五彩纸屑纷飞的动画特效。整体动画效果采用纯css3+svg实现,没有引入任何外部图形或js脚本元素。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
64 6
|
3月前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
90 7

热门文章

最新文章