700字范文 > css实现花哨效果及关键帧小动画

css实现花哨效果及关键帧小动画

时间：2019-02-06 17:05:22

相关推荐

css实现花哨效果及关键帧小动画

盒子阴影

// box-shadow: left top opacity out-width color inset/**left 左边值（水平方向）*top 顶部值（垂直方向）*opacity 透明度*out-width 阴影外延宽度*color 阴影颜色*inset （属性固定值）向内填充阴影，该属性选填，默认外填充*/

水平线性渐变

.boxs{width: 200px;height: 100px;background: #fff;margin-top: 50px;box-sizing: border-box;color: #fff;line-height: 100px;text-align: center;box-shadow: 0px 0px 5px 3px #fff inset; //内填充阴影background: linear-gradient(90deg,#b15cff 0%,#0ceee3 100%);}

竖向（只是更改旋转度数即可）

径向渐变（圆形）

.boxs{width: 100px;height: 100px;background: #fff;margin-top: 50px;box-sizing: border-box;color: #fff;line-height: 100px;text-align: center;box-shadow: 0px 0px 5px 3px #fff inset;background: radial-gradient(red 5%, pink 35%, yellow 76%);}

圆锥渐变

动画爱心+光效按钮动效

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浩浩❤️茜茜</title></head><style>.html,body{width: 100vh;height: 100vh;margin: 0;padding: 0;box-sizing: border-box;list-style: none;}h1{color:#fff;text-align: center;width: max-content;padding-top: 45%;transform: translateY(-50%);}.wrap{width: 100vw;height: 100vh;background: #000;display: flex;justify-content: space-around;}ul{width: max-content;height: 200px;display: flex;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}ul>li{width: 10px;height: 20px;margin: 0 10px;border-radius: 10px;}li:nth-child(1){background: red;animation: love1 5s 0s infinite;}li:nth-child(2){background: rgb(61, 239, 245);animation: love2 5s 0.2s infinite;}li:nth-child(3){background: rgb(250, 165, 108);animation: love3 5s 0.4s infinite;}li:nth-child(4){background: rgb(239, 68, 245);animation: love4 5s 0.6s infinite;}li:nth-child(5){background: rgb(233, 245, 61);animation: love5 5s 0.8s infinite;}li:nth-child(6){background: rgb(239, 68, 245);animation: love4 5s 1s infinite;}li:nth-child(7){background: rgb(250, 165, 108);animation: love3 5s 1.2s infinite;}li:nth-child(8){background: rgb(61, 239, 245);animation: love2 5s 1.4s infinite;}li:nth-child(9){background: red;animation: love1 5s 1.6s infinite;}@keyframes love1{30%,50%{height: 60px;transform: translateY(-30px);}70%,100%{height: 20px;transform: translateY(0);}}@keyframes love2{30%,50%{height: 125px;transform: translateY(-60px);}70%,100%{height: 20px;transform: translateY(0);}}@keyframes love3{30%,50%{height: 160px;transform: translateY(-75px);}70%,100%{height: 20px;transform: translateY(0);}}@keyframes love4{30%,50%{height: 180px;transform: translateY(-60px);}70%,100%{height: 20px;transform: translateY(0);}}@keyframes love5{30%,50%{height: 200px;transform: translateY(-45px);}70%,100%{height: 20px;transform: translateY(0);}}p{position: absolute;top: 70%;left: 50%; transform: translate(-50%,-50%);width: 400px;height: 120px;text-align: center;font-size: 32px;line-height: 120px;color: #fff;box-sizing: border-box;background: linear-gradient(90deg,#03a9f4, #f441a5, #ffeb3b, #03a9f4, #f441a5, #ffeb3b, #03a9f4);border-radius: 60px;background-size: 400%;z-index: 1;}p:hover{animation: animate 8s linear infinite;}@keyframes animate{0%{background-position: 0%;}100%{background-position: 400%;}}p::before{content: '';position: absolute;top:-5px;left: -5px;right: -5px;bottom: -5px;z-index: -1; background: linear-gradient(90deg,#03a9f4, #f441a5, #ffeb3b, #03a9f4, #f441a5, #ffeb3b, #03a9f4);border-radius: 40px;background-size: 400%;filter: blur(20px);opacity: 0;/* transition: 1s; */}p:hover::before{filter: blur(20px);opacity: 1;animation: animate 8s linear infinite;}</style><body><div class="wrap"><h1>浩浩</h1><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><h1>茜茜</h1><p>遇见你是一生的幸事</p></div></body></html>

按钮呼吸效果

盒子阴影水平线性渐变竖向（只是更改旋转度数即可）径向渐变（圆形）圆锥渐变动画爱心+光效按钮动效转盘抽奖加载中... 三个点动效度动态画圆圈进度动态画圆形

<p className="btn">点我</p>

.btn{width: 300px;height: 150px;color: #fff;background: red;animation: free_download 1s linear alternate infinite;}@keyframes free_download{0%{transform:scale(0.9);}100%{transform:scale(1);}}

转盘抽奖

慢慢旋转至选中结果

// 开始旋转const startRotate = () => {if (isStart) return // 防用户连点setIsStart(true) // hooks写法设置防连点开关$('.scale-dial').css({// 清除上一次旋转角度'transform': `rotate(0deg)`,'transition': 'transform 0s'})switch (Number(awardText.status)) {// 根据后端返回抽奖结果判断旋转的最终角度case 1: stopRotate(5, 85); breakcase 2: stopRotate(185, 265); breakcase 3: stopRotate(275, 355); breakcase 4: stopRotate(95, 175); breakdefault: break}}// 停止动画const stopRotate = async (min, max) => {setTimeout(() => {// 等待清除上次旋转的角度后再开始旋转$('.scale-dial').css({'transform': `rotate(${Math.floor(Math.random() * (max - min) + min) + 1080}deg)`, // 1080 是使用户视觉上感觉未出结果前的旋转推荐360的倍数'transition': 'transform 3s ease-out'})}, 10)setTimeout(() => {// 展示旋转抽中的结果调起结果弹窗并更新抽奖历史（具体需求随机应变）showMask(true)setIsStart(false)getRewardList()}, 4000)}

加载中… 三个点动效

<p className="pi-pei">正在匹配队友<span className="dotting"></span></p>

.pi-pei{width: 196px;height: 40px;font-size: 28px;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #FEDE75;line-height: 40px;margin: 0 auto 18px;}.dotting {display: inline-block; width: 18px; min-height: 4px;padding-right: 4px;border-left: 4px solid currentColor; border-right: 4px solid currentColor; background-color: currentColor; background-clip: content-box;box-sizing: border-box;animation: dot 3s infinite step-start both;}.dotting:before {content: '...'; } /* IE8 */.dotting::before {content: ''; }:root .dotting {margin-left: 4px; padding-left: 4px; } /* IE9 */@keyframes dot {25% {border-color: transparent; background-color: transparent; }/* 0个点 */50% {border-right-color: transparent; background-color: transparent; } /* 1个点 */75% {border-right-color: transparent; }/* 2个点 */}

度动态画圆圈

<!DOCTYPE html><html><head><meta charset="UTF-8"><style type="text/css">#myCanvas{margin: 0 auto;display: block;}</style></head><body><canvas id="myCanvas">当前浏览器不支持canvas组件请升级！</canvas><script type="text/javascript">//方法一：arc 动态画圆var c = document.getElementById('myCanvas');var ctx = c.getContext('2d');var mW = c.width = 300;var mH = c.height = 300;var lineWidth = 5;var r = mW / 2; //中间位置var cR = r - 4 * lineWidth; //圆半径var startAngle = -(1 / 2 * Math.PI); //开始角度var endAngle = startAngle + 2 * Math.PI; //结束角度var xAngle = 1 * (Math.PI / 180); //偏移角度量var fontSize = 35; //字号大小var tmpAngle = startAngle; //临时角度变量//渲染函数var rander = function(){undefinedif(tmpAngle >= endAngle){undefinedreturn;}else if(tmpAngle + xAngle > endAngle){undefinedtmpAngle = endAngle;}else{undefinedtmpAngle += xAngle;}ctx.clearRect(0, 0, mW, mH);//画圈ctx.beginPath();ctx.lineWidth = lineWidth;ctx.strokeStyle = '#1c86d1';ctx.arc(r, r, cR, startAngle, tmpAngle);ctx.stroke();ctx.closePath();//写字ctx.fillStyle = '#1d89d5';ctx.font= fontSize + 'px Microsoft Yahei';ctx.textAlign='center';ctx.fillText( Math.round((tmpAngle - startAngle) / (endAngle - startAngle) * 100) + '%', r, r + fontSize / 2);requestAnimationFrame(rander);};rander();</script></body></html>

进度动态画圆形

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#canvas {width: 200px;height: 200px;}</style></head><body><canvas id="canvas" width="800" height="800" ></canvas><script>const ctx = document.getElementById('canvas').getContext('2d');let count=0ctx.translate(400, 400);const drawRoate=(sec)=>{console.log(sec)ctx.clearRect(-400,-400,800,800);// 开始一条新路径ctx.beginPath();// 移动到圆心ctx.moveTo(0, 0);// 绘制圆弧 540-1260ctx.arc(0, 0, 350, Math.PI * (540/360), Math.PI * ((sec>1260?540:sec)/360), false);// 闭合路径ctx.fillStyle = 'red';ctx.closePath();ctx.fill();}let deg = 540const timer=setInterval(()=>{deg=deg>1260?540:deg+5if(count===4&&deg>1260) {console.log('已全部完成',deg,count)clearInterval(timer)return }if(deg>1260) {count++console.log('deg已完成一周',deg,'完成几次了',count)drawRoate(540)return}drawRoate(deg)},10)</script></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。