一直在纠结学前端还是学后端，今天决定前后端都要学，神秘的世界在等着我去探索。
今天跟着慕课网学了一下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:定义过渡效果何时开始。