酷炫的 css

by nick / On 2018年6月11日 / In html5, js, web

表单填充样式修改

:-webkit-autofill,
:-webkit-autofill:hover,
:-webkit-autofill:focus {    
    border: none;    
    -webkit-text-fill-color: #000; // 自定义字体的颜色    
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;// 背景色    
    transition: background-color 5000s ease-in-out 0s;    
    font-weight: 500;
}

按钮鼠标经过背景颜色渐变

<style>
.button {
    position: relative;
    appearance: none;
    background: #f72359;
    padding: 1em 2em;
    border: none;
    color: white;
    font-size: 1.2em;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    border-radius: 100px;
    }
span { position: relative; }
.button:hover::before { --size: 400px; }
.button::before { 
    --size: 0;  
    content: '';
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    background: radial-gradient(circle closest-side, #4405f7, transparent);
    transform: translate(-50%, -50%);
    transition: width .2s ease, height .2s ease;
}
</style>

<button class="button"><span>按钮</span></button>

<script>
document.querySelector('.button').onmousemove = (e) => {

    const x = e.pageX - e.target.offsetLeft
    const y = e.pageY - e.target.offsetTop

    e.target.style.setProperty('--x', `${ x }px`)
    e.target.style.setProperty('--y', `${ y }px`)
}
</script>

3D 悬浮效果

<style>
#box{
    width: 100%;
    height: 500px;
    background: white;
    padding: 100px 0; 
    margin: 100px auto;
    border: 1px solid #ddd;
    perspective: 1000px;
}
#banner{
    height: 300px;
    width: 400px;
    margin: 0 auto;
    background:  #37D7B2;
    transition: transform 0.1s;
    box-shadow: 0 0 15px rgba(0,0,0,0.25);
    text-align: center;
    line-height: 300px;
    font-size: 50px;
    color: #fff;
}
</style>
<div id="box">
    <div id="banner">banner</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
$('#box').on('mousemove', function(e){

  let offset = $('#box').offset()

  let x = e.pageX - offset.left
  let y = e.pageY - offset.top

  let centerX = $('#box').outerWidth() /2
  let centerY = $('#box').outerHeight() /2 

  let deltaX = x - centerX
  let deltaY = y - centerY

  let percentX = deltaX / centerX
  let percentY = deltaY / centerY

  let deg = 10

  $('#banner').css({
    transform: 'rotateX('+deg*-percentY + 'deg)'+
    ' rotateY('+deg*percentX+'deg)'
  })
})

$('#box').on('mouseleave', function(){
  $('#banner').css({
    transform: ''
  })
})
</script>

CSS3动画（360度旋转、旋转放大、放大、移动）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width:120px;
            height:120px;
            line-height:120px;
            margin: 20px;
            background-color: #5cb85c;
            float: left;
            font-size: 12px;
            text-align: center;
            color:orangered;
        }
        /*效果一：360°旋转 修改rotate(旋转度数)*/
        .img1 {
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }

        .img1:hover {
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
        }

        /*效果二：放大 修改scale(放大的值)*/
        .img2 {
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }

        .img2:hover {
            transform: scale(1.2);
            -webkit-transform: scale(1.2);
            -moz-transform: scale(1.2);
            -o-transform: scale(1.2);
            -ms-transform: scale(1.2);
        }
       /*效果三：旋转放大 修改rotate(旋转度数) scale(放大值)*/
        .img3 {
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }

        .img3:hover {
            transform: rotate(360deg) scale(1.2);
            -webkit-transform: rotate(360deg) scale(1.2);
            -moz-transform: rotate(360deg) scale(1.2);
            -o-transform: rotate(360deg) scale(1.2);
            -ms-transform: rotate(360deg) scale(1.2);
        }
        /*效果四：上下左右移动 修改translate(x轴,y轴)*/
        .img4 {
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }

        .img4:hover {
            transform: translate(0, -10px);
            -webkit-transform: translate(0, -10px);
            -moz-transform: translate(0, -10px);
            -o-transform: translate(0, -10px);
            -ms-transform: translate(0, -10px);
        }
    </style>
</head>
<body>
    <div class="img1">效果一：360°旋转 </div>
    <div class="img2">效果二：放大</div>
    <div class="img3">效果三：旋转放大</div>
    <div class="img4">效果四：上下左右移动 </div>
</body>
</html>

打赏作者