HTML+CSS制作鼠标悬停效果

html-css020

HTML+CSS制作鼠标悬停效果,第1张

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>鼠标悬停效果</title>

    <style type="text/css">

        *{

            margin: 0

            padding: 0

        }

        body{

            background-color: #000

        }

        a{

            width: 200px

            height: 50px

            display: block

            text-align: center

            line-height: 50px

            text-decoration: none

            position: absolute

            top: 50%

            left: 50%

            transform: translate(-50%,-50%)

            font-size: 24px

            font-weight: bold

            color: white

            border: 1px solid white

            overflow: hidden

        }

        a::before{

            content: ""

            position: absolute

            top: 0

            left: -100%

            width: 100%

            height: 100%

            background-image: linear-gradient(60deg,transparent,rgba(146,148,248,.4),transparent)

            transition: all 0.5s

        }

        a:hover::before{

            left: 100%

        }

        a:hover{

            box-shadow: 0 2px 10px 8px rgba(146,148,248,.4)

        }

    </style>

</head>

<body>

    <a href="#">鼠标悬停效果</a>

</body>

</html>

CSS+HTML<悬停下划线效果>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        body {

            display: flex

            height: 100vh

            justify-content: center

            align-items: center

        }

        ul {

            padding: 0

            margin: 0

            list-style-type: none

        }

        ul li{

            padding: 5px 0

        }

        ul li a {

            position: relative

            display: inline-block

            text-decoration: none

            color: #3a3a3a

            /* 转大写 */

            text-transform: uppercase

            padding: 4px 0

            transition: 0.5s

            font-weight: bold

        }

        ul li a::after {

            position: absolute

            content: ""

            width: 100%

            height: 3px

            top: 100%

            left: 0

            background: #347cdb

            transition: transform 0.5s

            transform: scaleX(0)

            transform-origin: right

        }

        ul li a:hover {

            color: #585858

            text-shadow: 0 0 10px #ccc

        }

        ul li a:hover::after {

            transform: scaleX(1)

            transform-origin: left

        }

    </style>

</head>

<body>

    <ul>

        <li><a href="#">home</a></li>

        <li><a href="#">archives</a></li>

        <li><a href="#">tags</a></li>

        <li><a href="#">categories</a></li>

        <li><a href="#">about</a></li>

    </ul>

</body>

</html>

1、首先,打开HTML编辑器并创建一个新的HTML文件,比如index.html。

2、在index.html中的<style>标签中,输入css代码:button {background-color: #00a7d0}

button:hover {background-color: #ff7701}。

3、当浏览器运行索引index.html页面中,出现蓝色背景颜色的按钮。

4、将鼠标移到按钮上,按钮的背景颜色将变为橙色。

鼠标选中后,背景变色的方法:如:改变选中后,选中区域的背景颜色为浅蓝色。在css中写入如下代码:/* webkit, opera, IE9 */::selection { background:lightblue}/* mozilla firefox */::-moz-selection { background:lightblue}说明:1、-moz-属性前缀是个火狐浏览器用的,而基本的::selection选择器是给谷歌浏览器用的。2、background后面可以直接使用颜色值。如:::selection { background:#ffff00}另外:跟其它CSS选择器的用法一样,也可以嵌套使用,在不同的地方显示不同的颜色。如下:/* webkit, opera, IE9 */div.highlightBlue::selection { background:lightblue}/* mozilla firefox */div.highlightBlue::-moz-selection { background:lightblue}</p><p>/* webkit, opera, IE9 */div.highlightPink::selection { background:pink}/* mozilla firefox */div.highlightPink::-moz-selection { background:pink}