html图片放大波浪特效,CSS 5种很炫的Hover效果。跳,放大,旋转,淡入

2024-02-23 01:40

本文主要是介绍html图片放大波浪特效,CSS 5种很炫的Hover效果。跳,放大,旋转,淡入,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

给平淡的站点带来活力

hover效果能给网页增加一些动态效果,并且使得站点更具有活力。原来的做法是使用javascript来实现这些动态效果,但是随着CSS3的引入和现代浏览器的支持,我们可以用纯粹的CSS代码来实现这些有趣的效果。所谓的现代浏览器,更多的是指以Mozilla和Webkit为核心的浏览器,IE的表现稍微差强人意,所以请使用FireFox,Safari或者Chrome查看一下的效果。如下就是要介绍的5个非常酷的纯CSS hover 效果。

向上跳跃

0818b9ca8b590ca3270a3433284dd417.png

这种效果非常适合于当页面上有一横排图片的场景,当鼠标hover时就产生波浪一样的效果。

这个效果实现是非常简单的,并且有多种方法实现,如下的核心实现方法是:初始给所有图片设置mergin,当hover时,给相应的图片减少mergin的值,这样就实现了向上跳跃的效果。

这种效果不光可以应用于图片,一般的横向排列的导航栏也可以应用这样的效果。

效果中的透明效果是并不是必须的,不设置透明属性并不影响hover时的跳跃效果,加上透明只是为了让效果更平滑。

CSS代码:

.ex1 img{

border: 5px solid #ccc;

float: left;

margin: 15px;

-webkit-transition: margin 0.5s ease-out;

-moz-transition: margin 0.5s ease-out;

-o-transition: margin 0.5s ease-out;

}

.ex1 img:hover {

margin-top: 2px;

}

层叠与放大

0818b9ca8b590ca3270a3433284dd417.png

这种效果类似于熔岩灯效果,当鼠标从上至下移动时,每个图片都是慢慢地放大然后恢复到原始的状态。

为了实现这样的效果,首先把原始图片显示的时候缩小一点,当鼠标hover时,放大图片的尺寸。

因为图片是居中显示的,所以当鼠标hover时,也增加了图片的margin,这样使得当图片放大时也是居中的效果。

CSS代码

/*Example 2*/ #container {

width: 300px;

margin: 0 auto;

}

#ex2 img{

height: 100px;

width: 300px;

margin: 15px 0;

-webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

}

#ex2 img:hover {

height: 133px;

width: 400px;

margin-left: -50px;

}

文字淡入

0818b9ca8b590ca3270a3433284dd417.png

类似的这种效果,一般是用JavaScript来实现的,当hover其中某个元素时,另一个元素发生一些变化。本例为了实现这一效果,首先把图片和文字放在一个div里,然后设置div的color:transparent和line-height:0px。当hover时,更改color和line-height属性,使得文字显示。

CSS代码

#ex3 {

width: 730px;

height: 133px;

line-height: 0px;

color: transparent;

font-size: 50px;

font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;

font-weight: 300;

text-transform: uppercase;

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

}

#ex3:hover {

line-height: 133px;

color: #575858;

}

#ex3 img{

float: left;

margin: 0 15px;

}

旋转的图片

0818b9ca8b590ca3270a3433284dd417.png

实现这个效果是非常容易的,但是因为这是一个非常重要的效果,尤其对于画廊中的缩略图。这个效果中我们使用了一些较新的CSS样式。这个例子使用了box-shadows,transitions和transforms。transform是实现旋转部分,transition是为了让效果更平滑。

CSS代码

#ex4 {

width: 800px;

margin: 0 auto;

}

#ex4 img {

margin: 20px;

border: 5px solid #eee;

-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);

-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);

box-shadow: 4px 4px 4px rgba(0,0,0,0.2);

-webkit-transition: all 0.5s ease-out;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

}

#ex4 img:hover {

-webkit-transform: rotate(-7deg);

-moz-transform: rotate(-7deg);

-o-transform: rotate(-7deg);

}

淡入和倒影

0818b9ca8b590ca3270a3433284dd417.png

这个效果是相对复杂的效果,首先,设置减少图片的初始的透明度,当hover时,把透明度设置回默认值,另外会有一个图片边缘发光的效果和倒影效果(只在以Webkit为内核的浏览器中起作用)。

如果你对倒影效果不太懂的话,可以参考这篇文章(Image Reflections with CSS)

CSS代码

#ex5 {

width: 700px;

margin: 0 auto;

min-height: 300px;

}

#ex5 img {

margin: 25px;

opacity: 0.8;

border: 10px solid #eee;

/*Transition*/

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

/*Reflection*/

-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));

}

#ex5 img:hover {

opacity: 1;

/*Reflection*/

-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));

/*Glow*/

-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);

-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);

box-shadow: 0px 0px 20px rgba(255,255,255,0.8);

}

总结

经过测试,这些效果在以Webkit为核心的浏览器上表现最出色,Mozilla次之,IE最差,如果要使得在IE9中的效果更好,则需要其它的第三方JS库。以上的这五个纯CSS实现的hover效果,应该会给你带来一些设计上的灵感,你可以综合运用这些CSS样式,并加入一些其他的CSS来产生一些有意思的效果。如果你也有一些非常酷的CSS效果,欢迎参与讨论。

编注

以上的五种CSS Hover效果都应用了最新的CSS3效果,在现代的浏览器中,应用这些CSS能展现出非常漂亮的效果。值得一提的是IE9,IE9不支持transition和transform这两种效果,使得这五种效果在IE9下表现的不佳,寄希望于IE10吧。

滚动过度效果

0818b9ca8b590ca3270a3433284dd417.png

.trans_list {

width: 10%;

height: 64px;

margin:10px 0;

background-color:#486AAA;

color:#fff;

text-align:center;

}

.ease {

...

transition: all 4s ease;

}

.ease_in{

...

transition: all 4s ease-in;

}

.

.

.

.trans_box:hover{

margin-left:89%;

background-color:#BECEEB;

color:#333;

...

border-radius:25px;

...

transform: rotate(360deg);

}

HTML代码:

ease
ease-in
ease-out
ease-in-out
linear

标签悬浮效果

.hover-shadow{

transition: all .3s ease;//延时效果

}

.hover-shadow:hover {

box-shadow: 0 2px 20px rgba(0,0,0,.2) //阴影做的悬浮效果

}

这篇关于html图片放大波浪特效,CSS 5种很炫的Hover效果。跳,放大,旋转,淡入的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/737136

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

防近视护眼台灯什么牌子好?五款防近视效果好的护眼台灯推荐

在家里,灯具是属于离不开的家具,每个大大小小的地方都需要的照亮,所以一盏好灯是必不可少的,每个发挥着作用。而护眼台灯就起了一个保护眼睛,预防近视的作用。可以保护我们在学习,阅读的时候提供一个合适的光线环境,保护我们的眼睛。防近视护眼台灯什么牌子好?那我们怎么选择一个优秀的护眼台灯也是很重要,才能起到最大的护眼效果。下面五款防近视效果好的护眼台灯推荐: 一:六个推荐防近视效果好的护眼台灯的

poj 2187 凸包or旋转qia壳法

题意: 给n(50000)个点,求这些点与点之间距离最大的距离。 解析: 先求凸包然后暴力。 或者旋转卡壳大法。 代码: #include <iostream>#include <cstdio>#include <cstdlib>#include <algorithm>#include <cstring>#include <cmath>#include <s

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo