前端大本营

HTML5,CSS3,Responsive,资料站

利用CSS3动画制作你的动画加载页面

制作工具
  1. WOW.js
  2. Animate.css
制作方法

将css及js加载到页面

<link rel="stylesheet" type="text/css" media="all" href="/js/animate.css" />
<script type="text/javascript" src="/js/wow.min.js"></script>

在HTML中需要加载动画的部分,添加class名

<div class="wow slideInLeft"></div>  
<div class="wow slideInRight"></div>

可以加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性,如:

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>  
<div class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></div> 

执行js

var wow = new WOW({  
    boxClass: 'wow',  /*指定动画元素的class名*/
    animateClass: 'animated',  
    offset: 0,  /*距离可视区域多少开始执行动画*/
    mobile: true,  /*是否在移动设备上执行动画*/
    live: true  /*异步加载的内容是否有效*/
});  
wow.init();  
Tags: ,
Posted in 精彩内容 | 利用 CSS3 技术制作屏幕滚动 动画加载内容的效果已关闭评论
2017 11/08 周三

CSS3 中的一些黑科技

1、鼠标移进网页里,不见了= =
*{
    cursor: none!important;
}
2、简单的文字模糊效果
*{ 
    color: transparent;
    text-shadow: #111 0 0 5px;
}
3、多重边框
.div {
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
    height: 200px;
    margin: 50px auto;
    width: 400px
}
4、实时编辑CSS
<!DOCTYPE html>
<html>
    <body>
        <style style="display:block" contentEditable>
            body { color: blue }
        </style>
    </body>
</html>
5、CSS中简单运算
.div{
    width: calc(100% - 500px);
}
6、border-radius 因为基本上很多人都是这么用的:
.div {
     border-radius: 4px;
}
稍微高端一点的是这样的:
.div {
    border-radius: 4px 6px 6px 4px;
}

然而,终极黑科技是这样用的:
.div {
     border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px;
}
border-radius 它可以赋8个值:
斜线前面的影响的是水平方向,斜线后面影响的是垂直方向,
各个数字就分别代表四个不一样的方向。
7、outline-offset 在input下写CSS的时候对下面的语句会很熟悉:
input {
    outline : none;
}

input:focus {
    outline : none;
}
这就是将input输入框去掉默认的蓝线框的方法。 CSS中还有一个outline-offset属性,在这个属性中,你可以设置默认线框的距离:
input {
    outline-offset: 4px ;
}
 

调节该属性值的大小你就可以看到outline的距离变化了。
Tags:
Posted in CSS最新技术 | CSS3 中的一些黑科技已关闭评论
.rect {
    position: absolute; 
    top: 20px;
    left: 20px; 
    width: 100px; 
    height: 100px; 
    background: linear-gradient(to left, #f00, #f00) left top no-repeat, 
                linear-gradient(to bottom, #f00, #f00) left top no-repeat, 
                linear-gradient(to left, #f00, #f00) right top no-repeat,
                linear-gradient(to bottom, #f00, #f00) right top no-repeat, 
                linear-gradient(to left, #f00, #f00) left bottom no-repeat,
                linear-gradient(to bottom, #f00, #f00) left bottom no-repeat,
                linear-gradient(to left, #f00, #f00) right bottom no-repeat,
                linear-gradient(to left, #f00, #f00) right bottom no-repeat;
    background-size: 1px 20px, 20px 1px, 1px 20px, 20px 1px;  
}
<div class="rect"></div>
Posted in CSS最新技术 | div只有四个角有边框怎么实现?已关闭评论