zoukankan      html  css  js  c++  java
  • 会动的边框

    <!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>

  • 相关阅读:
    20200305 VMware虚拟机安装及centOS
    20200303 pandas
    20200302 数据分析之numpy以及Jupyter
    Bash(Terminal)高频命令
    E117: Unkown function: vundle#installer#new
    字符串输入之%s
    结合getchar()理解缓冲区
    在HEXO主题中添加站内搜索
    字符串的全排列
    无法启动程序,系统找不到指定的文件
  • 原文地址:https://www.cnblogs.com/wangruifang/p/5986192.html
Copyright © 2011-2022 走看看