css3效果大集合（1）

teren 发布于2019-08-30 15:44 / 265人阅读

摘要：背景渐变色效果标准的语法三角形效果圆环效果上下跳动加载效果代码文章链接

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;}

文章链接

服务器托管云服务器三级大集合 css3 css3气泡 css3动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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