css实现文字带阴影三维跳动动画效果代码-html代码-BFW代码库

css实现文字带阴影三维跳动动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现文字带阴影三维跳动动画效果代码

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

<html>
<head>
    <style>
@import url(https://fonts.googleapis.com/css?family=Titan+One);
        /* BODY */
        body {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background-color: skyblue;
            background-image: -webkit-linear-gradient(90deg, skyblue 0%, steelblue 100%);
            background-attachment: fixed;
            background-size: 100% 100%;
            overflow: hidden;

            -webkit-font-smoothing: antialiased;
        }
        ::selection {
            background: transparent;
        }
        /* CLOUDS */
        body:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            width: 0;
            height: 0;
            margin: auto;
            border-radius: 100%;
            background: transparent;
            display: block;

            box-shadow: 0 0 150px 100px rgba(255, 255, 255, .6),
            200px 0 200px 150px rgba(255, 255, 255, .6),
            -250px 0 300px 150px rgba(255, 255, 255, .6),
            550px 0 300px 200px rgba(255, 255, 255, .6),
            -550px 0 300px 200px rgba(255, 255, 255, .6);
        }
        /* JUMP */
        h1 {
            cursor: default;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100px;
            margin: auto;
            display: block;

            text-align: center;
        }
        h1 span {
            position: relative;
            top: 20px;
            display: inline-block;

            -webkit-animation: bounce .3s ease infinite alternate;

            .........完整代码请登录后点击上方下载按钮下载查看