css3动画按钮加光晕效果(CSS3 制作的悬停缩放特效)
类别:Web前端 浏览量:2335
时间:2022-01-14 02:15:17 css3动画按钮加光晕效果
CSS3 制作的悬停缩放特效实现效果: 实现代码:html
<link href='https://fonts.googleapis.com/css?family=Roboto:100,400,300,500,700' rel='stylesheet' type='text/css'> <li align="center" class="fond"> <li style="width:1000px;"> <li class="style_prevu_kit" style="background-color:#cb2025;"></li> <li class="style_prevu_kit" style="background-color:#f8b334;"></li> <li class="style_prevu_kit" style="background-color:#97bf0d;"></li> <li class="style_prevu_kit" style="background-color:#00a096;"></li> <li class="style_prevu_kit" style="background-color:#93a6a8;"></li> <li style=" padding:5px; color:#b5e6e3; font-weight:300; font-size:30px; font-family:'Roboto';padding-top:20px;">jb <font style="font-weight:400;">51</font></li> <a href="http://www.wifeo.com/code" style="text-decoration:none;" target="_blank"><li style=" color:#b5e6e3; font-weight:300; font-size:20px; font-family:'Roboto';">开心学习网</li></a> </li> </li>
css3
.fond{position:absolute;padding-top:85px;top:0;left:0; right:0;bottom:0; background-color:#00506b;} .style_prevu_kit { display:inline-block; border:0; width:196px; height:210px; position: relative; -webkit-transition: all 200ms ease-in; -webkit-transform: scale(1); -ms-transition: all 200ms ease-in; -ms-transform: scale(1); -moz-transition: all 200ms ease-in; -moz-transform: scale(1); transition: all 200ms ease-in; transform: scale(1); } .style_prevu_kit:hover { box-shadow: 0px 0px 150px #000000; z-index: 2; -webkit-transition: all 200ms ease-in; -webkit-transform: scale(1.5); -ms-transition: all 200ms ease-in; -ms-transform: scale(1.5); -moz-transition: all 200ms ease-in; -moz-transform: scale(1.5); transition: all 200ms ease-in; transform: scale(1.5); }
以上就是CSS3 制作的悬停缩放特效的详细内容,更多关于CSS3 悬停缩放的资料请关注开心学习网其它相关文章!
您可能感兴趣
- css3渐变背景图片(css3实现背景图片半透明内容不透明的方法示例)
- jq控制css样式(css3模拟jq点击事件的实例代码)
- JavaScript css3实现简单视频弹幕功能(JavaScript css3实现简单视频弹幕功能)
- css3怎么改成3d(灵活运用CSS3特性绘制简易版围棋效果)
- html5表单元素自带验证功能(纯CSS3实现表单验证效果非常不错)
- css3中过渡动画的属性(css3 中实现炫酷的loading效果)
- css3 media媒体查询
- css3左右移动动画效果(CSS3鼠标悬浮过渡缩放效果)
- 微信小程序图片加特效(微信小程序实现可实时改变转速的css3旋转动画实例代码)
- css3边框阴影的属性(css3 border-radius属性详解)
- css3三维模型(CSS3系列之3D制作方法案例)
- 动画用css3还是js(前端制作动画的几种方式css3,js)
- css3滤镜过渡效果代码(CSS3实现的3D隧道效果)
- css3字体怎么写(css3个性化字体_动力节点Java学院整理)
- css3 box-sizing
- css3右侧栏伸缩效果(使用CSS3实现环形进度条效果)
- 你只要花上20天记单词,英语成绩就能从57提到100(你只要花上20天记单词)
- 夕云天际飞,亢龙化太极(夕云天际飞亢龙化太极)
- 爱情可以当饭吃吗(怎么回复)
- 高考数学题(高考数学题基础题占多少分)
- 没钱只能吃土(没钱要吃土了幽默短信发朋友圈)
- 今年考高会很难吗(今年高考会考试吗)
热门推荐
- vuejs过滤器使用教程(vue3删除过滤器的原因)
- python怎么查看函数的返回值(python在回调函数中获取返回值的方法)
- python队列快速排序(python按照多个条件排序的方法)
- python做了一个自动翻译的小工具(Python 20行简单实现有道在线翻译的详解)
- python迭代函数(详解Python中的内建函数,可迭代对象,迭代器)
- serv-u兼容性(解决IIS和Serv-U冲突的问题[Serv-U 7.0])
- apache安全配置使用教程(正确配置与维护Apache安全性设置方法)
- python实现在同一电脑上tcp通信(Python两台电脑实现TCP通信的方法示例)
- php关注公众号发送消息(php实现QQ小程序发送模板消息功能)
- 如何使用docker启动tomcat(Docker容器上用DockerFile部署多个tomcat服务的步骤)