                        课程
                    
                        /前端开发
                        
                            /CSS3
                        
                        /css3实现网页平滑过渡效果

两个问题，一、.clr这里面的样式干嘛的。二、底部导航中添加的三角形其他三个透明边框区域怎么隐藏，鼠标移上去为什么a的颜色会变

.nav input:checked + a:after{content:"";height:0;width:0;overflow:hidden;border:50px solid transparent;border-bottom-color:#AA213E;position:absolute;bottom:50px;left:50%;margin-left:-50px;}

.nav input:hover + a{background:#D9161A;}

.nav input:checked:hover + a{background:#AA213E;}

啊西巴

2017-06-20

源自：css3实现网页平滑过渡效果 2-1

关注问题我要回答

1142

操作

收起

2 回答

moon_gloaming
2018-03-16

.clr 是清除浮动的

border:50px solid transparent;里transparent就是设置为颜色为透明，后面再只给border-bottom-color设置颜色，就只会显示底部三角了

加了hover 所以鼠标滑过的时候颜色会变

1 回复有任何疑惑可以回复我~

JY_YOLO
2017-06-25

.clr在哪没看到

.st-container input:checked + a:after{content: "";width: 0;height: 0;overflow: hidden;

border: 20px solid transparent;border-bottom-color: #821134;position: absolute;bottom: 100%;left: 50%;margin-left: -20px;}

.st-container input:checked + a,

.st-container input:checked:hover + a{background: #3f7830;}

三个透明边框你可以搜索下 CSS画三角形那边说的比较详细你重新写一遍看看因为加了hover就是鼠标掠过的触发所以鼠标移动上去于颜色会变

0 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

css3实现网页平滑过渡效果

参与学习 54370 人
解答问题 372 个

CSS3 打造页面之间的平滑过渡效果，带来神奇的体验

本课相似问答

3 回答为什么按照老师写的代码，顶部的三角和三角里面的图颜色变了，H2 和P没有变颜色呢

1 回答半三角隐藏之后上个页面露出来

1 回答为什么滑动鼠标滚轮的时候，被隐藏在底下的也会滑上去呢？代码一样的啊

1 回答为神魔导航出现在导航三角上

1 回答下面粉色的角不隐藏

搜索更多本课相关问答

两个问题，一、.clr这里面的样式干嘛的。二、底部导航中添加的三角形其他三个透明边框区域怎么隐藏，鼠标移上去为什么a的颜色会变

我要回答关注问题

意见反馈帮助中心 APP下载