前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

2024年10月25日

Vue+CSS3制作双螺旋DNA动画:代码详解和基础知识复习

1 效果：

2 知识点：

=======

2.1 html的基础知识。

2.2 css3的基础知识。

2.3 vue的基础知识。

2.4 代码讲解非常清楚，小白看了都会。

3 html骨架：

========

3.1 代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--网页标题名设置-->
<title>Vue-CSS3-DNA</title>
<style>
/*css设置内容*/
</style>
</head>
<body>
<!--引入在线vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<!--div内是指DNA骨架-->
</div>
<script>
// vue的js内容设置
</script>
</body>
</html>

3.2 <!DOCTYPE html>：

HTML5 中仅仅规定这一种声明。没有结束标签，声明不区分大小写。

总是给您的 HTML 文档添加 <!DOCTYPE> 声明，确保浏览器能够预先知道文档类型。

3.3 <meta charset="utf-8">：

charset=”utf-8”是告知浏览器此页面属于什么字符编码格式，下一步浏览器做好“翻译”工作。

常见的字符编码有：gb2312、gbk、unicode、utf-8。

4 设置body的div部分：

================

4.1 这部分：

<div id="app">
<!--div内是指DNA骨架-->
</div>

4.2 代码：

<div id="app">
    <div class="outer">
		<!---循环输出数据 item表示值 i表示索引: v-for="(item,i) in list1">{{ item }}--->
        <div class="inner" v-for="(dan,i) in sequence">
            <div class="top" v-bind:style="{'animation-delay' : -(i * 300) + 'ms' }"></div>
            <div id="line" v-bind:style="{'animation-delay' : -(i * 300) + 'ms' }"></div>
            <div class="foot" v-bind:style="{'animation-delay' : -(i * 300) + 'ms' }"></div>
        </div>
    </div>
</div>

4.3 div-id-class：

4.3.1 <div> 是一个块级元素，可定义文档中的节或者分区（division/section），换行是 <div> 固有的唯一格式表现。

4.3.2 <div> 元素应用 class 或 id 属性：简单的架构上来说基本没区别，但是有下面注意事项：

（1）class 用于元素组，而 id 用于标识单独的唯一的元素。

（2）在css中：id的内容前加#；class前加.。在vue的js中，id为app，则实例化el对象也是：'#app'。

4.4 vue的指令：v-for和v-bind（注意：vue的2.x版本）

4.4.1 v-for

格式：

v-for="(item,index) in items"
<p v-for="(item,i) in list">{{i}},{{item}}</p>
#本代码中，
v-for="(dna,i) in sequence"
#dna是item，是项目，i是index，是索引值

4.4.2 v-bind

v-bind 主要用于属性绑定。

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-bind:style 的对象语法十分直观--非常像CSS，其实它是一个Javascript对象，CSS属性名必须用驼峰命名法。

<div id="box" :style="{color:activeColor, fontSize:size, textShadow:shadow}">驼峰命名法否则报错</div>

activeColor为驼峰命名法；active-color短线法可能报错。

font-size在css中可以，在v-bind:style中必须改为驼峰命名法，即fontSize。

5 head的css部分代码：

<style>
/*第1步：网页整体body设置*/
body{
	/*网页背景颜色*/
	background-color: black;
}

/*第2步：对id的设置：带#号*/
/*#app代表来自id*/
#app {
	position:relative;
}

/*连接线的颜色*/
#line {
	width:0;
	height:145px;
	border:2px solid transparent;
	border-radius:0px;
	opacity:0.5;
	background-color:blue;
	top:50px;
	left:23px;
	bottom:50px;
	-webkit-animation:5s lineNode linear infinite;
	animation:5s lineNode linear infinite;
}

/*第3步：对class的设置：带.号*/
/*.outer代表来自class*/
.outer {
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
	text-align:center;
	overflow:hidden;
	width:90%;
}
.inner {
	position:relative;
	width:50px;
	height:250px;
	display:inline-block;
}
.inner div {
	position:absolute;
	width:50px;
	height:50px;
	border-radius:50%;
}
.top {
	/*上面的小球*/
	top:0;
	background-color:lawngreen;
	-webkit-animation:5s topNode ease-in-out infinite;
	animation:5s topNode ease-in-out infinite;
}
.foot {
	/*脚的小球*/
	bottom:0;
	background-color:rebeccapurple;
	-webkit-animation:5s footNode ease-in-out infinite;
	animation:5s footNode ease-in-out infinite;
}

/*第4步：动画设置，请注意本机为谷歌浏览器，如果兼容可能需要增加设置*/
/*topNode动画：上面的小球*/
@keyframes topNode {
0% {
	transform:scale(0.5);
	opacity:0.75;
	top:0;
}
25% {
	transform:scale(1);
	opacity:1;
}
50% {
	transform:scale(0.5);
	opacity:0.75;
	top:200px;
}
75% {
	transform:scale(0.25);
	opacity:0.5;
}
100% {
	transform:scale(0.5);
	opacity:0.75;
	top:0;
}
}

