分享7款最新最炫酷的前端源码特效（附源码及演示效果）

分享7款还不错的前端特效源码 其中包含css动画特效、js原生特效、svg特效等 下面我会列出核心的代码 但你也可以点击预览获取查看该源码的最终展示效果及下载该源码资源

3D相机图标动画特效

CSS 3D相机图标旋转动画特效 一款非常炫酷逼真的相机效果动画

点击预览获取

核心代码

<main>
        <div class="camera" role="img" aria-label="White camera rotating left and right">
            <div class="camera__shadow"></div>
            <div class="camera__front"></div>
            <div class="camera__contents">
                <div class="camera__red-light"></div>
                <div class="camera__lens-shadow"></div>
                <div class="camera__lens-back"></div>
                <div class="camera__lens-ring">
                    <div class="camera__lens-ring-glare1"></div>
                    <div class="camera__lens-ring-glare2"></div>
                    <div class="camera__lens-ring-glare3"></div>
                </div>
                <div class="camera__lens-inner">
                    <div class="camera__lens-inner-glare1"></div>
                    <div class="camera__lens-inner-glare2"></div>
                    <div class="camera__lens-eye-shadow"></div>
                    <div class="camera__lens-glare"></div>
                    <div class="camera__lens-eye">
                        <div class="camera__lens-eye-ring"></div>
                        <div class="camera__lens-eye-inner-glare"></div>
                        <div class="camera__lens-eye-center">
                            <div class="camera__lens-eye-center-glare"></div>
                        </div>
                        <div class="camera__lens-eye-glass-color"></div>
                        <div class="camera__lens-eye-glare"></div>
                        <div class="camera__lens-eye-glass"></div>
                    </div>
                </div>
            </div>
        </div>
    </main>

苹果键盘UI特效

苹果键盘UI特效 可以让你达到点击苹果键盘的cv键的效果 非常的逼真

点击预览获取

核心代码

<div class="keyboard">
        <button class="keyboard__key keyboard__key--meta" type="button" data-key="cmd">
            <span class="keyboard__key-lines">
                <svg class="keyboard__cmd keyboard__key-line--tr" viewBox="0 0 16 16" width="16px" height="16px"
                    aria-hidden="true">
                    <path fill="none" stroke="currentcolor" stroke-width="2"
                        d="" />
                </svg>
                <small class="keyboard__key-line keyboard__key-line--small keyboard__key-line--br">command</small>
            </span>
        </button>
        <button class="keyboard__key" type="button" data-key="c">
            <span class="keyboard__key-lines">
                <span class="keyboard__key-line">C</span>
            </span>
        </button>
        <button class="keyboard__key" type="button" data-key="v">
            <span class="keyboard__key-lines">
                <span class="keyboard__key-line">V</span>
            </span>
        </button>
    </div>

删除按钮动画

一个动画删除按钮，字母直接飞进垃圾桶！

点击预览获取

核心代码

<button id="delete" class="del-btn" type="button" aria-label="Delete">
        <svg class="del-btn__icon" viewBox="0 0 48 48" width="48px" height="48px" aria-hidden="true">
            <clipPath id="can-clip">
                <rect class="del-btn__icon-can-fill" x="5" y="24" width="14" height="11" />
            </clipPath>
            <g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                transform="translate(12,12)">
                <g class="del-btn__icon-lid">
                    <polyline points="9,5 9,1 15,1 15,5" />
                    <polyline points="4,5 20,5" />
                </g>
                <g class="del-btn__icon-can">
                    <g stroke-width="0">
                        <polyline id="can-fill" points="6,10 7,23 17,23 18,10" />
                        <use clip-path="url(#can-clip)" href="#can-fill" fill="#fff" />
                    </g>
                    <polyline points="6,10 7,23 17,23 18,10" />
                </g>
            </g>
        </svg>
        <span class="del-btn__letters" aria-hidden="true" data-anim>
            <span class="del-btn__letter-box">
                <span class="del-btn__letter">D</span>
            </span>
            <span class="del-btn__letter-box">
                <span class="del-btn__letter">e</span>
            </span>
            <span class="del-btn__letter-box">
                <span class="del-btn__letter">l</span>
            </span>
            <span class="del-btn__letter-box">
                <span class="del-btn__letter">e</span>
            </span>
            <span class="del-btn__letter-box">
                <span class="del-btn__letter">t</span>
            </span>
            <span class="del-btn__letter-box">
                <span class="del-btn__letter">e</span>
            </span>
        </span>
    </button>

卡片悬停交互动画

鼠标移入卡片内 会显示相关内容的交互动画特效 也是非常常见及使用的一种交互特效

点击预览获取

核心代码

 <figure class="card card--4" style="--image-src: url('./image/1.png')">
            <figcaption>
                <span class="info">
                    <h3>The Ocean</h3>
                    <span>by Dan Stark</span>
                </span>
                <span class="links">
                    <a href="#"><i class="fas fa-heart"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fas fa-share"></i></a>
                </span>
            </figcaption>
        </figure>

CSS发光按钮特效

CSS发光按钮特效是一款简约的按钮特效 初始时会有一个绕按钮旋转的小圆点 当鼠标移入后 会给按钮添加星空的背景色

点击预览获取

核心代码

<button>
            <span class="spark"></span>
            <span class="backdrop"></span>
            <span class="galaxy__container">
                <span class="star star--static"></span>
                <span class="star star--static"></span>
                <span class="star star--static"></span>
                <span class="star star--static"></span>
            </span>
            <span class="galaxy">
                <span class="galaxy__ring">
                    <span class="star"></span>
                    <span class="star"></span>
                    <span class="star"></span>
                    <span class="star"></span>
                    <span class="star"></span>
                    <span class="star"></span>
                    <span class="star"></span>
                    <span class="star"></span>
                    <span class="star"></span>
                    <span class="star"></span>
                    <span class="star"></span>
                    <span class="star"></span>
                    <span class="star"></span>
                    <span class="star"></span>
                    <span class="star"></span>
                    <span class="star"></span>
                    <span class="star"></span>
                    <span class="star"></span>
                    <span class="star"></span>
                    <span class="star"></span>
                </span>
            </span>
            <span class="text">Explore</span>
        </button>

CSS旋钮小部件

带有范围滑块的CSS旋钮小部件

点击预览获取

核心代码

<input class="knob" type="range" step="10" value="60" min="0" max="100">
    <script>
        const input = document.querySelector("input[type='range']");
        for (const event of ["input", "change"])
            input.addEventListener(event, (e) => update(e.target));

        function update(input) {
            for (const data of ["min", "max", "value"])
                if (input[data]) input.style.setProperty(`--${data}`, input[data]);
        }

        update(input);

    </script>

卡片渐变旋转动画特效

非常有创意性的一款卡片渐变旋转动画特效 该特效会将渐变色呈圆锥型旋转运动

点击预览获取

核心代码

 <div class="card">
        <h2>JavaScript<span>Fundamental</span></h2>
        <div>Learn More</div>
    </div>

以上就是本期源码分享的所有内容 更多源码可点击主页查看更多相关特效文章 点赞收藏不迷路