使用css/html/javascript將笑臉轉換成悲傷

-1

我有創建一英里的代碼。現在我想要一個從0級到12級的滑動條，並且在更改此欄值時，我想將此笑容轉換爲悲傷。使用css/html/javascript將笑臉轉換成悲傷

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

<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>

這是用於製造smilee 現在我想提出一個滑塊值從0到12，它從微笑轉換成傷心

來源

2017-02-19 Dexter

請添加您爲側欄試用的代碼示例 –

爲什麼在與Java沒有關係時標記這個問題'java'？ –

要映射代碼將滑塊位置設置爲CSS變換屬性的值。

<input type="range" id="mySlider" value="90" onChange='changeSmile()'> 

function changeSmile() { 
    const val = document.getElementById("mySlider").value; 
    const smileDiv = document.getElementById('smile').style.transform = `rotate(${val}deg)`; 
}

然後將其從班級微笑更改爲ID。一個類是通用的，一個id是特定於一個元素的。

來源

2017-02-19 14:58:45 Carlo

我會做它會在下列情況下的方式：

創建只有底邊框可見光和邊界半徑設置爲50％，給它一個半圓（笑）:)形狀，然後改變DIV當邊界半徑爲和當滑塊值改變，使其從笑臉變爲無語的臉:|現在正在做，讓它一個悲傷的臉看看滑動值是否低於50％，如果是的話，然後旋轉div 180度，並且隨着值的增加再次增加邊界半徑，產生相反方向的半圓導致傷心面:( 因此，在滑塊的不同值期間的各種值應如下所示：

滑塊值100 - 邊框半徑50％ - 旋轉0

滑塊值50 - 邊框半徑0％ - 旋轉0

滑塊值0 - 邊界半徑50％ - 旋轉180度

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

哦，你也將需要改造的div Y軸等於「分區的-height」，嘗試雷莫ving從演示變換代碼並嘗試它，你就會知道爲什麼:)

來源

2017-02-19 15:29:39 Zeus

使用css/html/javascript將笑臉轉換成悲傷

回答

相關問題