css3动画
文章平均质量分 71
爱编程的兔子
很帅
展开
-
CSS3动画之loading-2
loading效果gif图如下: 代码如下: css:* { padding: 0; margin: 0;}.loading_box { padding-top: 120px;}.loading { position: relative; width: 400px; height: 40px; background-color: #149fee; bord原创 2017-12-08 19:16:54 · 417 阅读 · 0 评论 -
纯CSS3动画之上下翻转
不做多的解释,我们先看效果,然后上代码。 效果如下: 代码如下:<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">*{ padding: 0; margin: 0;}a{ text-decoration: none;}.t原创 2017-11-30 18:03:50 · 5173 阅读 · 0 评论 -
纯CSS3动画之左右翻转
不做多的解释,我们先看效果,然后上代码。 效果如下: 代码如下:<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">*{ padding: 0; margin: 0;}a{ text-decoration: none;原创 2017-11-30 18:07:55 · 14952 阅读 · 0 评论 -
纯CSS3动画之旋转的立方体
如何绘制正方体或者长方体,正方体和长方体原理是相似的,此处我们以正方体为例。1、绘制正方体绘制效果: html结构:<div class="cubic"> <span class="before"></span> <span class="after"></span> <span class="top"></span> <span class="bottom"></原创 2017-12-01 11:26:16 · 762 阅读 · 0 评论 -
CSS3动画之loading-1
loading效果图如下: 代码如下:* { padding: 0; margin: 0;}body { background: #ffffff;}.wrap { position: relative; width: 200px; height: 250px; margin: 30px; -webkit-border-radius: 6px; borde原创 2017-12-01 17:50:12 · 516 阅读 · 0 评论 -
CSS3动画之loading-3
效果gif图如下: 代码如下:<div class="loading_box"> <div class="loading"></div></div>* { padding: 0; margin: 0;}.loading_box { width: 30px; padding: 60px 100px 140px; background: #ac2aef;}.loa原创 2017-12-11 20:36:11 · 280 阅读 · 0 评论 -
CSS3效果之3D字体
效果图如下: csshtml,body,p{ padding: 0; margin: 0;} html,body{ height: 100%;}body{ display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: ce...原创 2018-02-22 15:10:12 · 7399 阅读 · 0 评论 -
纯CSS制作旋转的太极图
效果如下: html<div class="universe-wrap"> <div class="universe"> <div></div> <div></div> </div></div&原创 2018-02-23 15:46:58 · 1123 阅读 · 0 评论 -
CSS3之沿环形路径移动
实现环形路径移动,我们主要利用以下两个属性:animation-originrotate(1turn)通用CSS样式:.round{ width: 200px; height: 200px; border-radius: 100%; background: lightpink; padding: 20px;}.move{ d...原创 2018-08-16 20:42:53 · 5469 阅读 · 0 评论