svg+css 或者js制作打鉤的動(dòng)畫(huà)效果
發(fā)布時(shí)間：2020-03-31 15:33:10 作者：Published 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了svg+css 或者js制作打鉤的動(dòng)畫(huà)效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
之前老板讓做一個(gè)登陸后 可以顯示一個(gè)打鉤的效果 百度死活搜不到 今天在B站看到的一個(gè)視頻居然有 根據(jù)需求改進(jìn)了一下廢話不多說(shuō)先看效果！
html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打鉤動(dòng)畫(huà)</title>
</head>
<body>
<div id="d1">
<input type="checkbox" style="display: none" id="love1" />
<label for="love1" id="btn1" >完成</label>
<svg width="200px" height="200px">
<circle r="90" class="circle" fill="none" stroke="#2de540" stroke-width="10" cx="100" cy="100" stroke-linecap="round" transform="rotate(-90 100 100) " ></circle>
<polyline fill="none" stroke="#2de540" stroke-width="10" points="44,107 86,137 152,69" stroke-linecap="round" stroke-linejoin="round" class="tick" ></polyline>
</svg>
<h2 style="text-align: center;width: 200px">成功</h2>
</div>
</body>
<!--這里引入你本地的jq-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</html>
css代碼
h2 {
font-family: Helvetica;
font-size: 30px;
margin-top: 20px;
color: #333;
opacity: 0;
}
input[type="checkbox"]:checked+ label ~ h2 {
animation: .6s title ease-in-out;
animation-delay: 1.2s;
animation-fill-mode: forwards;
}
.circle {
stroke-dasharray: 1194;
stroke-dashoffset: 1194;
}
input[type="checkbox"]:checked + label + svg .circle {
animation: circle 1s ease-in-out;
animation-fill-mode: forwards;
}
.tick {
stroke-dasharray: 350;
stroke-dashoffset: 350;
}
input[type="checkbox"]:checked + label+ svg .tick {
animation: tick .8s ease-out;
animation-fill-mode: forwards;
animation-delay: .95s;
}
@keyframes circle {
from {
stroke-dashoffset: 1194;
}
to {
stroke-dashoffset: 2388;
}
}
@keyframes tick {
from {
stroke-dashoffset: 350;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes title {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
label {
display: inline-block;
height: 38px;
width: 38px;
line-height: 38px;
padding: 0 18px;
background-color: #1E9FFF;
color: #fff;
white-space: nowrap;
text-align: center;
font-size: 14px;
border: none;
border-radius: 2px;
cursor: pointer;
}
#d1 {
display: flex;
justify-content: center;
min-height: 100px;
flex-direction: column;
}
寫(xiě)到這里本來(lái)應(yīng)該就結(jié)束了 但是我們?cè)谡嬲龑?shí)現(xiàn)功能的時(shí)候 不太可能用 checkbox切換動(dòng)畫(huà)效果的顯示 一般還是需要按鈕操作動(dòng)畫(huà)效果 下面是jq操作的代碼 其實(shí)用jq的.animate()更好一些但是我是小白所以就偷了個(gè)懶 (ps:好吧其實(shí)是不會(huì))直接用.css()
JavaScript代碼
$("#btn1").on("click",function () {
if($(this).text()==="完成"){
$(".circle").css({'animation':'circle 1s ease-in-out','animation-fill-mode':'forwards'});
$(".tick").css({'animation':'tick .8s ease-out','animation-fill-mode':'forwards','animation-delay':'.95s'});
$("h2").css({'animation':'.6s title ease-in-out','animation-fill-mode':'forwards','animation-delay':'1.2s'})
$(this).text("取消")
}else{
$(".circle").css({'animation':'none','animation-fill-mode':'none'});
$(".tick").css({'animation':'none','animation-fill-mode':'none'});
$("h2").css({'animation':'none','animation-fill-mode':'none'})
$(this).text("完成")
}
});
到此這篇關(guān)于svg+css 或者js制作打鉤的動(dòng)畫(huà)效果的文章就介紹到這了,更多相關(guān)svg css 打鉤動(dòng)畫(huà)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
基于 CSS 動(dòng)畫(huà)的 SVG 按鈕實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家介紹了基于 CSS 動(dòng)畫(huà)的 SVG 按鈕的實(shí)現(xiàn)方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-10-12
CSS使用SVG實(shí)現(xiàn)動(dòng)態(tài)分布的圓環(huán)發(fā)散路徑動(dòng)畫(huà)
這篇文章主要介紹了CSS使用SVG實(shí)現(xiàn)動(dòng)態(tài)分布的圓環(huán)發(fā)散路徑動(dòng)畫(huà),第一時(shí)間看到這個(gè)需求想到的就是 SVG 或者 Canvas，但是由于開(kāi)發(fā)時(shí)可能還需要插入其他元素，所以這里還是希2022-10-27
