• 会动的边框


    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="UTF-8">
    <title>Call to action</title>
    <style type="text/css">
    @font-face {
    font-family: "open";
    font-style: normal;
    font-weight: 300;
    src: local("Open Sans Light"), local("OpenSans-Light"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTZ1r3JsPcQLi8jytr04NNhU.woff) format('woff');
    }
    *, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    html, body {
    padding: 0;
    margin: 0;
    100%;
    height: 100%;
    }
    a {
    display: block;
    margin: auto;
    margin-top: 50px;
    text-decoration: none;
    color: inherit;
    }
    @keyframes linear {
    from {
    background-position: 0 0;
    }
    to {
    background-position: 200px 0;
    }
    }
    @keyframes radial {
    from {
    background-position: 0 0;
    }
    to {
    background-position: 0 60px;
    }
    }
    @keyframes repeating {
    from {
    background-position: 0 0;
    }
    to {
    background-position: 0 85px;
    }
    }
    @keyframes electronic {
    0%, 100% {
    background-position: 20px -30px;
    }
    25% {
    background-position: 150px 5px;
    }
    50% {
    background-position: 20px 40px;
    }
    75% {
    background-position: -100px 5px;
    }
    }
    .biliboard {
    200px;
    padding: 20px;
    text-align: center;
    position: relative;
    background: #fff;
    color: #333;
    font: 13px open, tahoma;
    }
    .biliboard:before {
    content: '';
    display: block;
    height: 100%;
    100%;
    border-radius: 3px;
    transform: scale( 1.02, 1.08 );
    position: absolute;
    background: #f00;
    background: linear-gradient( 90deg, #fafafa, #fafafa, #1D8EF7, #fafafa, #fafafa );
    background-position: 55px 0;
    top: 0;
    animation: linear 1s infinite linear;
    left: 0;
    z-index: -1;
    }
    .biliboard.radial:before {
    background: radial-gradient( #fafafa, #fafafa, #F2A61A, #fafafa, #fafafa );
    animation: radial 1s infinite linear;
    }
    .biliboard.repeating:before {
    background: repeating-linear-gradient( -45deg, #fafafa, #fafafa 30px, #5FC914 30px, #5FC914 60px ) fixed;
    animation: repeating 1s infinite linear;
    }
    .biliboard.electronic:before {
    background: radial-gradient( #EA238D, #EA238D, #EA238D, #EA238D, #fafafa, #fafafa ) no-repeat;
    background-size: 150px 50px;
    animation: electronic 2s infinite linear;
    }
    </style>
    </head>
    <body>
    <a href="#" class="biliboard electronic">Get your free ebook</a>
    <a href="#" class="biliboard repeating">30% Off</a>
    <a href="#" class="biliboard">Click NOW!</a>
    <a href="#" class="biliboard radial">14-days Free trial</a>
    </body>
    <!-- <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> -->
    </html>

  • 相关阅读:
    MySQL运维案例分析:Binlog中的时间戳
    身边有位“别人家的程序员”是什么样的体验?
    苹果收取30%过路费_你是顶是踩?
    1019 数字黑洞 (20 分)C语言
    1015 德才论 (25 分)C语言
    1017 A除以B (20 分)C语言
    1014 福尔摩斯的约会 (20 分)
    求n以内最大的k个素数以及它们的和、数组元素循环右移问题、求最大值及其下标、将数组中的数逆序存放、矩阵运算
    1005 继续(3n+1)猜想 (25 分)
    爬动的蠕虫、二进制的前导的零、求组合数、Have Fun with Numbers、近似求PI
  • 原文地址:https://www.cnblogs.com/wangruifang/p/5986192.html
Copyright © 2020-2023  润新知