CSS伪元素

最新推荐文章于 2023-01-03 21:16:49 发布

qq287211858

最新推荐文章于 2023-01-03 21:16:49 发布

阅读量178

点赞数

分类专栏： css 文章标签： css class books access url float

本文链接：https://blog.csdn.net/qq287211858/article/details/6721406

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

	body{ margin:0; padding:0; background:url(images/bglines.png); font-size:12px; font-family:Georgia, "Times New Roman", Times, serif}
	a{ text-decoration:none;}
	#footer-boxes{ width:1138px; margin:30px auto;}
	.footer-box {margin: 0 2.7% 0 0;float: left;width: 22.97%;height: 175px;padding: 10px;background: #E6E2DF;background-clip: padding-box;color: #B2AAA4;background-repeat: no-repeat;border: 8px solid transparent;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);overflow: hidden;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;position: relative;
}
.footer-box:hover{ color:#FFF;}
.footer-box.last{ margin:0}

#f-diw:hover {background-color: #237ABE;}
#f-qod:hover {background-color: #37597A;}
#f-htmlipsum:hover {background-color: #333;}
#f-bookshelf:hover {background-color: #FF8400;}

#f-bookshelf::after {background-position: -10px -1782px;}
#f-qod::after {background-position: -10px -1463px;}
#f-diw::after {background-position: -10px -1304px;}
#f-htmlipsum::after {background-position: -10px -1622px;}

.footer-box:hover::after {left: 75%;opacity: 1;}
.footer-box::after {content: "";position: absolute;width: 130px;height: 130px;left: 100%;top: 15px;opacity: 1;background-image: url(images/css-tricks.png);}
.footer-box > * {position: relative;z-index: 1;}

.footer-box p {font-size: 12px;width: 74%;line-height: 1.5;}
.footer-box h5 {font-family: "kulturista-web-1","kulturista-web-2";font-style: normal;font-size: 26px;line-height: 1;margin: 0 0 10px 0;font-weight: 100;letter-spacing: -1px;}

<body>
<div id="footer-boxes"> 
<a class="footer-box" id="f-diw" href="#"><h5>DigWP</h5><p>A book and blog co-authored by Jeff Starr and myself about the World's most popular publishing platform.</p> </a>
<a class="footer-box" id="f-qod" href="#"><h5>Quotes on Design</h5><p>Design, like Art, can be an elusive word to define and an awfully fun thing to have opinions about.</p> </a>
<a class="footer-box" id="f-htmlipsum" href="#"><h5>HTML-Ipsum</h5><p>One-click copy to clipboard access to <em>Lorem Ipsum</em> text that comes wrapped in a variety of HTML.</p> </a> 
<a class="footer-box last" id="f-bookshelf" href="#"><h5>Bookshelf</h5><p>Hey Chris, what books do you recommend? These, young fertile mind, these.</p> </a></div>
</body>

效果图如下：

鼠标经过的效果

qq287211858

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS伪元素

body{ margin:0; padding:0; background:url(images/bglines.png); font-size:12px; font-family:Georgia, "Times New Roman", Times, serif} a{ tex
复制链接

扫一扫

专栏目录