vue 源码学习

liuestc · Mar 8, 2017 · 216d346 · 216d346
1 parent 8880b51
commit 216d346
Show file tree

Hide file tree

Showing 13 changed files with 867 additions and 5 deletions.
diff --git a/IFE/hover/2222.jpg b/IFE/hover/2222.jpg
diff --git a/IFE/hover/README.md b/IFE/hover/README.md
@@ -0,0 +1,34 @@
+background总结
+====
+background共有5个属性
+color,image,attachment,repeat,size
+
+color和image就不多说了，`background-attachment`指的是背景是否岁滚动条滚动
+
+background-attachment:scroll||fixed
+使用fixed时一般加在body或者html元素上，其他元素上不生效
+
+###background-position
+background-position:(0,0)||(0%,0%)||(left,top),默认值是这些
+
+新增属性：
+
++ background-origin:用于指定绘制背景图片的起点
+  正常情况下，background-position绘制原点在00处，background-origin则可以改变这个位置（只决定起点）
+  background-origin：padding-box||border-box||content-box
++ background-clip:制定背景图片显示范围，同上三个值
+  这个属性如果取content-box时，只会在content里面绘制
++ background-size:制定背景图片尺寸
+  注意这个属性哇！默认auto，就是有多大绘多大，不伸缩
+  background-size:100%; //这样设置的话，高度是自适应的
+  background-size:contain||cover  contain和宽度100%，高度自适应是一个效果
+  background-size:cover和background-position:center配合可以平铺剧中
++ background-break:指定内联元素的背景图片进行平铺时的循环方式
+
+****
+
+渐变属性
+ 配合`background-image`使用
+ background-image:linear-gradient(top,bottom,left,right|deg|red 20% ,blue 20%,yellow,yellow)
+
+
diff --git a/IFE/hover/blur.html b/IFE/hover/blur.html
@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+  <style>
+  * {
+    padding: 0;
+    margin: 0;
+  }
+
+  .content2 {
+    width: 400px;
+    height: 300px;
+    position: relative;
+    margin: 50px auto;
+  }
+
+  .content2::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-image: url(2222.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    z-index: -2;
+    background-attachment: fixed;
+    filter: blur(4px)
+
+  }
+
+  main {
+    padding: 40px;
+    background-color: rgba(255, 255, 255, .5);
+    position: absolute;
+    top: 15%;
+    margin:10px;
+    border-radius: 8px;
+    transition:all ease 1s;
+
+    /*background-image: url("2222.jpg");*/
+ /*   background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color:transparent;*/
+
+	opacity: 0;
+    z-index:5;
+  }
+
+main::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 50%;
+    bottom: 0;
+    right: 0;
+    /*这里加上这个可以模糊文字下的图片*/
+    /*background-image: url("2222.jpg");*/
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+/*    -webkit-background-clip: text;
+    -webkit-text-fill-color:transparent;*/
+    z-index: -1;
+    /*filter: blur(8px);*/
+
+    /*border实现*/
+    /*opacity: 0*/
+
+    width:0px;
+    /*height:100%;*/
+    border:4px solid rgba(255, 255, 255, .8);
+    border-width:4px 0;
+    transition: all ease .5s;
+  }
+
+main:hover{
+	background-color: rgba(255, 255, 255, .2);
+	opacity: 1;
+}
+  main:hover::before{
+  	width:100%;
+  	left:0%;
+  	/*opacity: 1;*/
+  	/*filter: blur(8px);*/
+  }
+
+  main::after{
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 0%;
+    bottom: 0;
+    right: 0;
+  	height:0px;
+    border:4px solid rgba(255, 255, 255, .8);
+    border-width:0 4px;
+    transition: all ease .5s;
+  }
+
+  main:hover::after{
+  	top:0%;
+  	height:100%;
+  }
+
+blockquote{
+	font-size:20px;
+	font-weight: 800;
+	background-image: linear-gradient(to left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%, #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
+	background-size: 200% 100%;
+	background-position: 0% 0%; 
+	-webkit-background-clip:text;
+	-webkit-text-fill-color:transparent;
+}
+
+main:hover blockquote{
+	animation:river infinite linear 2s ;
+	/*background-position:-100% 0; */
+}
+@keyframes river{
+	0%{
+		background-position: 0% 0%;
+	}
+	100%{
+		background-position: -100% 0%;
+	}
+}
+
+
+
+  </style>
+</head>
+
+<body>
+  <div class="content2">
+    <main>
+      <blockquote> “The only way to get rid of a temptation The only way to get rid of a temptation”
+        <footer>—
+          <cite> Oscar Wilde, The Picture of Dorian Gray </cite>
+        </footer>
+      </blockquote>
+    </main>
+  </div>
+</body>
+
+</html>
diff --git a/IFE/hover/index.html b/IFE/hover/index.html
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+</head>
+<style>
+* {
+  padding: 0;
+  margin: 0;
+}
+
+.wrapper {
+  width: 400px;
+  height: 300px;
+  position: relative;
+  margin: 0 auto;
+}
+
+.text-wrapper {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%,-50%,0);
+  z-index: 2;
+  font-size:30px;
+  background-image: -webkit-linear-gradient(left, blue, red 25%, blue 50%, red 75%, blue 100%);
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight:800;
+  transition: all 1s ease-in-out ;
+}
+.text-wrapper:hover{
+	animation: streamer 5s infinite linear;
+}
+
+@keyframes streamer {
+    0%  {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: -100% 0;
+    }
+}
+
+.line {
+  width:100%;
+  height: 100%;
+  position: absolute;
+  z-index: 10;
+  transition: all ease .5s;
+  font-size: 12px;
+}
+
+.line::before{
+	content:" ";
+	width:2px;
+	height:0%;
+	position: absolute;
+	background-color: #fff;
+	transition: all ease .5s;
+	z-index: 99;
+	top:50%;
+	bottom:50%;
+}
+
+.text-wrapper:hover .line::before{
+	top:0;
+	bottom:0;
+	height:100%;
+}
+
+
+.line2::after{
+	content:" ";
+	width:2px;
+	height:0%;
+	position: absolute;
+	background-color: #fff;
+	transition: all ease .5s;
+	z-index: 99;
+	top:50%;
+	bottom:50%;
+	right:0;
+}
+
+.text-wrapper:hover .line2::after{
+	top:0;
+	bottom:0;
+	height:100%;
+}
+
+.image-wrapper {
+  border: 1px solid #ccc;
+  position: absolute;
+  text-align: center;
+  background-image: url(2222.jpg);
+  background-size: 100% 100%;
+  background-position: center;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  opacity: .6;
+}
+
+.word{
+	padding:10px;	
+}
+
+.word::before{
+	content:"";
+	position: absolute;
+	top:0;
+	width:0px;
+	height:2px;
+	left:50%;
+	background-color: #fff;
+	transition: all ease .5s;
+}
+
+.word::after{
+	content:"";
+	position: absolute;
+	bottom:0;
+	width:0px;
+	height:2px;
+	left:50%;
+	background-color: #fff;
+	transition: all ease .5s;
+}
+
+.text-wrapper:hover .word::before{
+	left:0;
+	width:100%;
+}
+
+
+.text-wrapper:hover .word::after{
+	left:0;
+	width:100%;
+}
+
+</style>
+
+<body>
+  <div class="wrapper">
+    <div class='text-wrapper'>
+	 <div class="line"></div>
+	  <div class="word">百度前段IFE</div>
+	  <div class="line2"></div>
+    </div>
+    <div class="image-wrapper"></div>
+  </div>
+</body>
+
+</html>