4.花瓣特效----js+旋转+位移+随机颜色+随机位置

在3.花瓣特效----js+旋转+位移的基础上再增加位置和颜色的变化。

1.思路：

利用Math.random来产生（0,16）的随机数，然后创建从1到F的数组New_color，New_color[num]即为随机的一位颜色，需要产生随机的颜色。
产生随机位置，需要知道浏览器视口的宽高，根据其宽高来生成对应范围的随机数，还需要记录之前位置，然后根据之前的位置移动到新产生的位置。
将随机产生的left和top赋值给外部容器的@keyframes，注意需要先清除之前的动画帧@keyframes，如下图所示：

2.问题：

在动画颜色切换的时候会出现突然闪烁的效果，原因是当低亮度的颜色跳到高亮度的颜色时，偏差过大，所以需要对颜色进行过渡处理，0%–10%，让其从opacity：0到opacity：1，90%–100%让其从opacity：1到opacity：0；代码如下所示：

keyframeList.insertRule("@keyframes one-"+i+" {" +"      0%{" +"        box-shadow: inset 0rem 0rem 0rem 0.1rem #E63FEA, 0rem 0rem 1.5rem 0rem #E63FEA;\n" +"        transform: rotate("+(i*45)+"deg) translate(0px,0px);" +"        opacity: 0 ;"+"      }" +"      10%{" +"        box-shadow: inset 0rem 0rem 0rem 0.1rem #E63FEA, 0rem 0rem 1.5rem 0rem #E63FEA;\n" +"        transform: rotate("+(i*45)+"deg) translate(0px,0px);" +"        animation-timing-function: ease-out;"+"        opacity: 1 ;"+"      }" +"      50%{" +"        box-shadow: inset 0rem 0rem 0rem 0.1rem #17E1E6, 0rem 0rem 1.5rem 0rem #17E1E6;\n" +"        transform: rotate("+(i*45)+"deg) translate(0px,100px);" +"        animation-timing-function: ease-in;"+"        opacity: 1 ;"+"      }" +"      90%{" +"        box-shadow: inset 0rem 0rem 0rem 0.1rem #E63FEA, 0rem 0rem 1.5rem 0rem #E63FEA;\n" +"        transform: rotate("+(i*45)+"deg) translate(0px,0px);" +"        animation-timing-function: ease-out;"+"        opacity: 1 ;"+"      }" +"      100%{" +"        box-shadow: inset 0rem 0rem 0rem 0.1rem #E63FEA, 0rem 0rem 1.5rem 0rem #E63FEA;\n" +"        transform: rotate("+(i*45)+"deg) translate(0px,0px);" +"        opacity: 0 ;"+"      }" +"    }")

