赶紧上例子咯
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/normalize.css" />/*normalize这个css框架呢,可以去搜搜,挺好用的*/ <link rel="stylesheet" href="css/font-awesome.min.css" />/*这个呢,是小图标css框架,用法和bootstrap差不多*/ <style> *,*:before,*:after{ -ms-box-sizing:border-box; -o-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;/*这里主要是想真正的widdth就是width,不要把什么padding啊,border啊等加进来,这才真正的符合人的视角*/ } html,body{ width: 100%; height: 100%; background: rgba(95, 234, 234, 0.8); font-size: 24px; font-weight: 600; font-family: "arial black"; } ul,li{ list-style: none; display: inline-block; } a{ display: block; text-decoration: none; color:rgba(0,0,0,0.3); } li{ padding: 20px 0; margin: 0 10px; } .da{ width: 700px; margin-top: 200px; margin-left: 50%; -webkit-transform:translateX(-50%);/*这两行代码也是居中的技巧*/ } .da li{ width: 100px; height: 100px; text-align: center; position: relative; z-index: 999;/*一定位就要想到z-index,不管有没有用*/ } .da span{ position: absolute; bottom:100%;/*我归之为“巧用100%”,先什么left,top 啊,都不加,光是position看看,因为%是相对于他的父类,如果他的上边贴紧父类的上边框,这就是不是可以考虑用100%了呢?*/ left: 60%; margin-left: -50%; z-index: 9998; width: 80px; height: 80px; background: #fff; border-radius: 50%;/*圆角*/ color:rgba(12, 130, 130, 0.8); opacity: 0; transition:opacity 0.3;/*css3很重要的标签,过渡。4个值,标签名(对象是谁)时间(多久)方式(匀速啊,变速啊,先怎么后怎么样啊)延迟时间(等多久开始)我这里只用到前两个*/ } .da span:after{/*做完今天这个,我感觉伪类就是来修修补补,或者拼接用的,当然,他还有一个很好用的东东,就是清除浮动{content:“”;display:block;clear:both,核心这个}*/ content: ""; width: 40px; height: 40px; background: url(imges/tip.svg) no-repeat;/*avg格式的图片,不会因为变大而失真*/ position: absolute; top:100%; left:80%; margin-left: -50%; margin-top: -8px; } .da i{ position: absolute; left:85%; margin-left:-50%; margin-top:30px; margin-bottom: 20px; } /*-----------------------接下来就是核心代码,前边是在搭框架-----------------------------------------------------------------*/ span{ transition:transform 0.3s; -webkit-transition:transform 0.3s; } span i{ transition:transform 0.1s; -webkit-transition:transform 0.1s; } li:hover span{ transform:rotate3d(0,0,0,0deg) translate3d(0,0,0) scale3d(1,1,1); -webkit-transform:rotate3d(0,0,0,0deg) translate3d(0,0,0) scale3d(1,1,1); opacity: 1; } li:hover span i{ transform:scale3d(1,1,1) translate3d(0,0,0); -webkit-transform:scale3d(1,1,1) translate3d(0,0,0); }/*这里每个类吧相同的都提出来了,相同的是什么?就是最终的状态是一样的*/
/*接下来就是每个分部分,rotatwd旋转角度 scale缩放 translate平移 其中加了3d就是让他进行3d变换,当然还有一个2d。 */
span.content1{ transform-origin: center bottom; -webkit-transform-origin: center bottom; transform:rotate3d(1,1,1,60deg); -webkit-transform:rotate3d(1,1,1,60deg); } span.content1 i{ transform:scale3d(0.01,0.01,1); -webkit-transform:scale3d(0.01,0.01,1); } span.content2{ transform-origin: center bottom; -webkit-transform-origin: center bottom; transform:translate3d(0,20px,0); -webkit-transform:translate3d(0,20px,0); } span.content2 i{ transform:translate3d(0,10px,0); -webkit-transform:translate3d(0,10px,0); } span.content3{ transform-origin: center bottom; -webkit-transform-origin: center bottom; transform:rotate3d(0,1,0,90deg) translate3d(0,8px,0); -webkit-transform:rotate3d(0,1,0,90deg) translate3d(0,8px,0); } span.content3 i{ transform:translate3d(0,-2px,0); -webkit-transform:translate3d(0,-2px,0); } span.content4{ transform:translate3d(0,-12px,0); -webkit-transform:translate3d(0,-12px,0); } span.content4 i{ transform:translate3d(0,12px,0); -webkit-transform:translate3d(0,12px,0); } span.content5{ transform:scale(0.01) translate3d(0,10px,0);/*最重要的,就是scale如果你把它缩成0,可能会发生效果不发出现的情况,不行你可以去试,所以尽可能把他弄成0,01*/ -webkit-transform:scale(0.01) translate3d(0,10px,0); } span.content5 i{ transform:translate3d(0,20px,0); -webkit-transform:translate3d(0,20px,0); } </style> </head> <body> <p class="da"> <ul> <li> <a href="#">nomalse<span class="content1"><i class="fa fa-camera"></i></span></a> </li> <li> <a href="#">palse<span class="content2" ><i class="fa fa-bicycle"></i></span></a> </li> <li> <a href="#">mate<span class="content3" ><i class="fa fa-bus"></i></span></a> </li> <li> <a href="#">script<span class="content4"><i class="fa fa-ship"></i></span></a> </li> <li> <a href="#">css3<span class="content5"><i class="fa fa-plane"></i></span></a> </li> </ul> </p> </body> </html>
更多css3 小图标提示特效 相关文章请关注PHP中文网!

Saya mendapat soalan ini pada hari yang lain. Pemikiran pertama saya ialah: soalan pelik! Kekhususan adalah mengenai pemilih, dan at-peraturan bukan pemilih, jadi ... tidak relevan?

Ya, anda boleh, dan ia tidak begitu penting dalam perintah apa. Preprocessor CSS tidak diperlukan. Ia berfungsi dalam CSS biasa.

Anda pasti pasti menetapkan tajuk cache yang jauh pada aset anda seperti CSS dan JavaScript (dan imej dan fon dan apa sahaja yang lain). Yang memberitahu penyemak imbas

Ramai pemaju menulis tentang bagaimana untuk mengekalkan asas CSS, namun tidak banyak daripada mereka menulis tentang bagaimana mereka mengukur kualiti asas kod tersebut. Pasti, kita ada

Pernahkah anda mempunyai bentuk yang perlu menerima sedikit teks yang sewenang -wenangnya? Seperti nama atau apa sahaja. Itu ' s betul -betul apa. Terdapat banyak

Saya sangat teruja untuk menuju ke Zürich, Switzerland untuk persidangan depan (suka nama dan url!). Saya tidak pernah ke Switzerland sebelum ini, jadi saya teruja

Salah satu perkembangan kegemaran saya dalam pembangunan perisian adalah kedatangan tanpa pelayan. Sebagai pemaju yang mempunyai kecenderungan untuk terjebak dalam butiran

Dalam siaran ini, kami akan menggunakan demo kedai e -dagang yang saya bina dan digunakan untuk Netlify untuk menunjukkan bagaimana kami boleh membuat laluan dinamik untuk data masuk. Ia adil


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

MinGW - GNU Minimalis untuk Windows
Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.

Dreamweaver CS6
Alat pembangunan web visual

Versi Mac WebStorm
Alat pembangunan JavaScript yang berguna

ZendStudio 13.5.1 Mac
Persekitaran pembangunan bersepadu PHP yang berkuasa

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma