基于CSS3鼠标滑过放大突出效果_html/css_WEB-ITnose
Jun 24, 2016 am 11:40 AM
还记得之前分享过一款CSS3图片悬停放大特效,效果非常不错。今天我们要再来分享一款类似的CSS鼠标滑过放大突出效果,只不过之前那个是图片,这次是色块,其实掌握了其CSS原理,任何网页元素都可以实现这种突出放大的CSS3动画特效。效果图如下:
在线预览 源码下载
实现的代码。
html代码:
<div class="container"> <ul class="evenflow sample_1"> <li class="evenflow_scale"> <a href="#" target="_blank"> <img src="/static/imghw/default1.png" data-src="img/1.png" class="lazy" alt="基于CSS3鼠标滑过放大突出效果_html/css_WEB-ITnose" > </a> </li> <li class="evenflow_scale"> <a href="#" target="_blank"> <img src="/static/imghw/default1.png" data-src="img/2.png" class="lazy" alt="基于CSS3鼠标滑过放大突出效果_html/css_WEB-ITnose" > </a> </li> <li class="evenflow_scale"> <a href="#" target="_blank"> <img src="/static/imghw/default1.png" data-src="img/3.png" class="lazy" alt="基于CSS3鼠标滑过放大突出效果_html/css_WEB-ITnose" > </a> </li> <li class="evenflow_scale"> <a href="#" target="_blank"> <img src="/static/imghw/default1.png" data-src="img/4.png" class="lazy" alt="基于CSS3鼠标滑过放大突出效果_html/css_WEB-ITnose" > </a> </li> <li class="evenflow_scale"> <a href="#" target="_blank"> <img src="/static/imghw/default1.png" data-src="img/5.png" class="lazy" alt="基于CSS3鼠标滑过放大突出效果_html/css_WEB-ITnose" > </a> </li> <li class="evenflow_scale"> <a href="#" target="_blank"> <img src="/static/imghw/default1.png" data-src="img/6.png" class="lazy" alt="基于CSS3鼠标滑过放大突出效果_html/css_WEB-ITnose" > </a> </li> </ul> </div>
via:http://www.w2bc.com/article/49705

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?

Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?

Comment ajouter efficacement les effets de course aux images PNG sur les pages Web?

Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?

Quelles sont les implications de sécurité de l'utilisation des iframes et comment puis-je les atténuer?

Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?

Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement?

Comment utiliser le HTML5 & LT; METER & GT; élément pour afficher des données numériques dans une plage?
