css+js动画
vicsdmpy
这个作者很懒,什么都没留下…
展开
-
大图轮播效果
效果如图,原理比较简单直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .box{ ..原创 2020-10-24 03:27:11 · 208 阅读 · 0 评论 -
拖动验证码功能
效果如上图(有点简陋),原理就是先给图片添加draggable="false"禁止默认拖动事件,获取眼睛图片对象添加addEventListener,通过公式(移动后鼠标点击位置距离左边的长度 - (移动前鼠标点击位置距离左边的长度-移动前眼睛图片距离左边的长度)求得移动后眼睛图片距离左边的长度,通过定位设置眼睛最终的位置,高度同理,然后document.removeEventListener去掉事件监听,再根据事先测量好的位置来判断是否正确(移动端同理,把鼠标mouse事件换成touch相关事件即可)..原创 2020-10-08 23:43:11 · 840 阅读 · 0 评论 -
前端百叶窗动画效果
先看效果原理就是先把页面分成x列等宽的div,然后每一列根据你想要的动画变幻的次数再分成几个div,每一次动画变化实际上就是每一个小div宽度由0%变成100%的过程,以此类推,下面上代码(vue模板)学习视频源地址:https://www.bilibili.com/video/BV17y4y1y7Awhtml部分<template> <div class="hello"> <div class="con d1"> <d原创 2020-10-05 18:02:07 · 1183 阅读 · 0 评论 -
前端火箭飞行效果
效果如图,原理就是一个火箭的图标做上下颤动的动画,喷气条是一个颜色渐变的长方块,四周的白条是几十条随即长度,动画时间随机的长条,下面上代码(用vue模板写的)学习视频源地址(原生js写):https://www.bilibili.com/video/BV14K411P7LAhtml部分<template> <div class="hello"> <div class="rocket"> <img src="./...原创 2020-10-05 17:34:00 · 623 阅读 · 0 评论