css3简单几步画一个乾坤图
效果如上,鼠标移上去会有动画。
代码如下非常简单:
- <html>
- <head>
- <style>
- .outer{height:100px;width:200px;border-radius:100px 100px 0px 0px;border:solid 1px #666;border-bottom:none; margin:0 auto;background:#fff;overflow:hidden;}
- .inner{width:300px;height:100px;border-radius:50px 0px 0px 50px;margin-left:50px;background:#000;}
- .inner1{width:10px;height:10px;border-radius:5px;background:#fff;margin:30px 0px 0px 45px;float:left;}
- .reversal{background:#000;-webkit-transform:rotate(180deg);transform:rotate(180deg);/*-webkit-filter:invert(1);*/}
- .reversal .inner{background:#fff;}
- .reversal .inner1{background:#000;}
-
- .outp{position:relative;margin:0 auto;width:200px;height:200px;}
- .outp:hover .qk1{-webkit-transform:scale(1.5) rotate(180deg);transform:scale(1.5) rotate(180deg);opacity:0;}
- .dqk{position:absolute;top:0px;left:0px;}
- .qk1{transition:300ms;}
- </style>
- </head>
- <body>
- <table style="width:100%;height:100%;">
- <tr><td>
-
- <div class="outp">
- <div class="dqk">
- <div class="outer">
- <div class="inner">
- <div class="inner1"></div>
- </div>
- </div>
- <div class="outer reversal" >
- <div class="inner">
- <div class="inner1"></div>
- </div>
- </div>
- </div>
- <div class="dqk qk1">
- <div class="outer">
- <div class="inner">
- <div class="inner1"></div>
- </div>
- </div>
- <div class="outer reversal" >
- <div class="inner">
- <div class="inner1"></div>
- </div>
- </div>
- </div>
- </div>
- </td></tr>
- </table>
- </body>
- </html>
步骤就四步:
1:先写半边,再复制一份在它下面
2:把下面半边旋转180度,transform:rotate(180deg);
4:接着再复制一份完整的乾坤图,要注意叠在一起,然后设置一个动画就好了,我这里的动画是放大+透明transform:scale(1.5) rotate(180deg);
好了,这就写完了。我为什么画乾坤图呢,是因为我名字里面有个坤咯。
【css3简单几步画一个乾坤图】相关文章
7. 通过Ionic构建一个简单的混合式(Hybrid)跨平台移动应用
8. 利用HTML5与jQuery技术创建一个简单的自动表单完成
9. 一个简单的冻结HTML表格标题jQuery插件Freezeheader
10. 利用HTML5与jQuery技术创建一个简单的自动表单完成
本文来源:https://www.51html5.com/a1047.html
﹝css3简单几步画一个乾坤图﹞相关内容
- CSS3实现简单的动画图片说明效果
- 超简单的纯CSS3加载中效果
- 使用jQuery和CSS3创建一个全屏幕幻灯效果
- 如何建立一个样式新颖的CSS3搜索框
- 用CSS3制作一个令人印象深刻的产品展示
- 使用jQuery和CSS3实现一个数字时钟
- CSS3+jQuery的一个丰富多彩时钟
- 一个按钮引发的css3知识
- 一个轻量级CSS3动画库:JX.Animate
- 使用jQuery和CSS3创建一个全屏幕幻灯效果