javascript - 使用 css/html/javascript 将微笑转化为悲伤

Question

我有创建英里的代码。现在我想要一个从 0 级到 12 级的 slider ，并且在改变这个 slider 值时，我想把这个微笑变成悲伤。

  div.smileyface {
    	width: 300px;
    	height: 300px;
    	position: relative;
    	border-radius: 150px;
    	-webkit-border-radius: 150px;
    	-moz-border-radius: 150px;
    	display: block;
    	background: #ffe632;
    	background: -webkit-gradient(linear, left top, left bottom, from(#fffe8d), to(#f6d23e));
    	background: -moz-linear-gradient(top,  #fffe8d,  #f6d23e);	
    	box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
    	-webkit-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
    	-moz-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
    	}
    	
    p.eyes {
    	width: 50px;
    	height: 80px;
    	background: #222;
    	border-radius: 100px/160px;
    	-webkit-border-radius: 100px 160px;
    	-moz-border-radius: 100px/160px;
    	position: absolute;
    	top: 40px;
    	box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
    	-webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
    	-moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
    	}	
    	
    	p.eyes.lefteye {
    		left: 75px;
    		}
    		
    	p.eyes.righteye {
    		right: 75px;
    		}
    		
    div.smile {
    	width: 200px;
    	height: 70px;
    	border: 10px solid #222;
    	border-top: 0;
    	background: rgba(0,0,0,0);
    	-moz-border-radius: 0 0 120px 120px / 0 0 90px 90px;
    	-webkit-border-radius: 0 0 120px 120px 0 0 90px 90px;
    	border-radius: 0 0 120px 120px / 0 0 90px 90px;
    	position: absolute;
    	bottom: 50px;
    	left: 38px;
    	box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
    	-webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
    	-moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
    	}
    	
    div.corner {
    	width: 10px;
    	height: 30px;
    	background: #222;
    	border-radius: 100px/160px;
    	-webkit-border-radius: 100px 160px;
    	-moz-border-radius: 100px/160px;
    	position: absolute;
    	top: -12px;
    	-webkit-transform: rotate(65deg);
    	-moz-transform: rotate(65deg);
    	left: -12px;
    	}
    	
    	div.corner.right {
    		left: 202px;
    		-webkit-transform: rotate(-65deg);
    		-moz-transform: rotate(-65deg);		
    		}

    <div class="smileyface">
        <p class="eyes lefteye"></p>
        <p class="eyes righteye"></p>
        <div class="smile">
            <div class="corner"></div>
            <div class="corner right"></div>
        </div>
    </div>

这是制作笑脸的代码现在我想将 slider 值从 0 到 12，并将其从微笑转换为悲伤

Answer 1

我会按照以下方式完成:

创建只有底部边框可见且 border-radius 设置为 50% 的 div，使其成为半圆(微笑):) 形状，然后根据 slider 值更改 border-radius改变让它从微笑到无语的脸 :| 现在完成它给它一个悲伤的脸看看 slider 值是否低于 50% 如果是则将 div 旋转 180 度随着值变低，再次增加边界半径，在相反的方向给出半圆，导致悲伤的脸 :(因此， slider 不同值期间的各种值应该是这样的:

slider 值 100 - 边框半径 50% - 旋转 0

slider 值 50 - 边框半径 0% - 旋转 0

slider 值 0 - 边框半径 50% - 旋转 180 度

演示: https://jsfiddle.net/c620onvh/

哦，你还需要将 Y 轴上的 div 转换为“-height of div”，尝试从演示中删除 transformY 代码并尝试一下，你就会知道为什么了:)