纯HTML+CSS写出一颗会飘动的树,有没有惊艳到你呢?
前言
使用HTML+CSS能写出什么惊人的效果呢?
针对这个问题,我总会看到类似的回答,比如没有JS,前端永远都是静态的;HTML5要搭配JS,要不然一文不值。
JS固然强大,但CSS也并非一文不值,这里我就要为CSS3鸣不平了,说出上面那些回答的人可能真的不了解CSS的强大之处。
今天这篇文章我们就一起来看看使用纯HTML+CSS如何写出一棵会飘动的树吧,看看你有没有被惊艳到。
文章末尾附有Github源码地址。
CSS
会飘动的树-原型
首先我们来看看这棵树的原型图吧。
原型图
然后我们再去一步步分析下这个图是如何实现的吧。
原理分析
整棵树的HTML部分实际是由一系列的DIV构成,每个父DIV内部包含两个子DIV,代表左右分叉的树枝,然后一层层往下,形成类似二叉树的结构。
通过CSS的scale属性,给每个子DIV元素缩小宽高比例,实际看起来就是树枝越往外层越细的效果。
最后给左右两侧的树枝不同的动画效果,就可以看出整棵树在跳动的效果了。
图形拆分
将整个图形进行拆分,一整颗大树实际上是由很多的树枝组成,我们先来看看单根树枝是如何实现的。
拆分后的图形效果是这样的。
拆分后
只要我们将这一根树枝的实现原理弄懂了,就可以很容易的知道整棵树是如何实现的了。
HTML部分的代码实际都是由一系列的DIV构成。
每一层DIV下面有两个子DIV,这里因为只展示了一根树枝,所以看到的父DIV只有一个子DIV。
CSS代码
CSS部分的代码是整棵树实现的核心。
最外层树根DIV基本属性
最外层DIV也是树根,它的基本属性很重要。包含宽度和高度,定位信息,设置动画。
基本CSS属性
我们定义的树根DIV其实是水平状态的,所以需要再额外加上一个动画让树根DIV旋转成垂直状态。
树根DIV
左右树枝DIV
每个div下面的第一个子div,表示的是树枝的右侧分支,通过上面基本CSS属性已经设置了一个rot动画。
第二个子div,表示的是树枝的左侧分支,需要设置另外一个动画rot-inv。
左侧分支
树根动画rot-root
树根动画主要是设置旋转角度,将水平的div,旋转为垂直方向的div,增加了正负5度的偏差,就会有树根左右摇动的效果。
树根动画
左侧树枝动画
左侧树枝的动画效果包括逆时针旋转一定的角度,同时会通过scale属性缩小宽高,表现出树枝越来越细的效果。
左侧树枝动画
右侧树枝动画
右侧树枝动画效果包括顺时针旋转一定的角度,同时通过scale属性缩小宽高,表现出树枝越来越细的效果。
右侧树枝动画
这个项目到这里就算是做完了,想要完整代码自己学习练手的小伙伴进我的群自助领取,已经上传到学习群里了:640633433,欢迎初学和进阶中的小伙伴。
至此,所有部分的代码就讲解完毕了。如果运行完成后,就可以得到文章一开始‘摇动的树’的效果了。
纯HTML+CSS写出一颗会飘动的树,有没有惊艳到你呢?的更多相关文章
- css写出0.5px边框(一)
在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...
- css写出三角形(兼容IE)
css写出三角形 利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; bo ...
- html+css写出类似word目录样式的内容
word目录的格式里这种很常见,要用html+css写出来刚开始还有点懵. 左右两边都是内容撑开宽度,中间内容的宽度也不是确定的,也是随着左右两边的内容动态变化的. 最终解决思路是,给右边内容加上白色 ...
- 用纯css写出三角形
1.新建一个元素,随便什么元素,不过我习惯性的会用块元素来做.如果行内元素就display:block它.<div class="triangle"></div& ...
- 不用任何图片,只用简单的css写出唯美的钟表,就问你行吗?
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAGHCAIAAABJR31QAAAgAElEQVR4nOy9aXhc1ZUurPvcH7f73n ...
- 仿淘宝左侧菜单导航栏纯Html + css 写的
这俩天闲来没事淘宝逛了一圈看到淘宝的左侧导航菜单做的是真心的棒啊,一时兴起,查了点资料抓了几个图片仿淘宝写了个css,时间紧写的不太好,大神勿喷,给小白做个参考 废话不多说先来个效果图 接下来直接上代 ...
- 用css写出下拉框(代码转自wq群)
做网易云音乐首页时遇到的问题,鼠标指在右上角头像时出现下拉框. <style>/* css*/ #body{ float: left; } #xialakuang{ background- ...
- 用html标签+css写出旋转的正方体
有一段时间没写代码了,刚写有点手生,无从下手,为了能快速进入状态,就写了这一个小东西,纯用标签和样式表写.下面看一下我写的. 这一段是样式表: <style> *{ margin: 0; ...
- html+css写出响应式侧边导航栏
html部分:先写用div画好六个导航的卡片,再利用css添加响应效果 <div class='card-holder'> <div class='card-wrapper'> ...
随机推荐
- 【Java集合源码剖析】Java集合框架
Java集合工具包位于Java.util包下,包含了很多常用的数据结构,如数组.链表.栈.队列.集合.哈希表等.学习Java集合框架下大致可以分为如下五个部分:List列表.Set集合.Map映射.迭 ...
- CC3200在AP模式的TCP sock作为客户端连接时返回SL_ECONNREFUSED(-111) Connection refused
1. CC3200处于AP模式(电脑无线连接CC3200的WIFI信号),开启一个TCP socket,这个socket作为TCP客户端去连接TCP服务器端 struct sockaddr_in ad ...
- 【转载】Unity3d UnityEditor编辑器定制和开发插件
在阅读本教程之前,你需要对Unity的操作流程有一些基础的认识,并且最好了解内置的GUI系统如何使用. 如何让编辑器运行你的代码 Unity3D可以通过事件触发来执行你的编辑器代码,但是我们需要一些编 ...
- 牛客练习赛22-E.简单数据结构1(扩展欧拉定理降幂 +树状数组)
链接:E.简单数据结构1 题意: 给一个长为n的序列,m次操作,每次操作: 1.区间加 2.对于区间,查询 ,一直到- 请注意每次的模数不同. 题解:扩展欧拉定理降幂 对一个数p取log(p)次的 ...
- (原)Unreal渲染相关的缓冲区 及其 自定义代码几种抓取
@authot: 白袍小道 转载说明那啥即可. (图片和本文无关,嘿嘿,坑一下) 以下为Unreal4.18版本中对GPUBuffer部分的分析结果 (插入:比之够着,知至目的) ...
- 软件工程概论课堂测试一————添加新课程(web)
设计思想 三个文件Class_add.java add.jsp addInput.jsp Class_add.java : 内封装方法:连接数据库.向数据库添加课程信息.判断非合理的输入情况.判断 ...
- hdu 1535 Invitation Cards (最短路径)
Invitation Cards Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others ...
- [洛谷P4630][APIO2018] Duathlon 铁人两项
题目大意:给一张无向图,求三元组$(u,v,w)$满足$u->v->w$为简单路径,求个数 题解:圆方树,缩点后$DP$,因为同一个点双中的点一定地位相同 卡点:1.$father$数组开 ...
- [洛谷P1972][SDOI2009]HH的项链
题目大意:给你一串数字,多次询问区间内数字的种类数 题解:莫队 卡点:洛谷数据加强,开了个$O(2)$ C++ Code: #include <cstdio> #include <a ...
- Tensorflow 载入数据的三种方式
Tensorflow 数据读取有三种方式: Preloaded data: 预加载数据 Feeding: Python产生数据,再把数据喂给后端. Reading from file: 从文件中直接读 ...