天給大家帶來的是一個評分的效果,大家可以看我把它放大一下,當然簡單。
·首先在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小時內與您取得聯系。