vaebe

<style>
.gradient-text {
    font-size: 28px;
    background: linear-gradient(45deg, #f9d423, #ff4e50, #7b4397, #00c6ff);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shift 8s ease infinite, pulse 2s infinite alternate;
}

vaebe

vaebe

// todo 同时只能有一个元素进入画中画
export function useFloatingDiv() {
  const video = shallowRef<HTMLVideoElement | null>(null)
  let animationFrameId: number | null = null

  function cleanUp() {
    // 取消动画循环
    if (animationFrameId !== null) {
      cancelAnimationFrame(animationFrameId)
      animationFrameId = null

vaebe

export function usePictureInPicture(domId: string) {
  const getDom = () => document.getElementById(domId) as HTMLVideoElement

  const isPipActive = ref(false)

  async function enterPip() {
    const videoDom = getDom()
    if (videoDom) {
      try {
        await videoDom.requestPictureInPicture()

vaebe

.leaflet-popup-content-wrapper {
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    left: -50%;
    top: -50%;
    width: 200%;

vaebe

&:before {
    content: "";
    width: 100%;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to left, #7BBBDC, #7BBBDC) left top no-repeat, linear-gradient(to bottom, #7BBBDC, #7BBBDC) left top no-repeat, linear-gradient(to left, #7BBBDC, #7BBBDC) right top no-repeat, linear-gradient(to bottom, #7BBBDC, #7BBBDC) right top no-repeat;
    background-size: 2px 10px, 10px 2px, 2px 10px, 10px 2px;
}

vaebe

// https://www.npmjs.com/package/video-cover?activeTab=code
export class VideoCover {
  private video: HTMLVideoElement
  private canvas: HTMLCanvasElement
  private ctx: CanvasRenderingContext2D

  constructor(private url: string) {
    this.video = document.createElement('video')
    this.video.src = this.url
    this.video.crossOrigin = 'Anonymous'