盒子阴影
// 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: 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(0deg,#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%);
}
圆锥渐变
.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: conic-gradient(#9ED110, #50B517, #179067,
#476EAF, #9f49ac, #CC42A2, #FF3BA7, #FF5800,
#FF8100, #FEAC00, #FFCC00, #EDE604);
border-radius: 50%;
}
动画爱心+光效按钮动效
<!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); break
case 2: stopRotate(185, 265); break
case 3: stopRotate(275, 355); break
case 4: stopRotate(95, 175); break
default: 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(){undefined
if(tmpAngle >= endAngle){undefined
return;
}else if(tmpAngle + xAngle > endAngle){undefined
tmpAngle = endAngle;
}else{undefined
tmpAngle += 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=0
ctx.translate(400, 400);
const drawRoate=(sec)=>{
console.log(sec)
ctx.clearRect(-400,-400,800,800);
// 开始一条新路径
ctx.beginPath();
// 移动到圆心
ctx.moveTo(0, 0);
// 绘制圆弧 540-1260
ctx.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 = 540
const timer=setInterval(()=>{
deg=deg>1260?540:deg+5
if(count===4&°>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>