橙子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));
  .........完整代码请登录后点击上方下载按钮下载查看

网友评论0