美丽的决定

一直在纠结学前端还是学后端，今天决定前后端都要学，神秘的世界在等着我去探索。

今天跟着慕课网学了一下css部分，学到了一些，简单总结一下。

开发方法.txt:
VCD分析法
View视觉， Controller控制， Data数据

View:
主要内容{
标题
控制区域{
控制按钮
预览图
}
}
专业模式：
主要内容 div.main {
标题 div.caption{
h2标题
h3标题
}
大图 img
控制区域 div.ctrl{
控制按钮 diva.ctrl-i
预览图 img
}
}

特效区域 div.slider{
每一个幻灯片 div.main-i
每一个幻灯片 div.main-i
每一个幻灯片 div.main-i
每一个幻灯片 div.main-i
每一个幻灯片 div.main-i
每一个幻灯片 div.main-i
}

div.slider{
div.main{
div.main-i{
img
div.caption{
h2
h3
}
}
div.main-i{}
div.main-i{}
div.main-i{}
div.main-i{}
}
div.ctrl{
a.ctrl-i{}
img
}
}

Data数据:
图片,h2,h3
var data = [
{img:1,h1:'Creative',h2:'DUET'},
{img:2,h1:'Friendly',h2:'DEVIL'},
{img:3,h1:'Tranquilent',h2:'COMPATRIOT'},
{img:4,h1:'Insecure',h2:'HUSSLER'},
{img:5,h1:'Loving',h2:'REBEL'},
{img:6,h1:'Passionate',h2:'SEEKER'},
{img:7,h1:'Crazy',h2:'FRIEND'},
];

Controller:
1.View改造Template
2.点击控制按钮切换当前展现的幻灯片
3.悬停在控制按钮上，展现预览图(倒影)

代码开发:
视觉界面开发: Html+Css,控制台调试
脚本开发: Javascript,Controller的实现
优化和扩展: 更优雅的切换

 

倒影:

-webkit-box-reflect:below(倒影方向:底边) 0px(偏移:0px) -webkit-gradient(遮罩:渐变){

　　linear,//线性渐变

　　left top,//结束位置

　　left bottom,//开始位置

　　from(transparent),//开始颜色

　　color-stop(50%,transparent),中间位置 过度点 颜色

　　to(rgba(255,255,255,.3)结束颜色

}

过渡动画效果:

transition: property duration timing-function delay;

transition-property:规定设置过渡效果的CSS属性的名称。

transition-duration:规定完成过渡效果需要多少秒或毫秒。

transition-timing-function:规定速度效果的速度曲线。

transition-delay:定义过渡效果何时开始。