css3制作模块变大的效果

最新推荐文章于 2022-09-06 13:54:15 发布
最新推荐文章于 2022-09-06 13:54:15 发布
阅读量145 收藏
点赞数

点击(此处)折叠或打开

  1. <!DOCTYPE HTML>
  2. <html lang=\"en-US\">
  3. <head>
  4. <meta charset=\"UTF-8\">
  5. <title>css3制作模块变大的效果丨</title>
  6. </head>
  7. <body>
  8.         <style type=\"text/css\">
  9.         *{margin:0;padding:0px;}
  10.     body{background:#b1b1b1;font-family:Arial;font-size:125%;color:#202020;}
  11.     li{position:relative;list-style:none;float:left;width:235px;height:220px;margin:10px 0 0 10px;cursorointer;}
  12.     .tips{width:800px;margin:0 auto;line-height:24px;padding-top:10px;font-size:14px;}
  13.         .bredcolor{color:#fff;}
  14.     .module_change{width:980px;margin:0 auto;}
  15.     .module_change section{position:absolute;background:#ccc;padding:10px;text-align:center;
  16.         -webkit-animation:module_change .4s ease-in;
  17.         -webkit-animation-fill-mode:forwards;
  18.     }
  19.     li section:hover{background:red;-webkit-transition:background .3s linear;}
  20.     @-webkit-keyframes module_change{
  21.         0%{width:0px;height:0px;left:50%;top:50%;line-height:0px;opacity:0;}
  22.         100%{width:215px;height:200px;left:0%;top:0%;line-height:200px;opacity:1;}
  23.     }
  24.         </style>
  25.         <section class=\"tips\">
  26.         本效果有多种方法实现:但是最简单的就是在外面套一层。原因:<br>
  27.         css3中大部分的效果是离不开position:absolute的。<br>
  28.         案例中的的效果需要变宽变高，并且是由中间扩散的。<br>
  29.         所以为了统一，我就在外面家了一个框，告诉他，这个是运动的标准。<br>
  30.         接下来就是运用什么属性了！变宽变位置肯定离不开keyframes，当然也可以运用transition。
  31.          
  32. <br><font color=black>▲　目前IE8及以前版本不兼容CSS3，请使用IE9/火狐/Chrome浏览器运行本效果。<br><hr><p align=\"center\"></p></font>

  34.         </section>
  35.         <section class=\"module_change\">
  36.         <ul>
  37.             <li><section>1</section></li>
  38.             <li><section>2</section></li>
  39.             <li><section>3</section></li>
  40.             <li><section>4</section></li>
  41.             <li><section>5</section></li>
  42.             <li><section>6</section></li>
  43.             <li><section>7</section></li>
  44.             <li><section>8</section></li>
  45.         </ul>
  46.     </section>
  47. </body>
  48. </html>

点击(此处)折叠或打开

  1. <!DOCTYPE HTML>
  2. <html lang=\"en-US\">
  3. <head>
  4. <meta charset=\"UTF-8\">
  5. <title>css3制作模块变大的效果丨芯晴网页特效丨CsrCode.CN</title>
  6. </head>
  7. <body>
  8.         <style type=\"text/css\">
  9.         *{margin:0;padding:0px;}
  10.     body{background:#b1b1b1;font-family:Arial;font-size:125%;color:#202020;}
  11.     li{position:relative;list-style:none;float:left;width:235px;height:220px;margin:10px 0 0 10px;cursorointer;}
  12.     .tips{width:800px;margin:0 auto;line-height:24px;padding-top:10px;font-size:14px;}
  13.         .bredcolor{color:#fff;}
  14.     .module_change{width:980px;margin:0 auto;}
  15.     .module_change section{position:absolute;background:#ccc;padding:10px;text-align:center;
  16.         -webkit-animation:module_change .4s ease-in;
  17.         -webkit-animation-fill-mode:forwards;
  18.     }
  19.     li section:hover{background:red;-webkit-transition:background .3s linear;}
  20.     @-webkit-keyframes module_change{
  21.         0%{width:0px;height:0px;left:50%;top:50%;line-height:0px;opacity:0;}
  22.         100%{width:215px;height:200px;left:0%;top:0%;line-height:200px;opacity:1;}
  23.     }
  24.         </style>
  25.         <section class=\"tips\">
  26.         本效果有多种方法实现:但是最简单的就是在外面套一层。原因:<br>
  27.         css3中大部分的效果是离不开position:absolute的。<br>
  28.         案例中的的效果需要变宽变高，并且是由中间扩散的。<br>
  29.         所以为了统一，我就在外面家了一个框，告诉他，这个是运动的标准。<br>
  30.         接下来就是运用什么属性了！变宽变位置肯定离不开keyframes，当然也可以运用transition。
  31.           qq群:197326136
  32. <br><font color=black>▲　目前IE8及以前版本不兼容CSS3，请使用IE9/火狐/Chrome浏览器运行本效果。<br><hr><p align=\"center\">本特效由 <a href=\"http://www.CsrCode.cn\" target=\"_blank\">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</p></font>

  34.         </section>
  35.         <section class=\"module_change\">
  36.         <ul>
  37.             <li><section>1</section></li>
  38.             <li><section>2</section></li>
  39.             <li><section>3</section></li>
  40.             <li><section>4</section></li>
  41.             <li><section>5</section></li>
  42.             <li><section>6</section></li>
  43.             <li><section>7</section></li>
  44.             <li><section>8</section></li>
  45.         </ul>
  46.     </section>
  47. </body>
  48. </html>


来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/29737856/viewspace-1218559/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/29737856/viewspace-1218559/

cuikuang6306
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用纯CSS3打造立体提示模块的效果实现(图) 附
09-25
标题中的“用纯CSS3打造立体提示模块的效果实现”指的是使用CSS3的特性来创建具有立体感的提示信息模块，而无需依赖图像。这个技术基于CSS3的新特性，如渐变（gradients）、伪元素（pseudo-elements）、变换...
CSS3制作Facebook动画表情特效代码
03-20
在本文中，我们将深入探讨如何使用CSS3技术来制作类似Facebook的动画表情特效。CSS3是层叠样式表（Cascading Style Sheets）的第三个主要版本，它引入了许多新的特性和功能，使得网页设计和开发更加灵活且富有表现力...
实现div旋转
world_zhishijie的博客
04-01 733
{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari 和 Chrome */ -o-transform:rotate(7deg); /* Opera
用css3制作模块变大的效果
zhanghuijie523的专栏
07-02 436
用css3制作模块变大的效果-css3实例站 *{margin:0;padding:0px;} body{background:#b1b1b1;font-family:Ar
CSS实现数字滚动变化
bidepanm的博客
09-06 2713
数字滚动变化
css3数字滚动特效简单实现
Cting1997的博客
04-29 1万+
放在大屏里面的数字滚动特效的简单实现， 思路参考：https://blog.csdn.net/nidunlove/article/details/78257549 结合业务需求和自己的思考拿vue写了一遍，有些地方实现逻辑不一样，代码也简洁很多 效果图： 附上代码： <template> <div class="box" :key="key"> <div...
CSS3制作3D图片立方体旋转特效特效代码
03-20
总的来说，CSS3制作3D图片立方体旋转特效是利用了CSS3的强大功能，包括3D变换、过渡效果和伪类选择器等，创造了一个交互性强且视觉效果出众的网页元素。通过理解和实践这些技术，开发者能够增强网页的动态性和用户...
CSS3制作了一个动画导航效果(鼠标悬浮会放大).zip
11-02
在本项目中，"CSS3制作了一个动画导航效果(鼠标悬浮会放大)"，我们主要探讨的是如何利用CSS3的特性来创建一个具有交互性的导航菜单，即当鼠标悬停在菜单项上时，该菜单项会呈现出放大的动画效果。CSS3作为现代网页...
纯CSS3复古磁带唱片动画特效
07-14
【纯CSS3复古磁带唱片动画特效】是一种利用现代CSS3技术实现的视觉效果，它旨在重现旧时代的盒式磁带播放器的转动动画。在网页设计中，这种动画可以增添一种独特的怀旧氛围，吸引用户的注意力，提高用户体验。本文将...
CSS3属性
SanPhantom的博客
08-29 2904
CSS3属性 CSS 用于控制网页的样式和布局。CSS3 是最新的 CSS 标准。 \1. 选择器 2.盒模型 3.背景和边框 4.文字特效 5.2D/3D转换 6.过渡 7.动画 8.透明度 CSS3高级选择器 p:first-of-type : 返回指定p元素的第一个 p:last-of-type : 返回指定p元素的最后一个 p:first-c...
div常用效果方法-transform
weixin_30788731的博客
12-23 729
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div:first-of-type{ width: 200px; height: 200px; back...
CSS如何实现数字分页效果
萌萌的It人 www.itmmd.com
05-21 1227
CSS如何实现数字分页效果:建议:尽可能的手写代码，可以有效的提高学习效率和深度。相当数量的网站都使用数字分页效果，例如本站的分页也是采用此方式，还算是比较美观使用吧。代码实例如下: DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra
php如何放大特定字,css怎么实现字体放大特效？（首字符变化代码实测）
weixin_30838971的博客
03-12 224
css在网页制作中有着在非常重要的作用，一个页面或者页面中的一篇文章除了内容上的吸引力，如何在样式上抓住用户的眼球呢？比如本篇文章就是介绍css字体放大的特效及css首字符放大的效果展示实现。有需要的朋友可以参考下。css字体放大特效具体代码示例如下：首字母放大测试This is the CSS testThis is the CSS test这是一个css测试style.css代码如下：body...
HTML实现 ul li标题栏放大效果
拼命小李博客
10-28 1996
效果截图: ` css3-放大突出效果 123 123 123 123 123 `...
css ul li 导航条水平显示
杂七杂八
12-02 1万+
css 里面有个属性叫做 display , 能够实现许多效果。 比如 display:block, 即 用要显示的内容，把 width 填满,而不是默认的  有多长 显示多长 display:inline, 则是 取消前后换行符 标签组成的 导航条，默认情况下 会 竖直显示。可以靠 display:inline 来做到水平显示。 更多 display 的功能 ，可以参考 文档 ，搜索
CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）
热门推荐
李海江的博客
12-14 4万+
CSS3的transform:scale()可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。效果如下图所示：1、当未鼠标未放到图片上的效果： 2、当鼠标放到图片上后(放大的过程是有动画过渡的，这个过渡的时间可以自定义)：
css3宽度变大动画_CSS3 — 新增属性(一)
weixin_39624700的博客
11-22 671
一、边框圆角border-radius属性，值可以是一个px为单位的数值，也可以是%为单位的百分比数值。 • 属性名：border-­radius • 作用：设置边框的圆角。 • 属性值：可以是像素值，或者百分比，百分比参考的是盒子整体宽度、高度的百分比。单一属性• border-top-left-radius: 半径; • border-top-right-radius: 半径; • b...
css放大缩小怎么实现,如何利用css实现放大缩小关闭效果
weixin_33933280的博客
08-04 1185
先来看一下效果图：(推荐教程：CSS教程)代码示例如下： 缩小 放大 关闭 export default {data() {return {flag_fullpageWebView: 1};}}; .windowAction {margin-top: -5px;-webkit-app-region: no-drag;min-width: 70px;text-align: right;butto...
运用css3中的动画和变形以及给出的素材制作一个唱片播放模块,效果如图所示。当页
最新发布
12-06
为了制作一个唱片播放模块，我们可以运用CSS3中的动画和变形来实现。首先，我们可以使用图片素材作为唱片的背景，并利用CSS3中的旋转和缩放变形属性，让唱片看起来像在旋转播放一样。 其次，我们还可以添加一些音符...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值