请问怎么做出这样的html页面 css样式,点击加号后展开更多内容 |
您所在的位置:网站首页 › css点击后 › 请问怎么做出这样的html页面 css样式,点击加号后展开更多内容 |
本篇文章给大家带来的内容是关于纯css实现加号一个的效果(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 实现下图的加号效果: 若想实现这个效果, 只需一个p元素即可搞定。 需要用到css的为了before和after, 以及border特性。 先设置一个div便签 再设置一个边框: .add { border: 1px solid; width: 100px; height: 100px; color: #ccc; transition: color .25s; position: relative; }此时边框是这样的: 我们可以利用伪类before和其border-top来设置一个“横”: .add::before{ content: ''; position: absolute; left: 50%; top: 50%; width: 80px; margin-left: -40px; margin-top: -5px; border-top: 10px solid; }注意我们使了绝对定位。 此时变成了这样: 参照上面, 我们可以使用after伪类和border-bottom设置一个“竖”: .add::after { content: ''; position: absolute; left: 50%; top: 50%; height: 80px; margin-left: -5px; margin-top: -40px; border-left: 10px solid; }在加上hover伪类,设置鼠标悬浮上去的颜色: 最终的样式: 当鼠标悬浮上去是, 会变色:
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |