小编Azi*_*ziz的帖子

如何在悬停时创建动画边框

我想在这个网站中创建一个悬停效果:

http://themes.creiden.com/circleflip/blog-with-sidebar/

只需将鼠标悬停在"更多"链接上即可.

http://joxi.ru/uXHGU_3JTJBkDpt35Iw

所以我试着这样做,但我只有这个变种

http://jsfiddle.net/TY8CQ/

码:

HTML

<a href="#">Click the link</a>

Run Code Online (Sandbox Code Playgroud)

CSS

body{
    padding: 100px;
    background: #f6f6f6;
}


a{
    display: block;
    width: 200px;
    position: relative;
    background: #fff;
    height: 40px;
    font: 14px/40px Tahoma;
    color: #39adf0;
    text-decoration: none;
    -webkit-transition: 0.2s;
    margin: auto;
    text-align: center;
    position: relative;
}

a:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: #39adf0;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;

}

a:before{
    content: '';
    position: absolute;
    top: 0;
    right: …

Run Code Online (Sandbox Code Playgroud)

css jquery css3 css-transitions

Azi*_*ziz

2014 07-16

8
推荐指数

2
解决办法

1万
查看次数

在 vite build 命令之后在 url laravel 9 vite 中附加“build”

Laravel 9 使用 vite Vue 3、Vue-router 运行命令 vite build 并关闭 vite 服务器，浏览器 url 中的所有链接均获取 '/build/'

在代码中

<router-link to="/index">Index</router-link>
<router-link to="/">Main</router-link>
<router-view></router-view>

Run Code Online (Sandbox Code Playgroud)

在浏览器中

投票配置

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [
        vue(),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Run Code Online (Sandbox Code Playgroud)

刀刃

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

        @vite(['resources/css/app.css', 'resources/js/app.js'])
        <!-- Styles --> …

Run Code Online (Sandbox Code Playgroud)

vue-router vuejs3 vite laravel-9

Azi*_*ziz

lucky-day

3
推荐指数

2
解决办法

1637
查看次数