关键词：
使用方式
1 使用svg
2 png图片
3 css3 动画
4 使用webgl
5 canvas
6 使用glsl
发现很多东西本身html 里面已经有了，关键是要熟悉和使用。现在先做基本的东西，等基本的创造好了，就可以打造科技界面了。读者请耐心等待
1 svg 圆
<svg width="300" height="180">
<circle cx="30" cy="50" r="10" />
<circle cx="90" cy="50" r="10" class="red" />
<circle cx="150" cy="50" r="10" class="fancy" />
</svg>
先打造一个基本界面，再使用动画来动起来
<svg width="400px" height="200px" id="testSvg">
<line x1="0" y1="0" x2="10" y2="0" style="stroke:rgb(0,0,0);stroke-width:2" />
<line x1="0" y1="0" x2="0" y2="10" style="stroke:rgb(0,0,0);stroke-width:2" />
<line x1="400" y1="0" x2="400" y2="10" style="stroke:rgb(0,0,0);stroke-width:2" />
<line x1="390" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:2" />
<line x1="0" y1="200" x2="0" y2="190" style="stroke:rgb(0,0,0);stroke-width:2" />
<line x1="0" y1="200" x2="10" y2="200" style="stroke:rgb(0,0,0);stroke-width:2" />
<line x1="400" y1="200" x2="400" y2="190" style="stroke:rgb(0,0,0);stroke-width:2" />
<line x1="400" y1="200" x2="390" y2="200" style="stroke:rgb(0,0,0);stroke-width:2" />
<circle cx="350" cy="100" r="20" fill="red" id="testCircle" class="text text-1"></circle>
</svg>
制作动画
1 、关键帧动画
围绕圆圈开始亮点旋转
.text
font-size: 64px;
font-weight: bold;
text-transform: uppercase;
fill: none;
stroke-width: 2px;
stroke-dasharray: 90 310;
animation: stroke 6s infinite linear;
.text-1
stroke: #3498db;
text-shadow: 0 0 5px #3498db;
animation-delay: -1.5s;
@keyframes stroke
100%
stroke-dashoffset: -400;
线条开始围绕圆圈动画
2、 交互点击
<script type="text/javascript">
var circle = document.getElementById("testCircle");
circle.addEventListener("click", function (e)
console.log("Click circle ...");
circle.setAttribute("r", 25);
circle.setAttribute("fill","blue");
, false);
</script>
点击以后圆的半径放大到25
code
<!DOCTYPE html>
<html>
<head>
<title>webrtc sfu</title>
<style>
video
border: 1px solid black;
width: 640px;
height: 360px;
.local
border: 1px solid red;
width: 640px;
height: 360px;
.red
fill: red;
.fancy
fill: none;
stroke: black;
stroke-width: 3pt;
#testSvg
border: 1px solid #ccc;
.testSvg
border: 1px solid #ccc;
#testSvg circle
fill: red;
stroke: blue;
stroke-width: 1;
#svgBox
width:100%;
margin:100px auto;
.text
font-size: 64px;
font-weight: bold;
text-transform: uppercase;
fill: none;
stroke-width: 2px;
stroke-dasharray: 90 310;
animation: stroke 6s infinite linear;
.text-1
stroke: #3498db;
text-shadow: 0 0 5px #3498db;
animation-delay: -1.5s;
.text-2
stroke: #f39c12;
text-shadow: 0 0 5px #f39c12;
animation-delay: -3s;
.text-3
stroke: #e74c3c;
text-shadow: 0 0 5px #e74c3c;
animation-delay: -4.5s;
.text-4
stroke: #9b59b6;
text-shadow: 0 0 5px #9b59b6;
animation-delay: -6s;
@keyframes stroke
100%
stroke-dashoffset: -400;
</style>
</head>
<body>
<svg width="300" height="180">
<circle cx="30" cy="50" r="10" />
<circle cx="90" cy="50" r="10" class="red" />
<circle cx="150" cy="50" r="10" class="fancy" />
</svg>
<div id="svgBox">
<svg height="100">
<text text-anchor="middle" x="50%" y="50%" class="text text-1">观沧海</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-2">观沧海</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-3">观沧海</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-4">观沧海</text>
</svg>
</div>
<svg width="400px" height="200px" id="testSvg">
<line x1="0" y1="0" x2="10" y2="0" style="stroke:rgb(0,0,0);stroke-width:2" />
<line x1="0" y1="0" x2="0" y2="10" style="stroke:rgb(0,0,0);stroke-width:2" />
<line x1="400" y1="0" x2="400" y2="10" style="stroke:rgb(0,0,0);stroke-width:2" />
<line x1="390" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:2" />
<line x1="0" y1="200" x2="0" y2="190" style="stroke:rgb(0,0,0);stroke-width:2" />
<line x1="0" y1="200" x2="10" y2="200" style="stroke:rgb(0,0,0);stroke-width:2" />
<line x1="400" y1="200" x2="400" y2="190" style="stroke:rgb(0,0,0);stroke-width:2" />
<line x1="400" y1="200" x2="390" y2="200" style="stroke:rgb(0,0,0);stroke-width:2" />
<circle cx="350" cy="100" r="20" fill="red" id="testCircle" class="text text-1"></circle>
</svg>
<br />
<!-- <svg width="600" height="600" class="testSvg">
<rect x="0" y="0" width="100" height="100" fill="#f06" />
<rect x="100" y="100" width="200" height="100" fill="black" />
</svg> -->
</body>
<script type="text/javascript">
var circle = document.getElementById("testCircle");
circle.addEventListener("click", function (e)
console.log("Click circle ...");
circle.setAttribute("r", 25);
circle.setAttribute("fill","blue");
, false32.删除按钮的微交互动画效果(代码片段)
效果(源码网盘地址在最后)关注公众号《大迁世界》，查看更多视频教程！源码index.html<!DOCTYPEhtml><html><head><title>DeleteButtonAnimation</title><linkrel="stylesheet"type="text/css"href="style.css">< 查看详情
32.删除按钮的微交互动画效果(代码片段)
效果(源码网盘地址在最后)关注公众号《大迁世界》，查看更多视频教程！源码index.html<!DOCTYPEhtml><html><head><title>DeleteButtonAnimation</title><linkrel="stylesheet"type="text/css"href="style.css">< 查看详情
打造极致materialdesign动画风格button(代码片段)
======================================== 查看详情
如何打造车载语音交互：androidvoiceinteraction给你答案(代码片段)
在某些场景下进行图形交互显得有些困难、甚至危险，比如驾驶汽车。那么在这些场景下可以适当加入语音交互，在解放手眼的同时可以增强安全、避免分心。概述语音交互并不是一个新事物，很早就有了。比如Apple... 查看详情
38.动画档案卡用户界面(代码片段)
效果(源码网盘地址在最后)源码index.html<!DOCTYPEhtml><html><head><title>ImageHoverEffects</title><linkrel="stylesheet"type="text/css"href="style.css"></head><body> &l 查看详情
38.动画档案卡用户界面(代码片段)
效果(源码网盘地址在最后)源码index.html<!DOCTYPEhtml><html><head><title>ImageHoverEffects</title><linkrel="stylesheet"type="text/css"href="style.css"></head><body> &l 查看详情
markdown交互设计和动画(代码片段)
rn-动画(代码片段)
RN-动画流畅、有意义的动画对于移动应用用户体验来说是非常重要的。现实生活中的物体在开始移动和停下来的时候都具有一定的惯性，我们在界面中也可以使用动画来实现契合物理规律的交互。ReactNative提供了两个互补的动画... 查看详情
打造高性能css动画，你该怎么做？(代码片段)
你一定知道JS动画的优先级<css动画。即使必要，用JS操作class的优先级也一定>用JS直接修改具体样式。但是如果问到：“你了解css动画的性能么？如何优化？”你该怎么解决？CSS中有两个至关重要的概念—... 查看详情
界面的嵌套(代码片段)
当你的逻辑部分和前端界面交互的时候可能会出现嵌套的部分：Libraryfromdjango.templateimportLibraryfromdjango.confimportsettingsregister=Library()@register.inclusion_tag("rbac/menu.html")#这个装饰器式先加载这个html界面然后再去下面拿到数据进行渲... 查看详情
html打造动画系列3-小猫笑脸动画
猫咪容器咱们每次画一个图片，肯定先要确定一个容器，几确定一下图形的位置和大小。<divclass="mao_box"><divclass="mao"></div></div>body{margin:0px;background:#F6F7A7;}.mao_box{position:relative;top:50px;}/*设置宽度并且居中显示*/.m 查看详情
android与html-js交互入门(代码片段)
...会嵌套一些h5酷炫的界面，而我们的app就需要和H5进行交互，下面我们就来看看怎么进行具体的交互。Webview的基本设置以下是webview的基本设置WebSettingssetting=mWebView.getSettings();setting.setJavaScriptCanOpenWindowsAutomatically(true);/ 查看详情
[maui]模仿网易云音乐黑胶唱片的交互实现(代码片段)
...布局创建手势控件创建影子控件唱盘拨动交互唱盘和唱针动画项目地址用过网易云音乐App的同学应该都比较熟悉它播放界面。这是一个良好的交互设计，留声机的界面隐喻准确地向人们传达产品概念和使用方法：当手指左右滑动... 查看详情
如何打造车载语音交互：androidvoiceinteraction给你答案(代码片段)
在某些场景下进行图形交互显得有些困难、甚至危险，比如驾驶汽车。那么在这些场景下可以适当加入语音交互，在解放手眼的同时可以增强安全、避免分心。概述语音交互并不是一个新事物，很早就有了。比如Apple... 查看详情
layui动画按钮表单(代码片段)
Layui动画、按钮、表单 在实用价值的前提之下，我们并没有内置过多花俏的动画。而他们同样在layui的许多交互元素中，发挥着重要的作用。layui的动画全部采用CSS3，因此不支持ie8和... 查看详情
echarts高级动画的使用交互api(代码片段)
1.1.动画的使用1.1.1.加载动画ECharts已经内置好了加载数据的动画,我们只需要在合适的时机显示或者隐藏即可显示加载动画mCharts.showLoading()一般,我们会在获取图表数据之前显示加载动画 隐藏加载动画mCharts.hideLoading()一般,我们会... 查看详情
html基础入门(代码片段)
...页面表现，元素的大小、颜色、位置、隐藏或显示、部分动画效果JavaScript：页面行为，部分动画效果，页面与用户的交互，页面功能2、HTML历史HTML：超文本标记语言，是网页制作必备的编程语言，超文 查看详情
python如何清空命令行交互界面的代码(代码片段)
...描述清空命令行很简单，用cls命令即可。但在命令行交互界面写了很多Python代码，看着很不舒服，如何清空后从头开始写？解决方案os.system(command)使得在子shell中执行单个字符串命令成为可能。>>>importos>&g... 查看详情