当前位置 博文首页 > 无限迭代中......：《移动应用开发》作业——HTML、CSS
1.使用HTML5中<canvas> 元素完成一个比较复杂的图形绘制，形状自己定。
(效果截图和文字描述)
?
?
主要的源代码：
<canvas id="canvas" width="400" height="300" >您的浏览器不支持canvas，建议用360极速模式看</canvas>
<script>
function draw(){
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
ctx.fillStyle = "#eeeeff";
ctx.fillRect(0,0,400,300);
var n = 0;
var dx = 150;
var dy = 150;
var s = 100;
ctx.beginPath();
ctx.fillStyle = "cornflowerblue";
ctx.strokeStyle = "#eee";
var x = Math.sin(0);
var y = Math.cos(0);
var dig = 11 * Math.PI / 15;
for(var i=0; i<30; i++){
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
ctx.lineTo(dx+x*s,dy+y*s);
}
ctx.closePath();
ctx.fill();
ctx.stroke();
}
draw();
</script>2.编辑1种便于在手机屏幕上使用的导航栏。
由于手机屏幕大小，平时把导航栏收缩是一种很好的选择，点击即可展开。
主要源代码：
<div class="uk-hidden@m uk-inline uk-padding-small">
<button class="toggle-button uk-icon-button uk-button-primary uk-icon" uk-icon="icon: menu"></button>
<div uk-dropdown="mode: click; animation: uk-animation-slide-top-small; pos: bottom-right;" class="dropdown-menu uk-border-rounded uk-dropdown">
<ul class="uk-nav uk-dropdown-nav">
<li>
<a href="#cluster">
<span class="uk-margin-small-right uk-icon" uk-icon="icon: bookmark"></span> Cluster
</a>
</li>
<li>
<a href="#showcase">
<span class="uk-margin-small-right uk-icon" uk-icon="icon: star"></span> Showcase
</a>
</li>
<li>
<a href="#team">
<span class="uk-margin-small-right uk-icon" uk-icon="icon: users"></span> Team
</a>
</li>
<li>
<a target="_blank" href="#">
<span class="uk-margin-small-right uk-icon" uk-icon="icon: github"></span> Github Repos
</a>
</li>
</ul>
</div>
</div>3.设计1个html页面，包含三部分内容：
CSS3 2D转换效果，截图：
CSS3 3D转换效果，截图：
设计一种适合手机Web网站上展示的CSS 3按钮。
主要代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 224px;
height: 224px;
margin: 100px auto;
position: relative;
animation: secfirst 4s linear infinite;
transform-style: preserve-3d;
}
div img {
position: absolute;
top: 0;
left: 0;
transition: all 8s;
}
div:hover img {
transform: rotateY(180deg);
}
div div {
position: absolute;
top: 0;
left: 0;
transition: all 8s;
}
/* 定义动画 */
@keyframes secfirst {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
.taiji {
position: relative;
width: 200px;
height: 100px;
background: white;
border-color: black;
border-style: solid;
border-width: 4px 4px 100px 4px;
/*变成圆形*/
border-radius: 50%;
margin: 100px auto;
/* 定义动画 名称 时长 匀速 无限循环播放 */
animation: myfirst 4s linear infinite;
transform-style: preserve-3d;
}
.taiji::before,
.taiji::after {
content: " ";
position: absolute;
top: 50%;
left: 0;
width: 25px;
height: 25px;
background: white;
border: 38px solid black;
border-radius: 50%;
}
.taiji::after {
left: 50%;
background: black;
border-color: white;
}
/* 定义动画 */
@keyframes myfirst {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.a_demo_one {
background-color:#ba2323;
padding:10px;
position:relative;
font-size:12px;
text-decoration:none;
color:#fff;
border: solid 1px #831212;
background-image: linear-gradient(bottom, rgb(171,27,27) 0%, rgb(212,51,51) 100%);
border-radius: 5px;
}
.a_demo_one:active {
padding-bottom:9px;
padding-left:10px;
padding-right:10px;
padding-top:11px;
top:1px;
background-image: linear-gradient(bottom, rgb(171,27,27) 100%, rgb(212,51,51) 0%);
}
</style>
</head>
<body>
<div>
<img src="https://gitee.com/static/images/logo-black.svg?t=158106664" alt=""/>
</div>
<div class="taiji"></div>
<button class="a_demo_one">手机按钮</button>
</body>
</html>?
?
1、学习HTML、CSS、JavaScript基础
2、练习CSS 2D、CSS 3D和JavaScript脚本控制。
?
?
?
?
?
?
cs