橙子css特效-html代码-BFW代码库

橙子css特效

代码语言：html

所属分类：动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">


    <title>橙子css特效</title>
    <style>

        .center {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 10px;
            height: 10px;
            background: blue;
            z-index: 100;
            transform: translate(-50%, -50%);
        }

        .title {
            position: absolute;
            font-family: 'Major Mono Display', monospace;
            color: #ff9810;
            top: 16px;
            left: 16px;
            font-size: 22px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            word-spacing: -5px;
        }
        .title::before {
            content: '';
            position: absolute;
            top: 32px;
            opacity: 0.25;
            left: 0px;
            height: 3px;
            width: 87px;
            background: #ff9810;
        }

        .scene {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(ellipse atcenter,#a90329 0%, #8f0222 44%, #6d0019 100%);
        }

        .shadow {
            position: absolute;
            top: calc(60% + (200px/2) - (200px/7));
            left: calc(50% + 20px - (200px/2));
            width: 200px;
            height: 50px;
            background: radial-gradient(ellipse atcenter,rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 55%);
        }
        .shadow--2 {
            animation-delay: -180ms;
            width: 166.6666666667px;
            height: 41.6666666667;
            top: calc(60% + (200px/2) - (200px/7) - 50px);
            left: calc(50% + 20px - (200px/2) + 150px);
        }
        .shadow--3 {
            top: calc(60% + (200px/2) - (200px/7) - 30px);
            left: calc(50% + 20px - (200px/2) - 160px);
        }

        .dimple-holder {
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 100%;
        }

        .dimples {
            background: repeating-linear-gradient(0.25turn, transparent 0px, #ff9810 4px, #ff9810 10px), repeating-linear-gradient(transparent 0px, transparent.........完整代码请登录后点击上方下载按钮下载查看