CSS3 category menu effect
|
The CSS3 category menu effects are as follows:
HTML
<html>
<head>
<title></title>
<style type="text/css">
#bg { width: 1270px; height: 751px; margin: 0 auto; background: url("images/bg.jpg") no-repeat; }
.sblock { width: 800px; height: 250px; margin: 0 auto;}
/*.sblock { transform:translateY(65%); }*/
.sblock > div { width: 200px; height: 250px; margin: 0 auto; }
.sb1 { padding-top: 170px; }
.sb2 { padding-top: 30px; }
.sblock div:hover { transform: translateY(-10px); }
.sblock div { transition:all 0.5s; }
.sb1 > div:nth-of-type(1) { float: left; background: url("images/1.jpg") no-repeat; }
.sb1 > div:nth-of-type(2) { float: left; background: url("images/2.jpg") no-repeat; }
.sb1 > div:nth-of-type(3) { float: left; background: url("images/3.jpg") no-repeat; }
.sb1 > div:nth-of-type(4) { float: left; background: url("images/4.jpg") no-repeat; }
.sb2 > div:nth-of-type(1) { float: left; background: url("images/5.jpg") no-repeat; }
.sb2 > div:nth-of-type(2) { float: left; background: url("images/6.jpg") no-repeat; }
.sb2 > div:nth-of-type(3) { float: left; background: url("images/7.jpg") no-repeat; }
.sb2 > div:nth-of-type(4) { float: left; background: url("images/8.jpg") no-repeat; }
</style>
</head>
<body>
<div id="bg">
<section class="sblock sb1">
<div></div>
<div></div>
<div></div>
<div></div>
</section>
<section class="sblock sb2">
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</div>
</body>
</html>Summarize The above is the CSS3 classification menu effect introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
>>: Solve the problem that Navicat cannot connect to the MySQL server in the Centos system in VMware
Recommend
VMWare Linux MySQL 5.7.13 installation and configuration tutorial
This article shares with you the tutorial of inst...
Several ways to solve the problem of floating causing the height of the parent element to collapse in CSS
In the past, float was often used for layout, but...
Configure nginx to redirect to the system maintenance page
Last weekend, a brother project was preparing to ...
JavaScript offset implements mouse coordinate acquisition and module dragging within the window
offset Offset is the offset. Using the offset ser...
A brief discussion of four commonly used storage engines in MySQL
Introduction to four commonly used MySQL engines ...
Ubuntu20's tzselect setting time failure problem, Raspberry Pi server (recommended)
I upgraded my Raspberry Pi server to Ubuntu 20 tw...
Implementation of Vue counter
Table of contents 1. Implementation of counter 2....
Example of how to enable Slow query in MySQL
Preface Slow query log is a very important functi...
3 Tips You Must Know When Learning JavaScript
Table of contents 1. The magical extension operat...
Detailed explanation of the use of HTML header tags
HTML consists of two parts: head and body ** The ...
Detailed explanation of Vue data proxy
Table of contents 1. What I am going to talk abou...
MYSQL uses Union to merge the data of two tables and display them
Using the UNION Operator union : Used to connect ...
The latest 36 high-quality free English fonts shared
01. Infinity Font Download 02. Banda Font Download...
33 ice and snow fonts recommended for download (personal and commercial)
01 Winter Flakes (Individual only) 02 Snowtop Cap...
How to implement the singleton pattern in Javascript
Table of contents Overview Code Implementation Si...