鼠标悬浮开门关门效果 / JS&CSS特效 [复制链接]

344 0
CSS:' W7 v+ B. j" x" y © 整站源码 cityed.cn
  1. body {1 }( c6 C/ ^8 |- ] © 整站源码 cityed.cn
  2.             box-sizing: border-box;/ X0 `, y+ |. P1 M © https://www.cityed.cn
  3.             padding: 160px 0 0 240px;) K! G: X0 l3 \6 Z0 @0 p
  4.         }
    © https://cityed.cn 1 t$ N) c! S$ h- }7 U3 P. y# f

  5. © 懒人资源 | CITYED.CN   W- q5 z8 F' g# G
  6.         /* 门容器样式 */
    © CITYED.CN 版权所有 " v2 |+ |/ z9 h1 B; @7 y& K
  7.         .doorWrap {& D% G5 e; I1 B* f& ^8 e8 g* o2 v © 整站源码 cityed.cn
  8.             width: 320px;+ Q* a: i' d8 e6 i- E& X © 整站源码 cityed.cn
  9.             height: 320px;
    © https://cityed.cn ) t3 q( b9 v' J0 ~
  10.             border: 1px solid #666;
    © www.cityed.cn   Q/ k* \% h( ?# v  d
  11.             perspective: 500px;; u: Q% {* K6 w! \6 i/ j © https://cityed.cn
  12.             position: relative;; A2 W2 p* m8 z; s8 Q% l © https://www.cityed.cn
  13.             display: flex;
    © cityed.cn 8 \2 x" P1 o- e2 v% R# w
  14.         }
    © https://www.cityed.cn ! G# R& O( A5 s7 u; ]

  15. © www.cityed.cn 8 q. k3 u, ^  [, q2 l# w& @
  16.         /* 左门右门的共有样式 */
    © 整站源码 cityed.cn 1 ?4 A% I3 h+ U: U
  17.         .leftDoor,
    © https://www.cityed.cn * J5 _8 D1 B  _0 g' d2 W
  18.         .rightDoor {2 {$ G8 m* j. C7 B- Z © https://cityed.cn
  19.             width: 50%;
    © https://cityed.cn 0 p$ Q* \' C7 K7 D# @4 \, s
  20.             height: 100%;
    © 懒人资源 | CITYED.CN # z# G& ^6 t8 Z0 f2 J0 y# V& t
  21.             background-color: rgb(194, 37, 37);
    © 整站源码 cityed.cn : @" ~1 q# w1 p
  22.             transition: 1.2s;
    © https://cityed.cn , v6 s( u( ?1 Q- p2 f
  23.             z-index: 2;2 A' v" Q/ z  N5 i. e7 v © 懒人资源 | CITYED.CN
  24.             display: flex;
    © www.cityed.cn 0 g9 W+ L4 c- |4 ^$ T" X. Z
  25.             justify-content: center;& n; n8 D: [/ H, m- S2 {& G+ C © 懒人资源 | CITYED.CN
  26.             align-items: center;
    © https://www.cityed.cn * z; A9 a9 L* d% K
  27.             border: 1px solid #333;
    © CITYED.CN 版权所有 . |" P% ?  j; a& G
  28.         }
    © https://cityed.cn 6 h+ W! }* i& U' V9 Q7 f
  29. 6 C5 a. e9 }! b+ ^' W © https://cityed.cn
  30.         /* 设置旋转元素的基点，左边大门以左侧为基准点旋转 */- |6 C$ r6 w! y
  31.         .leftDoor {
    3 W' {% l$ @0 A3 ~5 V+ s3 }1 G! }
  32.             transform-origin: left;
    © https://cityed.cn 1 J! x/ o6 M1 g0 X
  33.         }
    © 懒人资源 | CITYED.CN ' P: e3 K6 V' h0 w

  34. © https://cityed.cn ' h+ L/ L& b! m0 I: h, P6 z" H) K7 Y
  35.         /* 设置旋转元素的基点，右边大门以右侧为基准点旋转 */, a% v! L  z# z( M © cityed.cn
  36.         .rightDoor {
    6 A' m. h& E0 e. l7 n7 x. ]4 |' Q& S5 ~; I
  37.             transform-origin: right;2 w' s4 [( i1 d3 s. k © cityed.cn
  38.         }. A+ N- V* \! u( K5 W; X © cityed.cn

  39. © www.cityed.cn 1 f3 T; g2 D4 ]7 p4 I2 S
  40.         /* 当鼠标悬浮的时候，设置开门的幅度，左门往左侧开 */- n% j* e5 H5 B © www.cityed.cn
  41.         .doorWrap:hover .leftDoor {7 y% b4 H3 [5 h5 m% ?, s! U © https://www.cityed.cn
  42.             transform: rotateY(-130deg);$ k7 F- X2 E4 F9 o8 _ © https://www.cityed.cn
  43.         }" B+ h- d. M( k) h7 s; [. Y9 ? © 懒人资源 | CITYED.CN

  44. © 懒人资源 | cityed.cn : T9 _, Q4 z, ?  e
  45.         /* 右门往右侧开 */3 ?5 g0 q! L( c( z, W/ S © 懒人资源 | CITYED.CN
  46.         .doorWrap:hover .rightDoor {
    © 懒人资源 | cityed.cn , Y" V% L  u5 t& x6 F6 H* V
  47.             transform: rotateY(130deg);
    © 整站源码 cityed.cn . S8 Z: x$ }, g8 \
  48.         }& T4 P6 P6 T9 \4 g8 x © 懒人资源 | cityed.cn
  49. . T+ I+ l& r0 L$ ^. f © https://www.cityed.cn
  50.         /* 内容区的定位层级稍微低一些 */6 P. P9 `! T6 h$ r3 c$ t3 r © 懒人资源 | cityed.cn
  51.         .content {
    1 ?2 n/ l) I4 R/ v' O
  52.             position: absolute;
    © 懒人资源 ' B$ C/ d3 S6 o4 X6 O3 c) n- I6 \# `2 }
  53.             z-index: 1;
    © CITYED.CN 版权所有 3 A9 N' y1 I) L
  54.             width: 100%;' {9 y5 S$ A0 J © 懒人资源 | CITYED.CN
  55.             height: 100%;, k3 O4 C  F5 S( b4 a; } © www.cityed.cn
  56.             background-color: #abf;
    © https://cityed.cn " j; g, G  t2 T1 }) M! f* `
  57.             display: flex;! L! V7 l/ Q& l9 Y © 懒人资源 | cityed.cn
  58.             justify-content: center;
    © 懒人资源 | cityed.cn ' t8 Z) u: \7 `( V
  59.             align-items: center;
    © cityed.cn % N6 Q" N% M- [! n
  60.         }
