文档章节

JQuery控制CSS3动画与超方便的清除Float

睡觉谁教谁叫呢
 睡觉谁教谁叫呢
发布于 2014/06/08 17:37
字数 647
阅读 79
收藏 0

先上css代码:

body,ul,li,a{
    padding: 0 ;
    margin:0;
    font-size: 18px;
    color: white;
    font-weight: 900;
}
.all{
    width: 260px;
    height: 240px;
    margin:100px auto;
}
.clear:after{
    content: ".";
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
}
.Css{
    width: 140px;
    height: 140px;
    background: #6bd179;
    float: left;
    text-align: center;
    line-height: 140px;
}
.Node{
    width: 120px;
    height: 70px;
    background: #309ed5;
    float: left;
    text-align: center;
    line-height: 70px;
}
.JQuery{
    width: 120px;
    height: 70px;
    background: #3ebfd5;
    float: left;
    text-align: center;
    line-height: 70px;
}
.Javascript{
    width: 100px;
    height: 100px;
    background: #ebb742;
    float: left;
    text-align: center;
    line-height: 100px;
}
.Html{
    width: 160px;
    height: 100px;
    background: #80e35e;
    float: left;
    text-align: center;
    line-height: 100px;
}
@-webkit-keyframes FZ {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(180deg);
        opacity: 0;
    }
}
@-webkit-keyframes XZ {
    0% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(180deg);
        opacity: 1;
    }
}

.clear:after{

    content: ".";//生成内容作为最后一个元素,至于content里面是点还是其他都是可以的。

    height: 0;//避免生成内容破坏原有布局的高度。

    visibility: hidden;//使生成的内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互。

    display: block; //使生成的元素以块级元素显示,占满剩余空间。

    clear: both;

}

要在IE下触发 hasLayout  还需要多设置一个属性: zoom:1。

这个原理就是给父元素设置类名,css样式里用after伪元素在浮动后的子元素添加。


这样做的好处喃?我也是在网上看的,大神都说:“结构和语义化完全正确,代码量居中



html:


JQuery控制的CSS3动画,还是有些bug,大家把代码复制下来 运行运行就知道了。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="1.css"/>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="all clear">
    <div class="Css">Css</div>
    <div class="Node">Node.js</div>
    <div class="JQuery">JQuery</div>
    <div class="Javascript">Javascript</div>
    <div class="Html">Html</div>
</div>
<script>
    $(function(){
        $(".Css").on({mouseover:function(){
            $(this).css({
                webkitAnimation:"FZ 0.5s linear"
            },setTimeout(function(){
                $(".Css").css({
                    webkitAnimation:"",
                    background:"white",
                    color:"#6bd179"
                });
            },500)
            );
        },mouseout:function(){
            $(this).css({
                webkitAnimation:"",
                background:"#6bd179",
                color:"white"
            });
        }
        });
        $(".Javascript").on({mouseover:function(){
            $(this).css({
                        webkitAnimation:"XZ 0.5s linear"
                    },setTimeout(function(){
                $(".Javascript").css({
                    webkitAnimation:"",
                    background:"white",
                    color:"#ebb742"
                });
            },500));
        },mouseout:function(){
            $(this).css({
                webkitAnimation:"",
                background:"#ebb742",
                color:"white"
            });
        }
        });
        $(".Node").on({mouseover:function(){
            $(this).css({
                webkitAnimation:"FZ 0.5s linear"
            },setTimeout(function(){
                $(".Node").css({
                    webkitAnimation:"",
                    background:"white",
                    color:"#309ed5"
                });
            },500));
        },mouseout:function(){
            $(this).css({
                webkitAnimation:"",
                background:"#309ed5",
                color:"white"
            });
        }
        });
        $(".JQuery").on({mouseover:function(){
            $(this).css({
                webkitAnimation:"XZ 0.5s linear"
            },setTimeout(function(){
                $(".JQuery").css({
                    webkitAnimation:"",
                    background:"white",
                    color:"#3ebfd5"
                });
            },500));
        },mouseout:function(){
            $(this).css({
                webkitAnimation:"",
                background:"#3ebfd5",
                color:"white"
            });
        }
        });
        $(".Html").on({mouseover:function(){
            $(this).css({
                webkitAnimation:"FZ 0.5s linear"
            },setTimeout(function(){
                $(".Html").css({
                    webkitAnimation:"",
                    background:"white",
                    color:"#80e35e"
                });
            },500));
        },mouseout:function(){
            $(this).css({
                webkitAnimation:"",
                background:"#80e35e",
                color:"white"
            });
        }
        });
    });
