css3效果大集合（1）

teren 發布于2019-08-30 15:44 / 481人閱讀

摘要：背景漸變色效果標準的語法三角形效果圓環效果上下跳動加載效果代碼文章鏈接

1、背景漸變色效果

.main{
        background: -webkit-linear-gradient(#a18cd1, #fbc2eb); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(#a18cd1, #fbc2eb); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(#a18cd1, #fbc2eb); /* Firefox 3.6 - 15 */
        background: linear-gradient(#a18cd1, #fbc2eb); /* 標準的語法 */  
      }

2、三角形效果

.main{
        width:0px;height:0px;
        border-right:50px solid  rgba(0,0,0,0);
        border-bottom:50px solid #fbc2eb;
        border-left:50px solid  rgba(0,0,0,0);
      }

3、圓環效果

.main{
        width: 100px;
        height: 100px;
        background-color: #fbc2eb;
        border-radius: 50%;
      }
.main:after{
        content: " ";
        display: block;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #fff;
        position: relative;
        top: 25px;
        left: 25px;
      }

4、div上下跳動

@keyframes tips{
          25% {transform: translateY(-3px);}
          50%{transform: translateY(0);}
          75% {transform: translateY(3px);}
          100% {transform: translateY(0);}
      }
.main{
        width: 50px;
        height: 50px;
        background: #fbc2eb;
        -webkit-animation: tips 1s linear infinite;
        animation: tips 1s linear infinite;
      }

5、加載loading效果

.load{width: 100px;height: 100px;position: relative;margin: 0 auto;margin-top:100px;}
.load span{display: inline-block;width: 17px;height: 17px;border-radius: 50%;background: #fbc2eb;position: absolute;-webkit-animation: load 1.04s ease infinite;}
@-webkit-keyframes load{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0.2;
    }
}
.load span:nth-child(1){left: 0;top: 50%;margin-top:-8px;-webkit-animation-delay:0.13s;}
.load span:nth-child(2){left: 15px;top: 15px;-webkit-animation-delay:0.26s;}
.load span:nth-child(3){left: 50%;top: 0;margin-left: -8px;-webkit-animation-delay:0.39s;}
.load span:nth-child(4){top: 15px;right:15px;-webkit-animation-delay:0.52s;}
.load span:nth-child(5){right: 0;top: 50%;margin-top:-8px;-webkit-animation-delay:0.65s;}
.load span:nth-child(6){right: 15px;bottom:15px;-webkit-animation-delay:0.78s;}
.load span:nth-child(7){bottom: 0;left: 50%;margin-left: -8px;-webkit-animation-delay:0.91s;}
.load span:nth-child(8){bottom: 15px;left: 15px;-webkit-animation-delay:1.04s;}

文章鏈接

云服務器 GPU云服務器三級大集合 css3 css3氣泡 css3動畫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116290.html

世界這么大，你的那一個他肯定會出現，Python表白代碼大集合(附上源碼）

摘要：本文將利用畫多種不同的表白圖，附上源碼，表白代碼看這一篇文章就夠啦，總有你喜歡的，喜歡的話別忘記三連了。本文將利用Python畫多種不同的表白圖，附上源碼，表白代...

JellyBool 2021-09-06 15:02 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

netmou 2019-08-23 12:28 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

Hydrogen 2019-08-02 11:46 評論0 收藏0
javascript功能插件大集合，寫前端的親們記得收藏

摘要：一個專注于瀏覽器端和兼容的包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。完全插件化的工具，能在中識別和記錄模式。健壯的優雅且功能豐富的模板引擎。完整的經過充分測試和記錄數據結構的庫。【導讀】：GitHub 上有一個 Awesome – XXX 系列的資源整理。awesome-javascript 是 sorrycc 發起維護的 JS 資源列表...

cfanr 2019-08-20 10:34 評論0 收藏0