复制代码
9 f8 C! p: A( k7 I) y © cityed.cn
* H2 |& d# p3 m, m5 J: [5 |2 S © 懒人资源
代码：
© https://www.cityed.cn " X. \% F; v4 d2 E
  1. <div class="doorWrap">
    © 懒人资源 * U; U( q( V/ Q9 P2 k! g1 U% |
  2.         <div class="leftDoor">左门</div>! b8 o# s+ V2 p* R% v: N © 整站源码 cityed.cn
  3.         <div class="rightDoor">右门</div>
    © https://www.cityed.cn & ?' \0 L( P' Y8 A3 ?# u; u! E
  4.         <div class="content">欢迎光临，客官里边请...</div>
    © https://www.cityed.cn ( `( k: @+ \) H, j0 x+ A
  5.     </div>
复制代码

© www.cityed.cn ( ?8 S5 }6 O' y( ~9 I' m0 l- V; `" j1 @3 i  ` © 懒人资源 | CITYED.CN
展开阅读全文

相关话题 聚合阅读

文字特效

懒人资源 | 常见问题解答

关于解压密码错误？
本站资源大多存放于各大网盘，一般不会设置加密。如需解压密码的，一般均会在附件中有专门的说明。若发现解压密码错误，请联系客服进行处理!
关于链接地址失效？
请您及时复制资源链接地址联系我们的客服，客服看到后将第一时间更新链接地址并告知您重新下载，若无法更新的，将安排给您退还相关积分，请谅解!
关于售后及支持？
由于代码的运行具有不可预见性，本站不保证代码完整可运行，不提供相关的技术支持和售后服务，另行注明的除外。如果确需技术支持的，请联系客服确定服务价格!
关于搭建技术服务？
由于搭建服务比较费时费力，所以本站除另行说明的其他均不提供搭建服务。本站分享代码纯属兴趣爱好，不以盈利为目的，请勿咨询有没有搭建服务，谢谢理解。
关于资源积分消费？
本站所有资源积分均为本站收集资源的辛苦费，不代表资源本身的价值，软件是高智慧高价值的商品，不可能是白菜价。本站资源售价只是赞助，收取积分仅用于维持本站的日常运营及维护！
关于侵权免责声明？
本站尊重互联网版权体系，本站部分图片、文章大部分转载于互联网、所有内容不代表本站观点、不对文章中的任何观点负责、转载的目的只用于给网民提供信息阅读，无任何商业用途，所有内容版权归原作者所有，如有侵权，请尽快联系客服，核实后我们会立即删除、维护您的权益。非常感谢您的理解。
关于学习安全提示？
提高安全防范意识，共创和谐平安懒人；懒人倡导分享原生资源，资源使用前务必进行病毒查杀及代码安全检查；请勿点击访问源码中的不明链接或扫码不明二维码，以免给您的身心及财产造成损失；以上均属您的个人行为，与懒人资源无关，在此我们深表歉意!!
关于禁止商业提示？
本站所发布的一切资源仅限用于学习和研究目的；不得将资源及内容用于商业或者非法用途，否则，一切后果自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，还请支持正版软件。

举报 回复

返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 中文注册

本版积分规则

视觉中国+ 关注
高级会员
  • 主题118
  • 帖子120
  • 积分884
Ta最新发表
发表话题 快速回复

JS&CSS特效

话题: 135 阅读: 14 W+ 互动: 15 W+

关注 收藏 点赞
© 2020-2026 懒人资源[CITYED.CN] 版权所有 All Rights Reserved. | 联系我们：QQ 1986 406 203 | 电子邮箱：pub@cityed.cn | 技术支持: 懒人资源[CITYED.CN] , 基于Discuz!
快速回复 返回顶部 返回列表
现在加入我们，拥有懒人资源一站式通行证！马上 中文注册或 账号登陆