炫彩漸層底圖效果

炫彩漸層底圖效果

按鈕底色為漸層並且有動態的效果

重點:

  1. transform: skewY(-10deg); //Y軸傾斜
    transform: skewY(10deg);
  2. box-shadow: 0 30px 10px rgba(0, 0, 0, 0.1),
            inset 0 0 20px rgba(0, 0, 0, 0.2); //內陰影

效果演示:

 

HTML:

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>炫彩漸層互動按鈕</title>
    <link rel="stylesheet" href="style.css">
</head>

<body id="dailycss_20200821">
    <a href="#">BUTTON</a>
</body>

</html>

 

CSS:

#dailycss_20200821 {
    background: #333;
}
#dailycss_20200821 a {
    width: 200px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    text-decoration: none;
    color: #fff;
    transform: translate(-50%, -50%);
    transition: 0.5s all ease;
    box-sizing: border-box;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #03a9f4);
    background-size: 200%;
    border-radius: 0px;
    animation: animate 1s linear infinite;
    -webkit-animation: animate 1s linear infinite;
}

@keyframes animate {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 200%;
    }
}

 

來源:




 迴響列表

關於我

在這個年代,個人網站的存在是非常難能可貴的。何況還是自己寫的,簡直就是人間的塊寶,世界的遺產。

Read More
艾吉碎碎唸

用wordpress架網站超級沒有成就感...

最新PO文
Go to Blog
Social Accounts