3.具体的代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/animate.css"><style>.raote-an{width: 100%;height: 500px;background: #424242 ;}.raote-an .container{position: relative;width: 480px;height: 480px;animation: mine3 5s linear infinite ;transition: all 5s;}@keyframes mine3 {0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}.raote-an .container div{position: absolute;left: 225px;top: 200px;transition: box-shadow 1s;}.raote-an .container .one{transform: rotate(45deg);animation: one-1 8s linear infinite;}.raote-an .container .two{left: 325px;transform: rotate(90deg);animation: one-2 8s linear infinite;}.raote-an .container .third{top: 270px;left: 295px;transform: rotate(135deg);animation: one-3 8s linear infinite;}.raote-an .container .four{top: 300px;transform: rotate(180deg);animation: one-4 8s linear infinite;}.raote-an .container .five{top: 270px;left: 155px;transform: rotate(225deg);animation: one-5 8s linear infinite;}.raote-an .container .six{left: 125px;transform: rotate(270deg);animation: one-6 8s linear infinite;}.raote-an .container .seven{top: 130px;left: 155px;transform: rotate(315deg);animation: one-7 8s linear infinite;}.raote-an .container .eigh{top: 100px;transform: rotate(360deg);animation: one-8 8s linear infinite;}</style>
</head>
<body><div class="raote-an"><div class="container"><div class="one"></div><div class="two"></div><div class="third"></div><div class="four"></div><div class="five"></div><div class="six"></div><div class="seven"></div><div class="eigh"></div></div></div>
</body>
<script>let wrapper = document.getElementsByClassName('container')let divList = wrapper[0].childrenlet wrapper_w = wrapper[0].offsetWidthlet wrapper_h = wrapper[0].offsetHeightlet c_radius = 0;  // 半径let c_radius_sqrt = Math.sqrt(c_radius*c_radius/2) // 以45度来计算其对其的位置let petal_w  = 30;  // 花瓣的宽度let petal_h  = 80;  // 花瓣的高度let petal_color = '#E645D0'; // 花瓣的颜色let c_center = { // 圆心坐标width: (wrapper_w - petal_w) / 2,height: (wrapper_h - petal_h) /2}for (var i = 0; i < divList.length; i++) { // 设置花瓣宽度、高度、边框锐角、边框阴影divList[i].style.width = petal_w + 'px';divList[i].style.height = petal_h + 'px';divList[i].style.borderRadius = '0px '+(petal_h+petal_w)+'px 0px '+(petal_h+petal_w)+'px';divList[i].style.boxShadow = 'inset 0rem 0rem 0rem 0.1rem '+(petal_color)+', 0rem 0rem 1.5rem 0rem '+(petal_color);divList[i].style.animation = 'one-'+(i+1)+' 8s linear infinite;'}// 第一个花瓣的绝对定位divList[0].style.top = c_center.height - c_radius_sqrt + 'px';divList[0].style.left = c_center.width + c_radius_sqrt + 'px';// 第二个花瓣的绝对定位divList[1].style.top = c_center.height + 'px';divList[1].style.left = c_center.width + c_radius + 'px';// 第三个花瓣的绝对定位divList[2].style.top  = c_center.height + c_radius_sqrt + 'px';divList[2].style.left = c_center.width + c_radius_sqrt + 'px';// 第四个花瓣的绝对定位divList[3].style.top  = c_center.height + c_radius + 'px';divList[3].style.left = c_center.width + 'px';// 第五个花瓣的绝对定位divList[4].style.top  = c_center.height + c_radius_sqrt + 'px';divList[4].style.left = c_center.width - c_radius_sqrt + 'px';// 第六个花瓣的绝对定位divList[5].style.top  = c_center.height + 'px';divList[5].style.left = c_center.width - c_radius + 'px';// 第七个花瓣的绝对定位divList[6].style.top  = c_center.height - c_radius_sqrt + 'px';divList[6].style.left = c_center.width - c_radius_sqrt + 'px';// 第八个花瓣的绝对定位divList[7].style.top  = c_center.height - c_radius + 'px';divList[7].style.left = c_center.width + 'px';let keyframeList = document.styleSheets[1]
//  控制css的animation动画  8个div的动画for (let i =1;i < 9;i++) {// console.log(keyframeList.cssRules[index].name);// keyframeList.deleteRule("12") // 删除12位置的动画// 插入动画keyframeList.insertRule("@keyframes one-"+i+" {" +"      0%{" +"        box-shadow: inset 0rem 0rem 0rem 0.1rem #E63FEA, 0rem 0rem 1.5rem 0rem #E63FEA;\n" +"        transform: rotate("+(i*45)+"deg) translate(0px,0px);" +"        opacity: 0 ;"+"      }" +"      10%{" +"        box-shadow: inset 0rem 0rem 0rem 0.1rem #E63FEA, 0rem 0rem 1.5rem 0rem #E63FEA;\n" +"        transform: rotate("+(i*45)+"deg) translate(0px,0px);" +"        animation-timing-function: ease-out;"+"        opacity: 1 ;"+"      }" +"      50%{" +"        box-shadow: inset 0rem 0rem 0rem 0.1rem #17E1E6, 0rem 0rem 1.5rem 0rem #17E1E6;\n" +"        transform: rotate("+(i*45)+"deg) translate(0px,100px);" +"        animation-timing-function: ease-in;"+"        opacity: 1 ;"+"      }" +"      90%{" +"        box-shadow: inset 0rem 0rem 0rem 0.1rem #E63FEA, 0rem 0rem 1.5rem 0rem #E63FEA;\n" +"        transform: rotate("+(i*45)+"deg) translate(0px,0px);" +"        animation-timing-function: ease-out;"+"        opacity: 1 ;"+"      }" +"      100%{" +"        box-shadow: inset 0rem 0rem 0rem 0.1rem #E63FEA, 0rem 0rem 1.5rem 0rem #E63FEA;\n" +"        transform: rotate("+(i*45)+"deg) translate(0px,0px);" +"        opacity: 0 ;"+"      }" +"    }")}let oldColor = '#E63FEA'setInterval(function () {console.log('定时器开启');let random_color = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f']let color_1 = Math.floor(Math.random()*16)let color_2 = Math.floor(Math.random()*16)let color_3 = Math.floor(Math.random()*16)let color_4 = Math.floor(Math.random()*16)let color_5 = Math.floor(Math.random()*16)let color_6 = Math.floor(Math.random()*16)let new_color = random_color[color_1] + random_color[color_2] + random_color[color_3] + random_color[color_4] + random_color[color_5] + random_color[color_6]let color_21 = Math.floor(Math.random()*16)let color_22 = Math.floor(Math.random()*16)let color_23 = Math.floor(Math.random()*16)let color_24 = Math.floor(Math.random()*16)let color_25 = Math.floor(Math.random()*16)let color_26 = Math.floor(Math.random()*16)let new_color2 = random_color[color_21] + random_color[color_22] + random_color[color_23] + random_color[color_24] + random_color[color_25] + random_color[color_26]for (let i =1;i < 9;i++) {// 获得对应one-1的对应位置let index;for (let j=0;j < keyframeList.cssRules.length;j++){if (keyframeList.cssRules[j].type === 7 && keyframeList.cssRules[j].name.indexOf('one-'+i)>-1) {index = j}}keyframeList.deleteRule(index) // 删除12位置的动画// 插入动画keyframeList.insertRule("@keyframes one-"+i+" {" +"      0%{" +"        box-shadow: inset 0rem 0rem 0rem 0.1rem #"+oldColor+", 0rem 0rem 1.5rem 0rem #"+oldColor+";" +"        transform: rotate("+(i*45)+"deg) translate(0px,0px);" +"        opacity: 0 ;"+"      }" +"      5%{" +"        box-shadow: inset 0rem 0rem 0rem 0.1rem #"+oldColor+", 0rem 0rem 1.5rem 0rem #"+oldColor+";" +"        transform: rotate("+(i*45)+"deg) translate(0px,0px);" +"        animation-timing-function: ease-out;"+"        opacity: 1 ;"+"      }" +"      50%{" +"        box-shadow: inset 0rem 0rem 0rem 0.1rem #"+oldColor+", 0rem 0rem 1.5rem 0rem #"+oldColor+";" +"        transform: rotate("+(i*45)+"deg) translate(100px,0px);" +"        animation-timing-function: ease-in;"+"        opacity: 1 ;"+"      }" +"      95%{" +"        box-shadow: inset 0rem 0rem 0rem 0.1rem #"+new_color+", 0rem 0rem 1.5rem 0rem #"+new_color+";" +"        transform: rotate("+(i*45)+"deg) translate(0px,0px);" +"        animation-timing-function: ease-out;"+"        opacity: 1 ;"+"      }" +"      100%{" +"        box-shadow: inset 0rem 0rem 0rem 0.1rem #"+new_color+", 0rem 0rem 1.5rem 0rem #"+new_color+";" +"        transform: rotate("+(i*45)+"deg) translate0px,0px);" +"        opacity: 0 ;"+"      }" +"    }")}oldColor = new_color},8000)
</script>
</html>

