天给大家带来的是一个评分的效果,大家可以看我把它放大一下,当然简单。
·首先在vivo水土容器里面放了五颗星,刚好只有五颗。我用的开发工具是hb的x开发uni up的,主要要看css样式部分。大家可以看到vivo这里是听特别简单。
·下面就是css部分,首先方式是背景颜色,这大家应该都知道。整体的效果的移动,为了方便我就把它给放到了中间位置给移一下。这句话也不对框就是单选,大家可以看到每颗星都是一个输入框,有一样式的。
·然后进行隐藏当做单选,进行了向右的对齐,默认的颜色,这也包括这个都有。
·还有一个就是讲过了,下面就是buffer尾颜色。
·最后就进行了鼠标悬浮移动,进行颜色的改变,过渡的效果。
其实就几个,大家可以看一下就很少,但是很多地方都可以用到文章的评分、打新之类的,感兴趣的可以动手自己去写一下。
喜欢的可以转发点赞收藏一下,想要不想写,想要元代码的可以找我唠嗑进行获取就行,因为今天先讲到这里。
.图片标签img
2.h标题系列 (有6个级别)
3.分段标签p
4.换行标签br
5.分割线标签hr
6.特殊字符
<— — 小于号
>— —大于号
 ;— —空格
&— —&符号
"— —双引号
7.a标签做超链接
8.a作为锚点
9.div标签和span标签
div是块级元素,Span是行元素
、前言
在浏览一些图片网站的时候,经常会看到很多的漂亮的星空图,比如,下面的图片。其实这种星星图片的效果,也可以通过html+css样式和js的方式来实现。今天教大家如何实现星星图的效果。
软件:Dreamweaver
每次刷新产生随机的星星个数。显示画布上。
<body>
<canvas id='canvas'></canvas>
</body>
给canva 画布加上边框,方便观察。
<style type="text/css">
canvas{
border:2px solid #f00;
}
</style>
<script type="text/javascript">
var _canvas=document.getElementById("canvas")
_canvas.width=500;
_canvas.height=500;
var r,g ,b,a;
</script>
for (var j = 0; j < 150; j++) {
arc.x=Math.floor(Math.random()*_canvas.width);
arc.y=Math.floor(Math.random()*_canvas.height);
arc.r=Math.floor(Math.random()*31+10);
r=Math.ceil(Math.random()*256);
g=Math.ceil(Math.random()*256);
b=Math.ceil(Math.random()*256);
a=Math.random();
darw();
}
如何画星星?(公式解析)(图片来源百度)
星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星。
/* 随机产生星星*/
for (var i = 0; i < 5; i++) {
_ctx.lineTo(Math.cos((18+72*i)/180*Math.PI)*arc.r+arc.x, -Math.sin((18+72*i)/180*Math.PI)*arc.r+arc.y);
_ctx.lineTo(Math.cos((54+72*i)/180*Math.PI)*arc.r/2+arc.x, -Math.sin((54+72*i)/180*Math.PI)*arc.r/2+arc.y);
}
Math函数随机产生0-225的RGB值。
/* 随机颜色*/
_ctx.fillStyle="rgba(" + r + "," + g + "," + b + "," + a + ")";
_ctx.fill();
_ctx.strokeStyle="rgba(" + r + "," + g + "," + b + "," + a + ")";
_ctx.stroke();
}
darw();
1、点击f12运行到浏览器
2、每次刷新网页,随机产生不一样的星星和随机颜色。
想学习更多前端、Python爬虫、大数据等计算机知识,请前往:http://pdcfighting.com/
*请认真填写需求信息,我们会在24小时内与您取得联系。