web实训

web实训 ~ 收获网站:

项目1
项目2

• 抠图汇总:https://baijiahao.baidu.com/s?id=1673336636238375251&wfr=spider&for=pc
  1. https://www.remove.bg/zh/upload
  2. https://www.sukoutu.com/
  3. https://www.stickermule.com/trace
  4. https://kt.fkw.com/koutu.html
  5. http://matting.deeplor.com/
  6. https://photoscissors.com/
  7. ...
• 转换为图标:
  1. http://www.ico8.net/index.php
  2. http://www.bitbug.net/
  3. ...
• 高清 图片: https://wallhaven.cc/
• 图床: https://sm.ms/
• 菜鸟教程: https://www.runoob.com/
• 青柠起始页: https://a.maorx.cn/
• 个人博客（时移之人）: https://www.cnblogs.com/yaolicheng/
• 阿里云服务器（学生机）
  1.https://www.aliyun.com/activity/promotion/campus2018
  2.开发者成长计划：https://developer.aliyun.com/plan/grow-up?spm=5176.227096.J_2614917780.2.4e252604XyLube
  3.宝塔面板：https://www.bt.cn/bbs/thread-19376-1-1.html

vscode插件

• Live Server 实时更新页面
• 初始页 Ctrl + Shift + P ---> 输入 configure Display Language 选择 zh-cn （中文）

加入Css3动画属性

/*css3 动画属性  
		@keyframes 	定义一个动画,@keyframes定义的动画名称用来被animation-name所使用
				许多关键帧选择器中添加一个动画
		
		*/
/*淡入*/
@keyframes fade-in {  
    0% {opacity: 0;}/*初始状态 透明度为0*/  
    10% {opacity: 0.1;}
    20% {opacity: 0.2;}
    30% {opacity: 0.3;}
    40% {opacity: 0.4;}
    50% {opacity: 0.5;}
    60% {opacity: 0.6;} 
    70% {opacity: 0.7;} 
    85% {opacity: 0.8;} 
    100% {opacity: 1;}/*结束状态 透明度为1*/  
}  
@-webkit-keyframes fade-in {/*针对webkit内核 --> Safari and Chrome*/  
    0% {opacity: 0;}/*初始状态 透明度为0*/  
    10% {opacity: 0.1;}
    20% {opacity: 0.2;}
    30% {opacity: 0.3;}
    40% {opacity: 0.4;}
    50% {opacity: 0.5;}
    60% {opacity: 0.6;} 
    70% {opacity: 0.7;} 
    85% {opacity: 0.8;} 
    100% {opacity: 1;}/*结束状态 透明度为1*/  
} 
      /* 设置所有的加载为上述动画  */
* {    
    animation: fade-in;  /*动画名称*/  
    animation-duration: 1s;   /*动画持续时间*/  
    -webkit-animation:fade-in 1s;    /*针对webkit内核*/  
}  

• text-shadow: 0px 16px 8px 8px rgba(0, 0, 0, 0.5); 文字阴影

• text-align-last: justify; 段落中的文字~最后一行被调整为两端对齐

• text-align: justify;

  • 注意: text-align-last 属性只有在 text-align 属性设置为 "justify" 时才起作用

• text-justify: distribute-all-lines; /* 这行必加，兼容ie浏览器 */

• 边框阴影 : box-shadow: 2px 2px 2px 2px #666;

• 旋转 : transform: translate3d(0,-3px,3px); /* x,y,z轴 */

• 鼠标触发 : a:hover{}

• 宽度为浏览器宽度时,网页的大小不要设为100%,会出现两个滚动条

• cursor:pointer; 鼠标指针变成小手

• 鼠标点击特效

<script>   
var a_idx = 0;
$(document).ready(function () {
    $("body").click(function (e) {
        var a = new Array("❤一岁一枯荣❤", "❤二月春来半❤", "❤三湘迁客去❤", "❤四时更变化❤", "❤五陵北原上❤", "❤六合随休息❤", "❤七叶虽多处❤", "❤八月湖水平❤", "❤九泉知何在❤", "❤十年离战后❤", "❤百年随手过,万事转头空❤", "❤千村薜荔人遗矢,万户萧疏鬼唱歌❤");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
            y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
            1500,
            function () {
                $i.remove();
            });
    });
});
</script>

• 鼠标样式

  /*鼠标样式*/
  background-repeat: repeat;
  background-attachment: fixed;
  background-size:cover;
  cursor: url(https://files.cnblogs.com/files/yaolicheng/cursor.ico),auto;