4.花瓣特效----js+旋转+位移+随机颜色+随机位置相关推荐

python画图颜色随机_用python画随机颜色随机大小随机位置的正方形
1 ''' 2 作者:唐梓文3 版本:1.04 日期:08/05/20205 功能:随机的在画布画多个正方形,并涂色6 7 ''' 8 9 importturtle10 importrandom11 ...
Python，OpenCV鼠标事件进行矩形、圆形的绘制（随机颜色、随机半径）
Python,OpenCV鼠标事件进行矩形.圆形的绘制(随机颜色.随机半径) 1. 效果图 2. 源码参考这篇博客将介绍鼠标事件,并介绍鼠标事件矩形.圆形的绘制: 所有的鼠标事件(左键按下.左键释 ...
html 特效背景旋转圆点 js特效
韩梦飞沙韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha html 特效背景旋转圆点 js特效阿里云的页面 2018杭州·云栖大会_抢票中 ...
随机验证码如何在html里设置颜色,js随机生成验证码以及随机颜色
Javascript通过Math.random()随机生成验证码. 代码如下: 随机验证码 .p1{ width:100px; height:30px; border:1px solid black; ...
JS简单实现随机颜色验证码功能
一.实现效果: 二.思路: 1.采用数组存放26位大小写字母以及数字如果你感觉麻烦,可以采用ACCII码表来循环生成数字与字母结合的随机数 const CodeArr = ['a', 'b', 'c ...
用js方法实现随机颜色tag标签
用js方法实现随机颜色tag标签效果如下
js获取随机数与随机颜色函数的简单封装
获取随机数: /*** 获取一个范围内的随机整数* @param {number} a 表示范围的数字* @param {number} b 表示范围的数字*/ function getRandom( ...
数据集增强——图像翻转、旋转、随机颜色、对比度、亮度、颜色增强
本代码共采用了四种数据增强,如采用其他数据增强方式,可以参考本代码,随意替换. ''' imageDir 为原数据集的存放位置 saveDir 为数据增强后数据的存放位置 '''from PIL im ...
数据增强-翻转、旋转、随机颜色、对比度增强、亮度增强、颜色增强
# imageDir 为原数据集的存放位置 # saveDir 为数据增强后数据的存放位置 ### #def flip(root_path,img_name): #翻转图像img = Image.op ...

4.花瓣特效----js+旋转+位移+随机颜色+随机位置

在3.花瓣特效----js+旋转+位移的基础上再增加位置和颜色的变化。

1.思路：

2.问题：

3.具体的代码：

4.花瓣特效----js+旋转+位移+随机颜色+随机位置相关推荐

最新文章

热门文章