CSS开门大吉

最新推荐文章于 2021-08-11 16:34:58 发布
最新推荐文章于 2021-08-11 16:34:58 发布
阅读量224 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KkaBum/article/details/99686165
版权
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>开门大吉</title>
  6.     <style type="text/css">
  7.         .a {
  8.             width: 520px;
  9.             height: 280px;
  10.             position: relative;
  11.             margin: 100px auto;
  12.             perspective: 1000px;
  13.         }
  14.         img {
  15.             display: block;
  16.             width: 520px;
  17.             height: 280px;
  18.             
  19.         }
  20.         div:nth-child(2),div:nth-child(3) {
  21.             width: 50%;
  22.             height: 100%;
  23.             background-color: pink;
  24.             position: absolute;
  25.             border: 1px solid red;
  26.             top: 0;
  27.             transition: all 1s;
  28.         }
  29.         div:nth-child(2)::before ,div:nth-child(3)::before {
  30.             content: "";
  31.             width: 20px;
  32.             height: 20px;
  33.             position: absolute;  
  34.             top: 50%;
  35.             transform: translate(0, -50%);
  36.             border: 1px solid red;
  37.         }
  38.         div:nth-child(2)::before {
  39.             right: 0;                    /*添加门环样式*/
  40.         }
  41.         div:nth-child(3)::before {
  42.             left: 0;
  43.         }
  44.         div:nth-child(2) {
  45.             left: 0;
  46.             transform-origin: left;
  47.         }
  48.         div:nth-child(3) {
  49.             right: 0;
  50.             transform-origin: right;
  51.         }
  52.         div:hover div:nth-child(2){
  53.             transform: rotateY(-90deg);
  54.         }
  55.         div:hover div:nth-child(3){
  56.             transform: rotateY(90deg);
  57.         }
  58.     </style>
  59. </head>
  60. <body>
  61.     <div class="a">
  62.         <img src="sez.jpg">
  63.         <div></div>
  64.         <div></div>
  65.     </div>
  66.     
  67. </body>
  68. </html>

KkaBum
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用CSS3实现开门效果实例
01-19
先来看看效果图 ...css3开门</title> <style type=”text/css”> .door{ position:relative; width:400px; height:300px; overflow:hidden; border:2px solid #000; background:#000;} .door:before,
使用html+css制作的开门的特效
05-28
使用html+css制作的开门的特效
CSS3实现开门大吉效果
weixin_34363171的博客
06-01 844
开门大吉效果的实现的原理 使用css3 中的rotate属性实现旋转效果 使用css3中的transform-origin 属性实现门开的效果 一、HTML 页面布局代码 <section> <div class="door-left"> </div> <div class="door-right"> &...
【CSS】"开门大吉"动画实现
ljs_coding
02-22 930
顾名思义，“开门大吉”指的是鼠标悬浮在块内的时候出现开门效果，显示出底部的图片。 知识点：3d变形、透视、translate移动 效果图： 完整源代码 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ ...
前端实现开门大吉效果（纯CSS）
qq_44862918的博客
06-17 500
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0px; padding: 0px; } body { perspecti...
开门大吉
pingping18的专栏
11-24 194
CSND开通  博客，
3D实现开门大吉
温柔女魔头
01-16 455
HTML部分代码   &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;link rel="stylesheet" hr
element.css文件
02-27
element.css文件
bootstrap.css
01-27
bootstrap的css文件
CSS
04-10
CSS
开门大吉—欢迎来闯关
timilly的博客
12-05 283
众里寻他千百度，蓦然回首答案就在CSDN博客里~~ 在本关中，你要输入门锁密码，方可过关。 这一关的目的是教会你，通过使用多个关键词进行搜索。 此关卡的难度越来越高，你需要开动你的大脑，用你智慧解决这些障碍物。小伙伴们赶快来挑战下自己吧~                                                                           ...
开门成功html,开门大吉.html
weixin_35749545的博客
06-10 230
开门大吉section {width: 440px;height: 300px;border: 1px solid #000;margin: 100px auto;background: url(image/timg.jpg) no-repeat;position: relative;perspective: 1000px; /*2D变3D 给父盒子添加透视效果*/background-si...
[css3] 多背景属性background
qq_14993591的博客
08-11 161
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na
CSS3的开门效果
dfl2099的博客
03-10 775
CSS3的开门效果 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>旋转的狗狗</title> 6 <style type="text/...
CSS3实现开门动画
weixin_30398227的博客
08-26 643
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <title>...
原创html5+css3实现莲动效果
timilly的博客
12-03 282
页面代码  &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;莲动&lt;/title&gt; &lt;script src="js/jquery-3.2.1.js"&gt;&lt;/script&amp
mediapipe-0.8.8.1-cp39-cp39-manylinux_2_17_x86_64.whl
08-11
mediapipe-0.8.8.1-cp39-cp39-manylinux_2_17_x86_64.whl
python爱心代码高级
最新发布
08-11
1. 一行代码画爱心 print('\n'.join([''.join([('Love'[(x-y)%4]if((x*0.05)**2+(y*0.1)**2-1)**3-(x*0.05)**2*(y*0.1)**3<=0 else' ')for x in range(-30,30)])for y in range(15,-15,-1)])) 效果图 2. 用turtle库画爱心加文字 import turtle import math turtle.pen() t=turtle t.up() t.goto(0,150) t.down() t.color('red') t.begin_fill() t.fillcolor('red') t.speed(1) t.left(45) t.forward(150) t.right(45) t.forward(100) t.right(45) t.forward(100) t.right(45) t.forward(100) t.right(45) t.forward(250+math.sqrt(2)*100) t.right (90) t
终极CSS参考指南
"TheUltimateCSSReference - 一本由TommyOlsson和PaulO'Brien编写的英文CSS参考书籍，旨在帮助读者自学CSS。" 这本"TheUltimateCSSReference"是CSS学习者的宝贵资源，由TommyOlsson和PaulO'Brien合作撰写，提供了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值