CSS puro para lograr común de cinco puntas grados de la estrella y las puntuaciones demuestran página web interactividad

Recientemente hacer un proyecto relacionado con la puntuación y el módulo de visualización de la partitura, los diseñadores de interfaz de usuario tienen que cortar algunas buenas imágenes, realizar una gran cantidad de cinco puntas manera grados de la estrella, la esencia del espíritu de amor y considerar la búsqueda lanzamiento del rendimiento y la facilidad de mantenimiento, recolección y probado un montón de maneras, la unidad final con un puro css porcentajes de ejecución y terminación muestran decenas de funciones, no hay js, lo que significa ninguna lógica juicio, menos posibilidades de códigos de error, y más fácil de mantener, en éste, el esta funcionalidad permite que el proceso de grabación y para compartir y aprender junto con el cambio.

Original incluido en (mi blog en GitHub https://github.com/jawil/blog) , al igual que usted pueda centrarse en las últimas novedades, todo el mundo puede hablar de progreso común.

Para lograr la estrella de cinco puntas

1. Imagen o icono de fuente

No la búsqueda del máximo rendimiento, y luego directamente a la png o jpg diseñador cada vez mejor, o directamente convertida en base 64.

2: Uso de librerías de iconos Fontawesome, de hecho, sólo una fuente vectorial.

HTML:

<div class="icon"></div>

CSS:

@import url(http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

.icon:before {
    content: '\f005';
    font-family: FontAwesome;
}

Vista previa en línea Dirección

3. Uso CSS3 representa un pentagrama de retazos.

El principio básico: el uso de costura invisible transparente transparente y transformar convertir una estrella de cinco puntas regular.

HTML:

<div class="star-five"></div>

CSS:

.star-five{
width: 0;
height: 0;
color: red;
margin: 50px 0;
position: relative;
display: block;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
transform:rotate(35deg);
}

.star-five:before{
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 80px solid red;
position: absolute;
top: -45px;
left: -65px;
color: white;
display: block;
content: "";
transform:rotate(-35deg);
}
.star-five:after{
width: 0;
height: 0;
display: block;
position: absolute;
color: red;
top: 3px;
left: -105px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
content: "";
transform:rotate(-70deg);
}

Vista previa en línea Dirección

Esto no es recomendable, ya que después de seleccionar el estado de cambio de color muy complicado, muy fácil de cambiar, no es tan bueno frente a varias mantenimiento conveniente.

4. Los símbolos utilizados directamente pentagrama

★?

Simple y crudo, fácilmente controladas, productos coordinados, ★ sujetos a la siguiente aplicación.




Algunos selectores en CSS

Js no controla la puntuación, por supuesto, no pueden faltar los poderosos selectores CSS, aquí para decirnos acerca de algunas de selector CSS en la realización de esta función para su uso.

Antes de la introducción de selector CSS de gran alcance, para popularizar el "Radio CSS / casilla elementos explícitos e implícitos en un único cuadro de la tecnología", también conocido como "tecnología casilla truco."

1.checkbox truco Tecnología

我们使用CSS一些特殊的选择器，然后配合单选框以及复选框自带的一些特性，可以实现元素的显示隐藏效果。然后通过一
些简单的扩展，我们可以不使用任何JavaScript代码实现类似：自定义的单复选框，“更多”展开与收起效果，选项卡切换
效果，或是多级下拉列表效果等等。

相信很多前端开发人员都会遇到boss让修改checkbox和radio样式，毕竟自带的样式太丑了。后来我们发现修改自带样式
并不是那么容易，最后直接使出杀手锏——点击之后替换图片。
今天教大家一种方法，不用替换图片，随意修改样式。还是先看效果图：

`hablar de lo que funciona: dos cosas crítico, uno selectores de clase de pseudo: revisadas, estilo de presentación cuando los elementos de control correspondientes (botones de radio o casillas de verificación) verificaron; el segundo es el signo + selectores de hermanos adyacentes este símbolo indica los hermanos seleccionados detrás. Por lo tanto, la combinación de los dos, será más fácil a la pantalla de control o se esconden detrás de los elementos, o los otros estilos.
Y cómo hacer que una casilla de verificación está seleccionado y no seleccionado, que es la etiqueta de Kazajstán, para el atributo de anclaje botón de opción o casilla correspondiente y, a continuación, haga clic en el elemento de etiqueta de la etiqueta aquí cuando el correspondiente control de un solo caja será activada o desactivada. Entonces, no es el efecto de lo anterior! `

Aquí sólo para un único código de la caja de radio, para referencia:

HTML:

<div class="radio-beauty-container">
    <label>
        <span class="radio-name">前端工程师</span>
        <input type="radio" name="radioName" id="radioName1" hidden/>
        <label for="radioName1" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">后端工程师</span>
        <input type="radio" name="radioName" id="radioName2" hidden/>
        <label for="radioName2" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">全栈工程师</span>
        <input type="radio" name="radioName" id="radioName3" hidden/>
        <label for="radioName3" class="radio-beauty"></label>
    </label>
</div>

SCSS:

.radio-beauty-container {
    font-size: 0;
    $bgc: green;
    %common {
        padding: 2px;
        background-color: $bgc;
        background-clip: content-box;
    }
    .radio-name {
        vertical-align: middle;
        font-size: 16px;
    }
    .radio-beauty {
        width: 18px;
        height: 18px;
        box-sizing: border-box;
        display: inline-block;
        border: 1px solid $bgc;
        vertical-align: middle;
        margin: 0 15px 0 3px;
        border-radius: 50%;
        &:hover {
            box-shadow: 0 0 7px $bgc;
            @extend %common;
        }
    }
    input[type="radio"]:checked+.radio-beauty {
        @extend %common;
    }
}

Embellecer la radio Online Preview dirección de casilla: hace clic en mi camino
para embellecer Online Preview dirección de casilla de verificación casilla: Click me ah

Más sobre esta zona de introducción y ejemplos se pueden encontrar en Zhangxin Xu Gran Dios de este artículo: CSS Radio / elemento de casilla de verificación de la tecnología explícito e implícito sola CheckBox

selector de número de 2.CSS

HTML:

<div class="wrapper">
  <p class="test1">1</p>
  <p class="test2">2</p>
  <p class="test3">3</p>
  <p class="test4">4</p>
  <p class="test5">5</p>
</div>

CSS:

p{
  width:20px;
  line-height:20px;
  border:1px solid gray;
  text-align:center;
  font-weight: 700;
}

E + F: Hermano del selector selecciona un elementos coincidentes adyacentes de F, y el elemento E es adyacente a la posición trasera del partido elemento.

.test1+p{
  background-color:green;
}

E> F: comprende un selector para seleccionar el partido elementos sub-F, y el elemento E es un elemento del elemento hijo emparejado.

.wrapper>p{
  background-color:green;
}

E ~ F: Seleccionar detrás de hermanos que se

.test2~p{
  background-color:green;
}

E :: después, E :: antes de: la selección se inserta pseudo-elemento después de que el contenido de elemento de adaptación E (frontal)

.test2::before{
  background-color:green;
  content:"前"
}
.test2::after{
  background-color:green;
  content:"后"
}

: No (E) para cada elemento del elemento <E> no seleccionada.

.wrapper>:not(.test2){
  background-color:green;
}

: Entrada Marcada: comprobado seleccionar cada elemento de entrada seleccionado.

HTML:

<input type="radio" name="" id="" />

<span>3333</span>

CSS:

input:checked+span{
  border:10px solid red;
}




Aquí sólo se menciona este artículo para selectores CSS uso, más acerca de los poderosos selectores CSS3 lugar aquí: Integración Global uso de selectores CSS3




módulo de puntuación Realización

HTML:

 <div class="rating">
        <input type="radio" id="star5" name="rating" value="5" hidden/>
        <label for="star5"></label>
        <input type="radio" id="star4" name="rating" value="4" hidden/>
        <label for="star4"></label>
        <input type="radio" id="star3" name="rating" value="3" hidden/>
        <label for="star3"></label>
        <input type="radio" id="star2" name="rating" value="2" hidden/>
        <label for="star2"></label>
        <input type="radio" id="star1" name="rating" value="1" hidden/>
        <label for="star1"></label>
    </div>

Sobre la etiqueta de entrada oculta, siempre y cuando estoy aquí con un atributo oculto para lograr oculta, por supuesto, hay muchas maneras de lograr, siempre y cuando la entrada no ocupa la posición del documento, pero no es visible en OK, tenemos que ocultar el botón de radio, y está disponible para esconderse. Hay varias maneras para su referencia:

1. display: none;

 .rating >input {
        display: none;
    }

2. CSS3 de pinza

 .rating >input {
        position: absolute;
        clip: rect(0 0 0 0);
    }

3.opcity

.rating >input {
        position: absolute;
        opacity: 0;
    }

CSS:

    .rating {
        font-size: 0;
        display: table;
    }

    .rating > label {
        color: #ddd;
        float: right;
    }

    .rating > label:before {
        padding: 5px;
        font-size: 24px;
        line-height: 1em;
        display: inline-block;
        content: "★";
    }

    .rating > input:checked ~ label,
    .rating:not(:checked) > label:hover,
    .rating:not(:checked) > label:hover ~ label {
        color: #FFD700;
    }

    .rating > input:checked ~ label:hover,
    .rating > label:hover ~ input:checked ~ label,
    .rating > input:checked ~ label:hover ~ label {
        opacity: 0.5;
    }

Vista previa en línea Dirección





Mostrar módulo de puntuación

Después de la puntuación de los usuarios finales, podrás ver el resultado en pantalla, asumiendo cinco estrellas y 10 puntos.

Pantalla de la partitura es relativamente simple, puso dos html idénticos, estrella de cinco puntas en diferentes colores, en gris debajo de las puntuaciones de brillantes en la parte superior, y luego se muestra como un porcentaje de puntuación.

HTML:

 <div class="star-rating">
        <div class="star-rating-top" style="width:50%">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="star-rating-bottom">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>

CSS:

.star-rating {
        unicode-bidi: bidi-override;
        color: #ddd;
        font-size: 0;
        height: 25px;
        margin: 0 auto;
        position: relative;
        display: table;
        padding: 0;
        text-shadow: 0px 1px 0 #a2a2a2;
    }

    .star-rating span {
        padding: 5px;
        font-size: 20px;
    }
    
    .star-rating span:after {
        content: "★";
    }

    .star-rating-top {
        color: #FFD700;
        padding: 0;
        position: absolute;
        z-index: 1;
        display: block;
        top: 0;
        left: 0;
        overflow: hidden;
        white-space: nowrap;
    }

    .star-rating-bottom {
        padding: 0;
        display: block;
        z-index: 0;
    }

Cuando se devuelve la interfaz cuando la puntuación es de 5 puntos, simplemente ocupar la mitad de las estrellas, 2 estrellas y media, siempre y cuando el porcentaje calculado sobre la línea, sólo los datos gestionada, y las características de uso vue.js por datos para este estilo de presentación dinámica es simplemente demasiado fácil de hacer .

Vista previa en línea Dirección:

El método de este trabajo es a beneficio, puro CSS impulsado por varios interruptores no necesitan JS, ahorrar mucho JS, similar a esta demanda también podemos aprender por analogía, sólo para proporcionar algunas ideas aquí, no dio más detalles, pero al mismo tiempo o puede ser relativamente pequeña imagen de fondo directamente sin el uso de imágenes, en comparación con el uso de imágenes de ahorrar una gran cantidad de recursos, y mejorar el rendimiento ligeramente. Sin embargo, el aprendizaje y la comprensión de los costos es ligeramente superior, es posible que no se aplica a todas las contrapartes, por lo tanto, en este artículo como "tirar" de los zapatos para niños.