纯CSS3打造焦点轮播图(无js)

今天给大家带来一个不借助js,只用纯css3实现的焦点轮播图教程,包括轮播间隔时间我们也可以自定义。这里我们用到的是css3的@keyframe规则和animation属性。注意,此规则与属性仅IE10以及Chrome、Safari、Opera、Firefox支持。具体用法可以参照这篇文章:http://www.w3cplus.com/content/css3-animation或者网络相关资料。

首先我们先构建主框架,很简单,就不详述了。

<div id = "container">  
  <ul id="slide">
    <li id="first"><a href=""><img src="1.jpg" alt="图片1"/></a></li>
    <li id="second"><a href=""><img src="2.jpg" alt="图片2"/></a></li>
    <li id="third"><a href=""><img src="3.jpg" alt="图片3"/></a></li>
    <li id="fourth"><a href=""><img src="4.jpg" alt="图片4"/></a></li>
  </ul>
</div>

继续阅读纯CSS3打造焦点轮播图(无js)

CSS3做个爱心送给你的爱人

之前有在网上看到过别人做的一个爱心图形,非常好看,今天尝试着自己做了一个,虽然看起来有点别扭,但也分享一下吧。

做这个爱心主要是牵扯到css3的border-radius属性以及transform属性。爱心看起来用css制作有点困难,但当你学会能够庖丁解牛的时候就觉得其实不过尔尔。将爱心拆分成若干个我们已经学会制作的几个图形然后再组合起来就可以了。

爱心可以拆分成两个矩形,且上边的两个角为圆角,接着将两个图形一个左旋转,一个右旋转,然后调整两个图形距离,部分重合后便有了爱心的模样。 继续阅读CSS3做个爱心送给你的爱人