CSS3 制作的悬停缩放特效


Posted in HTML / CSS onApril 13, 2021

实现代码:

html

<link href='https://fonts.googleapis.com/css?family=Roboto:100,400,300,500,700' rel='stylesheet' type='text/css'>

<div align="center" class="fond">
<div style="width:1000px;">

<div class="style_prevu_kit" style="background-color:#cb2025;"></div>
<div class="style_prevu_kit" style="background-color:#f8b334;"></div>
<div class="style_prevu_kit" style="background-color:#97bf0d;"></div>
<div class="style_prevu_kit" style="background-color:#00a096;"></div>
<div class="style_prevu_kit" style="background-color:#93a6a8;"></div>


<div 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></div>
        <a href="http://www.wifeo.com/code" style="text-decoration:none;" target="_blank"><div style="  color:#b5e6e3; font-weight:300; font-size:20px; font-family:'Roboto';">三水点靠木</div></a>
  
</div>
</div>

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 悬停缩放的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 HTML / CSS
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
纯css3实现走马灯效果
Dec 26 HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 HTML / CSS
canvas像素画板的实现代码
Nov 21 HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 HTML / CSS
深入浅析HTML5中的SVG
Nov 27 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
CSS3 制作精美的定价表
Apr 06 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 HTML / CSS
CSS3 制作的书本翻页特效
浅谈移动端中的视口(viewport)的具体使用
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
CSS3 制作的彩虹按钮样式
CSS中em的正确打开方式详解
几款流行的HTML5 UI框架比较(小结)
css 中多种边框的实现小窍门
You might like
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
Add a Formatted Table to a Word Document
2007/06/15 Javascript
js打造数组转json函数
2015/01/14 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
javascript适合移动端的日期时间拾取器
2015/11/10 Javascript
JavaScript数组迭代方法
2017/03/03 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
剖析Angular Component的源码示例
2018/03/23 Javascript
实例讲解Vue.js中router传参
2018/04/22 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
Python实现Kmeans聚类算法
2020/06/10 Python
Linux下python制作名片示例
2018/07/20 Python
Python同步遍历多个列表的示例
2019/02/19 Python
python多线程下信号处理程序示例
2019/05/31 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
Pandas分组与排序的实现
2019/07/23 Python
Python多个装饰器的调用顺序实例解析
2020/05/22 Python
python opencv实现简易画图板
2020/08/27 Python
计算机专业自我鉴定
2013/10/15 职场文书
优良学风班申请材料
2014/02/13 职场文书
高中学生干部学习的自我评价
2014/02/21 职场文书
初中学生评语大全
2014/04/24 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
公务员年度考核评语
2014/12/31 职场文书
农村党支部承诺书
2015/04/30 职场文书
歼十出击观后感
2015/06/11 职场文书