前端特效每日练习（2020.5.7-2020.5.14）

html，css，js作为前端三板斧，是前端的重要基础，从今天开始，尽量每天打卡，每天完成一个前端特效的demo，巩固自己的基础。
求follow，求star~

1. 2020-5-7 动态加载条

1.1 源代码

    
    



加载完毕~
"loader">
    
"loader-bar">

1.2 涉及知识点

1. calc 属性：calc属性为css3新添加的属性，可以使用百分比、px、em、rem等单位进行四则运算，在样式表层面实现自适应布局。
2. ease-in , ease-in-out：描述animation动画的速度曲线，详情参考此处
3. before 伪元素：":before" 伪元素可以在元素的内容前面插入新内容。":after"与之相反。

1.3 效果图

2. 2020-5-8 随鼠标3D倾斜效果

2.1 源代码

    
    



"box">

2.2 涉及知识点

1. transform属性中的perspective：视域，涉及较为复杂的透视原理，可以参考搞懂 CSS 3D，你必须理解 perspective（视域）这个属性这篇博文（侵删）
2. getBoundingClientRect()用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。
3. pageX,pageY为鼠标的位置。

2.3 效果图

3. 2020-5-9 滚动分享按钮

3.1 源代码

• index.html

"en">

    "UTF-8">
    
    "//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    "style.css" rel="stylesheet">


    

        
"#">"fa fa-wechat" aria-hidden="true">
        
"#">"fa fa-qq" aria-hidden="true">
        
"#">"fa fa-instagram" aria-hidden="true">
        
"#">"fa fa-facebook" aria-hidden="true">
        
"#">"fa fa-twitter" aria-hidden="true">
    

• style.css

body{
     
    margin: 0;
    padding: 0;
    background-color: #4b6584;
}
ul{
     
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    display: flex;
    width: 320px;
    height: 60px;
}

ul:before{
     
    content: '分享';
    font-family: fontAwesome;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg,#ff00ff,#8a2be2);
    border-radius: 30px;
    text-align: center;
    line-height: 60px;
    color: #fff;
    font-size: 30px;
    margin: 0 2px;
    transition: 0.5s;
    z-index: 1;
}

ul:hover:before{
     
    content: '\f1e0';
    width: 60px;
}

ul li{
     
    position: absolute;
    list-style: none;
    transition: 1s;
}

ul li a{
     
    display: block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: #262626;
    color: #fff;
    margin: 0 2px;
    border-radius: 50%;
    font-size: 30px;
}

ul li:nth-child(1) a{
     
    background-color: rgb(26,173,25);
    transition: 0.6s;
}
ul li:nth-child(2) a{
     
    background-color: #4869D6;
    transition: 0.6s;
}
ul li:nth-child(3) a{
     
    background-color: #ee5253;
    transition: 0.6s;
}
ul li:nth-child(4) a{
     
    background-color: #341f97;
    transition: 0.6s;
}
ul li:nth-child(5) a{
     
    background-color: #0abde3;
    transition: 0.6s;
}
ul:hover li:nth-child(1) a{
     
    transform:translateX(64px) rotate(360deg);
    transition-delay: 0.8s;
}
ul:hover li:nth-child(2) a{
     
    transform:translateX(128px) rotate(360deg);
    transition-delay: 0.6s;
}
ul:hover li:nth-child(3) a{
     
    transform:translateX(192px) rotate(360deg);
    transition-delay: 0.4s;
}
ul:hover li:nth-child(4) a{
     
    transform:translateX(256px) rotate(360deg);
    transition-delay: 0.2s;
}
ul:hover li:nth-child(5) a{
     
    transform:translateX(320px) rotate(360deg);
    transition-delay: 0s;
}

3.2 涉及知识点

1. 通过引用font-awesome的cdn提供了logo图案。
2. nth-child伪类选择器，选择的结果是某种元素的第 n 个子元素。

3.3 效果图

4. 2020-5-10 Loading加载波浪效果

4.1 源代码

    
    



    
"loading-inner">
        
"loading-cover">
    

4.2 涉及知识点

1. 波浪效果由两个不规则的圆角矩形绘制而成。

4.3 效果图

5. 2020-5-11 弹性按钮

5.1 源代码

    
    



    

        
"form-box">
            
"input-box">
                用户名
                
            
            
"input-box">
                密码
                "password">
            
            登录
        
    

5.2 涉及知识点

1. scale3d属性

5.3 效果图

6. 2020-5-12 炫酷表单

6.1 源代码

    
    



"login-box">
    
登录
    

        
"user-box">
            "text" name="" required="">
            用户名
        
        
"user-box">
            "password" name="" required="">
            密码
        
        "#">
            
            
            
            
            Login
        
    

6.2 效果图

7. 2020-5-13 拟态风格

7.1 源代码

    
    




    
"container">
        
"box">
            "#">"fa fa-wechat" aria-hidden="true">
        
        
"box">
            "#">"fa fa-wechat" aria-hidden="true">
        
        
"box">
            "#">"fa fa-wechat" aria-hidden="true">
        
        
"box">
            "#">"fa fa-wechat" aria-hidden="true">
        
        
"box">
            "#">"fa fa-wechat" aria-hidden="true">
        
        
"box">
            "#">"fa fa-wechat" aria-hidden="true">
        
    

7.2 涉及知识点

1. 练习了flex布局。
2. box-shadow属性的灵活应用。

7.3 效果图

8. 2020-5-14 fgj牌孤儿计算器

8.1 源代码

    
    





    
{
     {
     result}}
    

        
C
        
(
        
)
        
Backspace
        
7
        
8
        
9
        
/
        
4
        
5
        
6
        
*
        
1
        
2
        
3
        
-
        
.
        
0
        
=
        
+
    

8.2 设计知识点

1. 简单的Vue
2. 不简单的fgj

8.3 效果图