web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
动画效果
基于SVG的jquery动画特效
分类:
动画效果
日期:
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
##### HTML结构 ```html
Reload
``` ##### CSS样式 ```html html, body { height: 100%; width: 100%; overflow: hidden; background: linear-gradient(180deg, #E8F4FA, #E1F1F9); } .reload-button { width: 100px; position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%) translateZ(0); text-align: center; background: #FFFFFF; padding: 8px 16px; cursor: pointer; border: 3px solid #B5D3E8; border-radius: 5px; color: #B5D3E8; transition: transform 0.1s; user-select: none; } .reload-button:hover { transform: translate(-50%, -1px); box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2); } .stack-illustration { display: block; position: relative; top: 50%; height: 50%; min-height: 230px; margin: 0 auto; transform: translateY(-50%) translateZ(0); } svg:not(:root).stack-illustration { overflow: visible; } .stack-illustration__item { position: relative; } .stack-illustration__item--one { transform: rotate(-20deg) translate(-3px, 80px) translateZ(0); } .stack-illustration__item--one.animated { animation: popupLeft 0.75s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 1; } .stack-illustration__item--one.animated.secondary { animation: hoverLeft 3s linear forwards infinite; } .stack-illustration__item--two { transform: translate(52px, 54px) translateZ(0); } .stack-illustration__item--two.animated { animation: popupCenter 0.75s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 1; } .stack-illustration__item--two.animated.secondary { animation: hoverCenter 3s linear forwards infinite; } .stack-illustration__item--three { transform: rotate(20deg) translate(100px, 34px) translateZ(0); } .stack-illustration__item--three.animated { animation: popupRight 0.75s 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 1; } .stack-illustration__item--three.animated.secondary { animation: hoverRight 3s linear forwards infinite; } @keyframes popupLeft { 0% { transform: rotate(-20deg) translate(-3px, 80px) translateZ(0); } 60% { transform: rotate(-20deg) translate(-3px, 17px) translateZ(0); } 80% { transform: rotate(-20deg) translate(-3px, 20px) translateZ(0); } 100% { transform: rotate(-20deg) translate(-3px, 19px) translateZ(0); } } @keyframes popupCenter { 0% { transform: translate(52px, 54px) translateZ(0); } 60% { transform: translate(52px, -2px) translateZ(0); } 80% { transform: translate(52px, 1px) translateZ(0); } 100% { transform: translate(52px, 0px) translateZ(0); } } @keyframes popupRight { 0% { transform: rotate(20deg) translate(100px, 34px) translateZ(0); } 60% { transform: rotate(20deg) translate(100px, -30px) translateZ(0); } 80% { transform: rotate(20deg) translate(100px, -27px) translateZ(0); } 100% { transform: rotate(20deg) translate(100px, -28px) translateZ(0); } } @keyframes hoverLeft { 0% { transform: rotate(-20deg) translate(-3px, 19px) translateZ(0); } 50% { transform: rotate(-20deg) translate(-3px, 21px) translateZ(0); } 100% { transform: rotate(-20deg) translate(-3px, 19px) translateZ(0); } } @keyframes hoverCenter { 0% { transform: translate(52px, 0px) translateZ(0); } 40% { transform: translate(52px, 2px) translateZ(0); } 100% { transform: translate(52px, 0px) translateZ(0); } } @keyframes hoverRight { 0% { transform: rotate(20deg) translate(100px, -28px) translateZ(0); } 60% { transform: rotate(20deg) translate(100px, -26px) translateZ(0); } 100% { transform: rotate(20deg) translate(100px, -28px) translateZ(0); } } ``` ##### JAVASCRIPT ```html function applyHover() { var animatedItemsArr = $.makeArray($('.animated')); var animationDuration = 750; //ms var animationOffset = 400; //ms animatedItemsArr.map(function(item, index) { setTimeout(function() { $(item).addClass('secondary'); }, animationDuration + ((index) * animationOffset)) }); } // For reloading the animaiton :) $('.reload-button').on('click', function() { $('.secondary').removeClass('secondary'); $('.animated').removeClass('animated'); setTimeout(function() { $('.stack-illustration__item').addClass('animated'); applyHover(); }, 1); }) $( document ).ready( applyHover ); ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告