/*footNode动画：下面小球*/
@keyframes footNode {
0% {
	transform:scale(0.5);
	opacity:0.75;
	bottom:0;
}
25% {
	transform:scale(0.25);
	opacity:0.5;
}
50% {
	transform:scale(0.5);
	opacity:0.75;
	bottom:200px;
}
75% {
	transform:scale(1);
	opacity:1;
}
100% {
	transform:scale(0.5);
	opacity:0.75;
	bottom:0;
}
}

/*lineNode动画：连接线*/
@keyframes lineNode {
0% {
	transform:scale(0.5);
	transform:rotateX(0deg);
}
100% {
	transform:scale(1);
	transform:rotateX(360deg);
}
}
</style>

6 body的vue的js代码部分：

<script>
// vue实例化
var vm = new Vue({
	// 对象是#app
    el: '#app',
	// 数据是序列
    data: {
        sequence: []
    },
	// 方法，挂在这个序列
    mounted() {
		// 序列和长度，60（最佳）为分母，越大则序列越短，当≤50，序列变长，可能出现2段序列
       this.sequence = new Array(Math.round(document.body.clientWidth / 60));
    }
});
</script>

vue的mounted:html加载完成后执行。执行顺序：子组件-父组件。

mounted钩子函数一般用来向后端发起请求，拿到数据后做一些业务处理。该函数在模板渲染完成后才被调用。DOM操作一般是在mounted钩子函数中进行。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

7 完整代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Vue-CSS3-DNA</title>
<style>
/*第1步：网页整体body设置*/
body{
	/*网页背景颜色*/
	background-color: black;
}
/*第2步：对id的设置：带#号*/
/*#app代表来自id*/
#app {
	position:relative;
}
/*连接线的颜色*/
#line {
	width:0;
	height:145px;
	border:2px solid transparent;
	border-radius:0px;
	opacity:0.5;
	background-color:blue;
	top:50px;
	left:23px;
	bottom:50px;
	-webkit-animation:5s lineNode linear infinite;
	animation:5s lineNode linear infinite;
}
/*第3步：对class的设置：带.号*/
/*.outer代表来自class*/
.outer {
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
	text-align:center;
	overflow:hidden;
	width:90%;
}
.inner {
	position:relative;
	width:50px;
	height:250px;
	display:inline-block;
}
.inner div {
	position:absolute;
	width:50px;
	height:50px;
	border-radius:50%;
}
.top {
	/*上面的小球*/
	top:0;
	background-color:lawngreen;
	-webkit-animation:5s topNode ease-in-out infinite;
	animation:5s topNode ease-in-out infinite;
}
.foot {
	/*脚的小球*/
	bottom:0;
	background-color:rebeccapurple;
	-webkit-animation:5s footNode ease-in-out infinite;
	animation:5s footNode ease-in-out infinite;
}
/*第4步：动画设置，请注意本机为谷歌浏览器，如果兼容可能需要增加设置*/
/*topNode动画：上面的小球*/
@keyframes topNode {
0% {
	transform:scale(0.5);
	opacity:0.75;
	top:0;
}
25% {
	transform:scale(1);
	opacity:1;
}
50% {
	transform:scale(0.5);
	opacity:0.75;
	top:200px;
}
75% {
	transform:scale(0.25);
	opacity:0.5;
}
100% {
	transform:scale(0.5);
	opacity:0.75;
	top:0;
}
}

/*footNode动画：下面小球*/
@keyframes footNode {
0% {
	transform:scale(0.5);
	opacity:0.75;
	bottom:0;
}
25% {
	transform:scale(0.25);
	opacity:0.5;
}
50% {
	transform:scale(0.5);
	opacity:0.75;
	bottom:200px;
}
75% {
	transform:scale(1);
	opacity:1;
}
100% {
	transform:scale(0.5);
	opacity:0.75;
	bottom:0;
}
}
/*lineNode动画：连接线*/
@keyframes lineNode {
0% {
	transform:scale(0.5);
	transform:rotateX(0deg);
}
100% {
	transform:scale(1);
	transform:rotateX(360deg);
}
}
</style>
</head>
<body>
<!--引入在线-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    <div class="outer">
		<!---循环输出数据 item表示值 i表示索引: v-for="(item,i) in list1">{{ item }}--->
        <div class="inner" v-for="(dna,i) in sequence">
            <div class="top" v-bind:style="{'animation-delay' : -(i * 300) + 'ms' }"></div>
            <div id="line" v-bind:style="{'animation-delay' : -(i * 300) + 'ms' }"></div>
            <div class="foot" v-bind:style="{'animation-delay' : -(i * 300) + 'ms' }"></div>
        </div>
    </div>
</div>
<script>
// vue实例化
var vm = new Vue({
	// 对象是#app
    el: '#app',
	// 数据是序列
    data: {
        sequence: []
    },
	// 方法，挂在这个序列
    mounted() {
		// 序列和长度，60（最佳）为分母，越大则序列越短，当≤50，序列变长，可能出现2段序列
        this.sequence = new Array(Math.round(document.body.clientWidth / 60));
    }
});
</script>
</body>
</html>

超级详细

===自己整理并分享出来===

喜欢的人，请点赞、关注、评论、转发和收藏。

标签：css div自动换行 

作者:whsf66 , 分类:前端教程 , 浏览:9 , 评论:0

发表评论:

控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言