110CSS3效果：多效果组合

CSS3特效与动画实战

最新推荐文章于 2019-06-03 14:11:00 发布

转载最新推荐文章于 2019-06-03 14:11:00 发布 · 91 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gushixianqiancheng/p/10967267.html

本文详细介绍了一种利用CSS3实现的动态效果案例，包括渐变背景、定位、全屏显示、点击链接触发动画、元素变形及阴影效果。通过HTML与CSS结合，演示了五帧不同的视觉效果，每帧背景采用重复径向渐变，文字效果各异，并通过目标选择器实现动画切换。

本实例包含渐变、定位、全屏、点击链接、变形、动画、镂空字、阴影字等CSS3效果；在实际运用中可以将div换成图片。**html 代码**

```html:run
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0
        }
        html,body{
            height: 100%;
        }
        .wrap{
            width:100%;
            height:100%;
            position: relative;
            overflow: hidden;
        }
        .div1,.div2,.div3,.div4,.div5{
            width:100%;
            height:100%;
            position: absolute;
            top:0;
            left:0;
            z-index: 10;
            font-size:300px;
            text-align: center;
            line-height: 600px;
            -webkit-text-stroke: 2px blue;
            color: transparent;
        }
        .div1{
            background: repeating-radial-gradient(300px 100px at center,black 50%,white);
        }
        .div2{
            background: repeating-radial-gradient(300px 100px at center,red 50%,green);
        }
        .div3{
            background: repeating-radial-gradient(300px 100px at center,blue 50%,yellow);
        }
        .div4{
            background: repeating-radial-gradient(300px 100px at center,grey 50%,brown);
        }
        .div5{
            background: repeating-radial-gradient(300px 100px at center,purple 50%,pink);
            color: blue;
            text-shadow:9px 9px 9px orange,3px 3px 3px red,5px 5px 5px green,7px 7px 7px grey;
        }
        .total{
            position: absolute;
            bottom:10px;
            z-index: 1000;
            right:0;
            width: 100%;
            text-align: center;
        }
        .total a{
            position: relative;
            display: inline-block;
            width:100px;
            height:100px;
            border-radius:50%;
            overflow: hidden;
            border: 10px solid rgba(255,255,255,0.5);
        }
        .wrap :target{
            z-index: 100;
        }

        #bg1:target{
            animation:div1 1s;
        }
        @keyframes div1 {
            0%{
                transform: translateX(-600px);
            }
            100%{
                transform: translateX(0px);
            }
        }
        #bg2:target{
            animation:div2 1s;
        }
        @keyframes div2 {
            0%{
                transform: rotateY(360deg);
            }
            100%{
                transform: rotateY(0deg);
            }
        }
        #bg3:target{
            animation:div3 1s;
        }
        @keyframes div3 {
            0%{
                transform: scaleX(0.2);
            }
            100%{
                transform: scaleX(1);
            }
        }
        #bg4:target{
            animation:div4 1s;
        }
        @keyframes div4 {
            0%{
                transform:skewX(180deg);
            }
            100%{
                transform: skewX(0);
            }
        }
        #bg5:target{
            animation:div5 1s;
        }
        @keyframes div5 {
            0%{
                transform: scaleY(0.1) rotateY(0deg);
            }
            100%{
                transform: scaleY(1) rotateY(360deg);
            }
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="div1" id="bg1">第1帧</div>
    <div class="div2" id="bg2">第2帧</div>
    <div class="div3" id="bg3">第3帧</div>
    <div class="div4" id="bg4">第4帧</div>
    <div class="div5" id="bg5">第5帧</div>
    <div class="total">
        <a href="#bg1"><div class="div1"></div></a>
        <a href="#bg2"><div class="div2"></div></a>
        <a href="#bg3"><div class="div3"></div></a>
        <a href="#bg4"><div class="div4"></div></a>
        <a href="#bg5"><div class="div5"></div></a>
    </div>
</div>

</body>
</html>
```

转载于:https://www.cnblogs.com/gushixianqiancheng/p/10967267.html