</script>
</body>
</html>


© 著作权归作者所有

共有 人打赏支持
睡觉谁教谁叫呢
粉丝 4
博文 5
码字总数 2353
作品 0
成都
炫酷实用 7款jQuery/HTML5图片应用

jQuery非常强大,我们这里有很多关于jQuery焦点图的插件,今天我们精选了7款利用jQuery和HTML5实现的超炫酷图片特效应用,有些也是焦点图插件,一起来看看吧。 1、HTML5 3D衣服摆动特效 超酷...

老鸟的空间
2014/07/05
0
0
程序猿必备的10款web前端动画插件十三

  1.jQuery圆形旋转切换菜单 带菜单项描述   jQuery有着无数的插件,菜单插件是jQuery插件中最多的,尤其是CSS3和HTML5的配合,让jQuery菜单变得更加丰富多彩。今天我们要给大家分享一款...

爱码农
08/30
0
0
HTML5/CSS3超酷进度条 不同进度多种颜色

下面我们来看看实现这款进度条的过程和源码,代码主要由HTML、CSS以及jQuery组成,实现过程也相对比较简单。 HTML代码: <div id="wrapper"> <div class="loader-container"> <div class="me...

Reya滴水心
2015/07/15
0
0
让人期待的2011年度最佳 jQuery 插件发布啦

  近日,国外著名博客WDL发布了2011年度最佳 jQuery 插件。jQuery 自2006年发布以来,经过五年的迅速发展,目前已是最流行和使用最广泛的 JavaScript 框架。jQuery 的易扩展性吸引了来自全...

Yamazaki
2012/05/02
0
0
jQuery教程:教你打造20个超级酷的视觉效果

我们都爱jQuery,因为基于它我们可以做出各种奇特的效果。下面这些特效教程都基于不同的主题,它们都包括一些很酷的视觉效果。按照下列步骤来进行重新设计,或按照这些使用的步骤用到你自己的...

ch2004
2012/04/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

科学利用谷歌云平台

当今既是大数据时代,也是云计算时代。云平台构建已经成了诸多大数据平台建设第一步。于是各家互联网巨头们纷纷都开启了云平台服务。国内的以阿里云、腾讯云、百度云、华为云为首,国外的有A...

胖胖雕
3分钟前
0
0
公众号关联小程序发送关联通知

公众号关联小程序发送关联通知,对于推广小程序有着很大的帮助。所以问题来了,怎么做到在公众号关联小程序发送关联通知呢? 一:开发中遇到的问题 之前在开发过程中发现,公众号已经关联小程...

Code辉
6分钟前
0
0
并发编程基础之JMM学习摘要

一、JMM定义 Java内存模型即Java Memory Model(JMM),JMM决定一个线程对共享变量的写入何时对另一个线程可见(内存可见性),从抽象的角度来看,JMM定义了线程和主内存之间的抽象关系:线程...

狠一点
11分钟前
0
0
mysql 开启日志记录并且解决日志时间错误问题

查看日志开启状态 SHOW VARIABLES LIKE 'general%'; 开启日志 SET GLOBAL general_log = 'ON'; 本人mysql版本5.7 在查询日志的时候发现时间和系统时间不对 查看系统默认时间参数 SELECT @@l...

Marhal
13分钟前
0
0
Kubernetes上的负载均衡详解

如果您的应用程序是面向大量用户、会吸引大量流量,那么一个不变的目标一定是在高效满足用户需求的同时、不让用户感知到任何类似于“服务器繁忙!”的情况。这一诉求的典型解决方案是横向扩展...

RancherLabs
14分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部