我的web程序设计实验记10

最新推荐文章于 2022-05-28 21:05:08 发布

阿澜澜儿

最新推荐文章于 2022-05-28 21:05:08 发布

阅读量575

点赞数

文章标签： html vue.js css node.js

本文链接：https://blog.csdn.net/zx616122/article/details/108608624

版权

实验记录

使用css和html制作一个简单的动画程序

使用div连接成8个块，进行移动，整体向浮动
html代码

<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title></title>	<link rel="stylesheet" href="1.css" media="screen" type="text/css" />	</head>	<body>	<div class="all1">欢</div>	<div class="all1">迎</div>	<div class="all1">光</div>	<div class="all1">临</div>	<div class="all1">您</div>	<div class="all1">好</div>	<div class="all1">欢</div>	<div class="all1">迎</div>	</body></html>

css代码

.all1{
      width: 50px;    height: 50px;    background: red;    border-radius: 20px;    text-align: center;    border-style: solid;    font-size: 2em;    position: relative;    animation: spin 5s infinite alternate; }div{
       float: left;} @keyframes spin {
        from {
           background: red;    }    to {
           background: yellow;    }    0% {
           background: red;        left: 0px;        top: 0px;  }    25% {
           background: yellow;        left: 200px;        top: 0px;    }    50% {
           background: blue;        left: 0px;        top: 300px;    }    75% {
           background: green;        left: 0px;        top: 200px;    }    100% {
           background: red;        left: 0px;        top: 0px;    }}

vue指令练习

编写一个vue程序，使用v-for指令，将一段定义json结构的数据内容输出到页面中显示。

第一个是用json传送了一数组元素到ol列表中
使用v-for通过一个对象来迭代使用object进行json的嵌套
html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for练习</title>
    <script type="application/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="1.css" media="screen" type="text/css" />
</head>
<body>
<div id="app">
    <ol>
        <li v-for="item in arr">{
   {
   item}}</li>
   </ol>
    <ul id="v-for-object" class="demo">
       <li v-for="value in object">
           {
   {
   value}}
       </li>
    </ul>
    <div>{
   {
    message }}</div>
    <div>{
   {
    list }}</div>
    <div>{
   {
    web }}</div>
</div>

<script src="1.js"></script>
</body>
</html>

css

ol{
   
    width: 110px;
    height: 110px;
    border:2px solid #0099ff;
    border-radius: 60px;
    text-align: center;
    list-style-type: none;
    font-size: 2em;
    box-shadow: 0 0 30px 10px;
}
ul{
   
    width: 200px;
    height: 200px;
    border:2px solid #0099ff;
    border-radius: 100px

最低0.47元/天解锁文章

阿澜澜儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的web程序设计实验记10

实验记录使用css和html制作一个简单的动画程序使用div连接成8个块，进行移动，整体向浮动html代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="1.css" media="screen" type="text/css" /> </head> &lt
复制链接

扫一扫