CSS3特效

一些纯CSS3的特效

图片中的一些边框线请忽略！

1.      首先是渐变，下面一个例子。

当鼠标点击的时候文字出现阴影。

代码如下：

<style>

   .font-c{color:#fa9608; font-weight:bold;}

.btn{padding:10px 15px ;  FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=red);

     background:-ms-linear-gradient:(top,#cf72ff,  #7822ff);   /*IE10*/

        background:-moz-linear-gradient(top,#cf72ff,  #7822ff);   /*火狐*/

     background:-webkit-gradient(linear , 0% 0%, 0% 100%, from(#cf72ff),to(#7822ff));

        background:-webkit-linear-gradient(top,#cf72ff,#7822ff);

        background:-o-linear-gradient(top,#cf72ff,#7822ff);

        color:white;

        border:1px solid #5716be;

        border-radius:3px;

        -moz-border-radius:3px;

        -webkit-border-radius:3px;

        }

.btn:hover{ color:#03fced; text-shadow:0 -8px  1px  #f8fac4;          

                }

 

 

 

</style>

 

 

 

 

 

<p>css样式实现多种特效，代替一些图片。<p>

       <p>下面首先实现的是<span>渐变特效</span>，

点击之时还会出现<span>文字阴影效果</span></p>

      <div ><a>点击按钮</a></div>

2.三角形的实现

代码如下：

<style>

.sanjiao{ margin-top:20px;}             

.angle_top{ display:inline-block; width:0; height:0 ; border:20px solid transparent; border-top-color:#4a5ed7; margin-right:20px;}

.angle_bottom{display:inline-block; width:0; height:0 ; border:20px solid transparent; border-bottom-color:#bcaf23; margin-right:20px;}

.angle_left{display:inline-block; width:0; height:0 ; border:20px solid transparent; border-left-color:#23bc8c; margin-right:20px;}

.angle_right{display:inline-block; width:0; height:0 ; border:20px solid transparent; border-right-color:#bc238c; margin-right:20px;}

 

</style>

 

 

<p>下面实现<span class="font-c">三角形</span></p>

 <div class="sanjiao">

 <div class="angle_top"></div>

 <div class="angle_bottom"></div>

 <div class="angle_left"></div>

 <div class="angle_right"></div>

  </div>

 

3.实现一些箭头的特效

代码如下：

<style>

.block1{margin:20px 50px; display:inline-block;}

.jiantou{display:inline-block;position:relative; height:30px; width:100px; background-color:#9adb28;}

.jiao{position:absolute; height:0; width:0; border:35px solid transparent;border-left-color:#9adb28; left:100px ; bottom:-20px;}

 

.jiantou1{display:inline-block; position:relative;height:30px; width:100px; background-color:#2857db;}

.jiao1{ position:absolute;height:0; width:0; border:35px solid transparent;border-right-color:#2857db;right:100px ; bottom:-20px;}

 

.jiantou2{display:inline-block; position:relative;height:100px; width:30px; background-color:#ed903e;}

.jiao2{ position:absolute;height:0; width:0; border:35px solid transparent;border-bottom-color:#ed903e;right:-20px ; bottom:100px;}

 

.jiantou3{display:inline-block; position:relative;height:100px; width:30px; background-color:#ec86fb;}

.jiao3{ position:absolute;height:0; width:0; border:35px solid transparent;border-top-color:#ec86fb;right:-20px ; top:100px;}

 

 

</style>

 

 

<p>下面实现<span class="font-c">箭头</span>的效果</p>

  <div class="block1">

  <div class="jiantou">

 <div class="jiao"></div>

  </div>

  </div>

      <div  class="block1">

  <div class="jiantou1">

 <div class="jiao1"></div>   

  </div>

 </div>

 <div  class="block1">

  <div class="jiantou2">

 <div class="jiao2"></div>   

  </div>

 </div>

      <div  class="block1">

  <div class="jiantou3">

 <div class="jiao3"></div>   

  </div>

 </div>

  

4.下面实现一些圆的特效以及扁平化头像

鼠标点击的时候最后一个方块会出现半透明块

代码如下：

<sctyle>

 .circle{margin-top:20px;width:100px; height:100px; border-radius:50px; background-color:#624099;display:inline-block;}

.jingjb{margin:20px 0 20px 20px; border-top-left-radius:50px; border-top-right-radius:50px;width:100px; height:50px;background-color:#624099;

        display:inline-block;}

.block2{display:inline-block; width:100px; height:100px;border-radius:50px; border:4px solid #21c893; position:relative;}

.c1{position:absolute;width:36px; height:36px;border-radius:18px; background-color:#d8d8d8; left:32px; top:10px;}

.c2{position:absolute;width:60px; height:30px;border-top-left-radius:30px;border-top-right-radius:30px; background-color:#d8d8d8;  top:50px;left:20px;}

 

.jb{display:inline-block; margin:20px; width:100px; height:100px; border-radius:50px;

     FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=red);

     background-image: -webkit-radial-gradient(circle,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));

     background-image: radial-gradient(circle,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));

        }

.jb1{display:inline-block; margin:20px; width:100px; height:100px; border-radius:50px;

     FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=red);

     background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1))); /* Chrome,Safari4+ */  

     background:-ms-radial-gradient:(top,#cf72ff,  #7822ff);   /*IE10*/

        background:-moz-radial-gradient(top,#cf72ff,  #7822ff);   /*火狐*/

        background:-webkit-gradient(radial , 0% 0%, 0% 100%, from(#cf72ff),to(#7822ff));

        background:-webkit-radial-gradient(top,#cf72ff,#7822ff);

        background:-o-radial-gradient(top,#cf72ff,#7822ff);}

.jb2{display:inline-block; margin:20px; width:100px; height:100px; border-radius:50px;

     FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=red);

     background:-moz-radial-gradient(center,#c600ff,#00ffd2);

        background:-webkit-radial-gradient(center ,#c600ff,#00ffd2);

        background:-o-radial-gradient(center ,#c600ff,#00ffd2);

       background:-radial-gradient(center ,#c600ff,#00ffd2)

        }

.tmd{ width:180px; height:150px;display:inline-block;position:relative; background-color:#9aa70c;}

.kuai{width:180px; height:40px; position:absolute;bottom:0; color:#9aa70c; border-radius:5px;

      font-weight:bold;text-align:center; line-height:40px;vertical-align:middle;}

.kuai:hover{ background:rgba(64,61,61,0.3); color:white;}

 

 

 

</style>

 

     

<p>下面实现<span class="font-c">圆形&半圆&人物头像&径向渐变&透明度</span></p>

<div class="circle"></div>

<div class="jingjb"></div>

<div class="block2">

  <div class="c1"></div>

  <div class="c2"></div>

</div>

<div class="jb"></div>

<div class="jb1"></div>

<div class="jb2"></div>

<div class="tmd">

<div class="kuai">Knowleadge</div>

</div>

5.实现一些投影和外发光

代码如下：

<style>

  .box-s{margin-top:20px; width:100px ; height:100px; border:1px solid red; box-shadow:1px 8px 10px #a94514; display:inline-block; }

.box-h{margin:20px 0 0  20px ; width:100px ; height:100px; border:1px solid red; box-shadow:8px 1px 10px #a94514; display:inline-block; }

.box-a{margin:20px 0 0  20px ; width:100px ; height:100px; border:1px solid red; box-shadow:1px -8px 10px #a94514; display:inline-block; }

.box-d{margin:20px 0 0  20px ; width:100px ; height:100px; border:1px solid red; box-shadow:-8px 1px 10px #a94514; display:inline-block; }

.box-o{margin:20px 0 0  20px ; width:100px ; height:100px; border:1px solid red; box-shadow:0px 0px 18px #a94514; display:inline-block;}

.box-w{margin:20px 0 0  20px ; width:100px ; height:100px; border:1px solid red; box-shadow:inset 0px 0px 18px #4c6208; display:inline-block;}

</style>

 

 

           

<p>下面实现<span class="font-c">投影以及发光(外发光&内发光)</span></p>

<div class="box-s"></div>

<div class="box-h"></div>

<div class="box-a"></div>

<div class="box-d"></div>

<div class="box-o"></div>

<div class="box-w"></div>

 

 

希望能帮助那些热爱CSS3的人们，如有错误，请及时交流       QQ:995093835