CSS教程

css3 多种奇特效果

本文主要是介绍css3 多种奇特效果，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

 

 


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

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            font-size: 14px;
        }

        .box1,
        .box0{
            width: 60px;
            height: 60px;
            background: #fafafa;
            margin:200px 0 0 200px;
            box-shadow: 0 0 0 10px #E8E2D6, 0 0 0 20px #E1D9C9,
0 30px #D9CFBB, 0 0 0 40px #D2C6AE,
0 50px #CABCA0, 0 0 0 60px #C3B393,
0 70px #BBA985, 0 0 0 80px #B4A078;
        }
        .box0{
            margin:100px 0 0 200px;
            border-radius: 50%;
        }
        .box2{
            margin-top:100px;
            width: 200px;
            height: 120px;
            background: #efebe9;
            border: 5px solid #B4A078;
            outline: #B4A078 solid 3px;
            outline-offset: -10px;
            margin-bottom: 20px;;
        }

        .box3{
            margin-bottom: 10px;
            width: 100px;
            height: 50px;
            border-radius: 100px 100px 0 0;
            background: #000;
        }
        .box3-1{
            width: 100px;
            height: 50px;
            border-radius: 40px 0 40px 0;
            background: #000;
        }
        .box3-2{
            width: 100px;
            height: 100px;
            border-radius: 100px 0 100px 0;
            background: #000;
        }

        .box4 {
            width: 100%;
            padding: 80px 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        .box4 .progress-outer {
            width: 60%;
            height: 12px;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
        }
        .box4 .progress-enter {
            height: inherit;
            background: rgba(180, 160, 120, .2);
        }
        .box4 .progress-bg {
            width: 60%;
            height: inherit;
            border-radius: 6px;
            background: repeating-linear-gradient(-45deg, #D9CFBB  25%, #C3B393 0, #C3B393 50%, #D9CFBB 0, #D9CFBB 75%, #C3B393 0);
            background-size: 16px 16px;
            animation: panoramic 20s linear infinite;
        }
        @keyframes panoramic {
            to {
                background-position: 200% 0;
            }
        }
        .box5 {
            width: 289px; height: 289px;
            margin: 80px auto;
            font-size: 12px;
        }
        .box5 svg {
            overflow: visible;
            animation: circular-text-rotate 5s linear paused infinite;
        }
        .box5 svg:hover {
            animation-play-state: running;
        }
        .box5 path {
            fill: none;
        }
        .box5 text {
            fill: #b4a078;
        }
        @keyframes circular-text-rotate {
            to {
                transform: rotate(1turn);
            }
        }
        .box6 {
            width: 100%; height: 529px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .box6 .path {
            width: 300px; height: 300px;
            border-radius: 50%;
            margin: 100px auto;
            position: relative;
            display: flex;
            border: 1px solid #b4a078;
        }
        .box6 .logo {
            width: 52px;
            height: 52px;
            margin: auto;
            background: #000;
        }
        .box6 .avatar {
            width: 50px;
            position: absolute;
            top: 124px; left: 124px;
            animation: circular-smooth-spin 7.5s infinite linear;
            animation-play-state: running;
        }
        .box6 .avatar > span {
            font-weight: 500;
            position: absolute;
            white-space: nowrap;
            top: -50%; left: 50%;
            padding: 3px 12px;
            opacity: 0;
            transform: scale(0);
            transition: opacity, transform .8s;
            transform-origin: 0 bottom;
        }
        .box6 .avatar > div {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
            background: #000;
        }
        .box6 .path:hover .avatar {
            animation-play-state: paused;
        }

        .box6 .path:hover .avatar > span {
            opacity: 1;
            transform: scale(1);
            transition: opacity, transform .8s;
        }
        .box6 .avatar:nth-of-type(2){
            animation-delay: -1.5s;
        }

        .box6 .avatar:nth-of-type(3){
            animation-delay: -3s;
        }

        .box6 .avatar:nth-of-type(4){
            animation-delay: -4.5s;
        }

        .box6 .avatar:nth-of-type(5){
            animation-delay: -6s;
        }
        @keyframes circular-smooth-spin {
            from {
                transform: rotate(0turn) translateY(-124px) rotate(1turn)
            }
            to {
                opacity: 1;
                transform: rotate(1turn) translateY(-124px) rotate(0turn)
            }
        }


    </style>
</head>
<body>

<div class="box0"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box3-1"></div>
<div class="box3-2"></div>
<div class="box4">
    <div class="progress-outer">
        <div class="progress-enter">
            <div class="progress-bg"></div>
        </div>
        <!-- <span>60%</span> -->
    </div>
</div>
<div class="box5">
    <svg viewBox="0 0 100 100">
        <path d="M 0,50 a 50,50 0 1,1 0,1 z" id="circle" />
        <text>
            <textPath xlink:href="#circle">
                You-need-to-know-css-tricks-You-need-to-know-css-tricks-You-
            </textPath>
        </text>
    </svg>
</div>

<div class="box6">
    <div class="path">
        <div class="logo"></div>
        <div class="avatar">
            <span>Evan You</span>
            <div></div>
        </div>
        <div class="avatar">
            <span>Damian Dulisz</span>
            <div></div>
        </div>
        <div class="avatar">
            <span>defcc</span>
            <div></div>
        </div>
        <div class="avatar">
            <span>Edd Yerburgh</span>
            <div></div>
        </div>
        <div class="avatar">
            <span>Sarah Drasner</span>
            <div></div>
        </div>
    </div>
</div>
</body>
</html>
这篇关于css3 多种奇特效果的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航