实现按钮边框动画+摩天轮旋转动画+水印实现

如何实现呢？

首先就是分析如何将这6个图片分布成该方式，那我们就需要将6张图片设置水平垂直居中，然后计算出x,y轴坐标，然后移动到相应位置。

动画效果，只需将父盒子使用css3 animation动画即可。具体代码实现如下。

// html相关代码<div class="container1"><div class="item"><img src="" alt=""></div><div class="item"><img src="" alt=""></div><div class="item"><img src="" alt=""></div><div class="item"><img src="" alt=""></div><div class="item"><img src="" alt=""></div><div class="item"><img src="..." alt=""></div></div>// vue3中使用onMounted(() => {const dom = document.querySelectorAll('.container1 .item')const len = dom.lengthconst r = document.querySelector('.container1').clientWidth / 2rotateAnimate(dom, r, len)})

然后封装动画方法：

// dom为所有图片容器，r1为半径，len1为图片个数，
// len1可以在函数内部处理  const len = items.lengthexport function rotateAnimate(dom, r1, len1) {const items = dom;// 图片个数const len = len1;// 旋转半径const r = r1;// 计算相邻两个的角度const pieDeg = 360 / len;// 移动每一张图片到响应位置for (let i = 0; i < len; i++) {// 每张图与第一张图的夹角let t = i * pieDeg// 因为sin  cos 需要转化成Π（pai）的角度形式t = (Math.PI / 180) * t// 这里需要用到数学公式 根据半径角度计算x，y轴距离const x = Math.sin(t) * rconst y = -Math.cos(t) * r// 然后移动到相应位置items[i].style.transform = `translate(${x}px,${y}px)`}
}

这个特效是需要使用css即可制作。

实现原理：利用伪元素before和after 实现，在before中设置线条的颜色，旋转动画、速度等

在after中使用遮罩将线条其余部分遮盖。

<button class="btn">按钮</button>.btn {background-color: transparent;border-radius: 10px;border: none;width: 100px;height: 60px;color: red;position: relative;outline: none;margin-left: 10%;overflow: hidden;
}// 这里是设置一个 以按钮中心旋转的矩形，父组件设置overflow：hidden
将会形成一个在按钮中旋转的图形.btn::before {content: '';position: absolute;background-color: red;width: 200%;height: 200%;z-index: -2;left: 50%;top: 50%;transform-origin: 0 0;animation: rotate 3s infinite linear;
}// 这里就是设置一个遮罩层，将除了最外层线条旋转部分,其余部分遮盖住，即可实现。
// 这里需要你计算，你要留出的旋转线条宽度
.btn::after {content: '';position: absolute;background-color: #fff;width: calc(100% - 5px);z-index: -1;height: calc(100% - 5px);left: 2.5px;top: 2.5px;border-radius: 10px;
}

水印制作组件封装

原理：利用canvas画布功能绘制水印组件，并将其添加到页面中，利用toDataURL('image/png')将图片转为base64格式，并设置样式实现固定定位。

export const addWaterMarker = (str, parentNode, font, textColor) => {// str为内容，parentNode为dom节点// 创建画布let can = document.createElement('canvas');// 添加到页面中parentNode.appendChild(can);// 画布大小can.width = 200;can.height = 200;can.style.display = 'none'// 设置上下文环境，进行绘制let cans = can.getContext('2d')cans.rotate(-(Math.PI / 180) * 20);cans.font = font || '16px'cans.fillStyle = textColor || '#000'cans.textAlign = 'left';cans.textBaseline = 'middle';cans.fillText(str, can.width / 10, can.height / 2);const styleCss = {backgroundImage: `url(${can.toDataURL('image/png')})`,backgroundAttachment: 'fixed'}for (let key in styleCss) {parentNode.style[key] = styleCss[key]}
}

实现按钮边框动画+摩天轮旋转动画+水印实现相关推荐

简单html摩天轮动画效果,2D模拟实现摩天轮旋转动画特效
这次给大家带来2D模拟实现摩天轮旋转动画特效,使用2D模拟实现摩天轮旋转动画特效的注意事项有哪些,下面就是实战案例,一起来看一下. 先看效果图: 由于上传的大小原因,只能录制成这种效果,原图是无限循环 ...
html摩天轮效果,用CSS3 animation模拟摩天轮旋转动画效果
这次我们来实现一个简单又很有意思的动画效果,完全由CSS 的animation来实现,素材和源码来自于其他网站,个人对源码做了一些改动优化完成后的效果--旋转效果 (github pages打开特别 ...
纯css摩天轮旋转动画
布局(html代码块) <body><div class="box"><div class="pic1"><img s ...
用css3实现摩天轮旋转的动画效果
用css3实现摩天轮旋转的动画效果 1.CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @ke ...
第4章第13节：创建漂亮的色轮旋转动画 [SwiftUI快速入门到实战]
本节课演示如何制作一个彩色的圆环,进而创建漂亮的色轮旋转动画. 首先添加一个布尔类型的属性,标识是否开始播放动画. 添加一个ZStack视图,作为子视图的容器.接着创建一个简单的圆形图形. 给圆形设置 ...
CSS3 摩天轮旋转特效
1.效果图 2.案例分析这各效果分别由两部分组成:摩天轮和小朋友. 摩天轮作为div(居中显示)的背景图片小朋友是通过定位定在指定位置的通过css3 动画animation与transform属 ...
CSS3 元素转圈动画（元素旋转动画）
CSS3 元素转圈动画 (元素旋转动画) <!DOCTYPE html> <html> <head> <style> div { width:100px ...
html摩天轮效果,用js和纯css分别实现摩天轮效果动画
小弟最近在找工作,刚好今天面试笔试的时候遇到一个题: 大概实现后的效果应该是这样的: 说来惭愧,原来只写过简单的平移和隐藏显示动画,还真没接触过这种动画效果.... 思路: 1.先画一个圆 2.然后将 ...
3dsmax动画三、旋转动画及分离支点。
①分别创建茶壶(teapot)和tube(管状物). ②制作茶壶倒水的动画. 第0帧到第12帧做一个拿起来,移动的操作. 再第12帧到第24帧做一个旋转茶壶的动作. 首先在第12帧做一个旋转起始帧.然 ...

实现按钮边框动画+摩天轮旋转动画+水印实现

如何实现呢？

实现按钮边框动画+摩天轮旋转动画+水印实现相关推荐

最新文章

热门文章