1. 程式人生 > >css-點選按鈕實現水滴動畫

css-點選按鈕實現水滴動畫

平常在使用APP的時候,當用戶點選某個按鈕的時候,按鈕會出現水滴的效果,原生APP開發的時候,會提供相關的動畫,如果在PC端或者H5的時候想實現這個效果,也可以找一些相關的庫來進行開發,但是為了某一個小小的互動而引入外部的JS和CSS,始終感覺不划算,自己如果用css+js來進行開發,可能體驗和開發會更加方便。

一、CSS

<style>
	.btn {
	    display: block;
	    width: 300px;
	    height: 100px;
	    line-height: 100px;
	    outline: 0;
	    overflow: hidden;
	    position: relative;
	    transition: .3s;
	    text-align: center;
	    cursor: pointer;
	    user-select: none;
	    font-size: 50px;
	    background: tomato;
	    color: #fff;
	    border-radius: 10px;
	}
	
	.btn>span {
	    position: absolute;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 100%;
	}
	
	.btn>span:after {
	    content: '';
	    background: transparent;
	    border-radius: 50%;
	    width: 100%;
	    padding-top: 100%;
	    position: absolute;
	    margin-left: -50%;
	    margin-top: -50%;
	    left: var(--x, -100%);
	    top: var(--y, -100%);
	}
	
	.btn>input[type=checkbox] {
	    display: none
	}
	
	.btn>input[type=checkbox]+span:after {
	    animation: ripple-in 1s;
	}
	
	.btn>input[type=checkbox]:checked+span:after {
	    animation: ripple-out 1s;
	}
	
	@keyframes ripple-in {
	    0% {
	        transform: scale(0);
	        background: rgba(0, 0, 0, .25)
	    }
	    100% {
	        transform: scale(1.5);
	        background: transparent
	    }
	}
	
	@keyframes ripple-out {
	    0% {
	        transform: scale(0);
	        background: rgba(0, 0, 0, .25)
	    }
	    100% {
	        transform: scale(1.5);
	        background: transparent
	    }
	}
</style>
//tip:var()是CSS3提供的函式屬性值修改
//地址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/var

二、HTML

<body>
	<label class="btn" tabindex="1">
        <input type="checkbox">
        <span onclick="ripple(this,event)">這是一個可點選區域</span>
    </label>
</body>

三、js

//獲取當前使用者點選的位置,然後從當前點選的位置進行放大
<script>
   function ripple(dom, ev) {
        var x = ev.offsetX;
        var y = ev.offsetY;
        dom.style.setProperty('--x', x + 'px');
        dom.style.setProperty('--y', y + 'px');
    }
</script>
//setProperty()用來從新設定一個新的CSS屬性
//地址:http://www.runoob.com/jsref/met-cssstyle-setproperty.html