Html 带动画的中央分隔布局（仅CSS）
重要提示：只有CSS/HTML，而不是javascript（客户端不允许使用它） 最近开始我的网站主页，并希望作出一个集中划分的布局。想把徽标放在中间，一张图片放在上面，上面有一个按钮指向页面，下面有一张图片具有相同的功能 动画应悬停在按钮（或其周围的定义区域）上，如我在此处所做的comp中所示： 与预期类似：Html 带动画的中央分隔布局（仅CSS）,html,css,animation,css-animations,Html,Css,Animation,Css Animations,重要提示：只有CSS/HTML，而不是javascript（客户端不允许使用它） 最近开始我的网站主页，并希望作出一个集中划分的布局。想把徽标放在中间，一张图片放在上面，上面有一个按钮指向页面，下面有一张图片具有相同的功能 动画应悬停在按钮（或其周围的定义区域）上，如我在此处所做的comp中所示： 与预期类似： *{ 边际：0px； 填充：0px； } #包装纸{ 宽度：80%； 高度：200px； 保证金：自动； } #包装器：悬停#左：非（：悬停）{ 宽度：25%； 过渡：宽度1s线性；
*{
边际：0px；
填充：0px；
}
#包装纸{
宽度：80%；
高度：200px；
保证金：自动；
}
#包装器：悬停#左：非（：悬停）{
宽度：25%；
过渡：宽度1s线性；
}
#包装器：悬停#右：不（：悬停）{
宽度：25%；
过渡：宽度1s线性；
}
#左{
宽度：50%；
身高：100%；
背景颜色：浅蓝色；
显示：内联块；
位置：相对位置；
过渡：宽度1s线性；
}
#左内{
位置：绝对位置；
顶部：100px；
宽度：计算（100%-4px）；
文本对齐：居中；
边框：2件纯黑；
}
#对{
宽度：50%；
身高：100%；
背景颜色：浅灰色；
显示：内联块；
位置：相对位置；
过渡：宽度1s线性；
}
#右翼{
位置：绝对位置；
顶部：100px；
宽度：计算（100%-4px）；
文本对齐：居中；
边框：2件纯黑；
}
#右：悬停{
宽度：75%；
过渡：宽度1s线性；
}
#左：悬停{
宽度：75%；
过渡：宽度1s线性；
}
标题1
标题2
/*棘手的部分*/
div{
宽度：100%；
指针事件：无；
溢出：隐藏；
过渡：1.5s；
}
div:hover{/*将由子级通过指针事件自动捕获*/
弹性：3；
}
部门：第一个孩子{
背景：绿松石；
}
a组{
指针事件：auto；/*如果鼠标悬停，则其父对象悬停*/
position:relative；/*如果要覆盖div父对象的区域，则可以将其设置为div父对象*/
填充物：5px；
边界半径：0.25em；
边框：3倍实心；
盒影：2px2p5px；
颜色：#222；
背景：#aaa；
}
div a:hover:before{/*只增加按钮悬停一次的大小*/
内容：''；
位置：绝对位置；
top:-200px；/*用于从其相对位置父级增加伪大小的coordonates。根据需要调整*/
底部：-200px；
宽度：100%；
}
/*布局*/
身体，
div{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
}
div{
弹性：1；
}
人力资源{
宽度：100%；
高度：5px；
背景：红色；
文本对齐：居中；
}
人事：以前{
内容：网址(http://dummyimage.com/50x50);
显示：内联块；
高度：50px；
边界半径：50%；
溢出：隐藏；
利润上限：-25px；
}
html，
身体{
身高：100%；
宽度：100%；
保证金：0；
}