CSS3 & transition & animation

CSS3 & transition & animation css3,transition,animation, cubic-bezier, circle menus, css, js, html5,

CSS3 & transition & animation

​

.circle-box{
position: relative;
margin: 100px auto;
width: 300px;
height: 300px;
background: #ccc;
border: 1px solid red;
border-radius: 50%;
transform: rotate(var(--defaultAngle));
transition: 1s 0.5s all ease-in-out;
/* animation: autoRotate 1s 1 both ease; */
}

.rotate-angle {
transform: rotate(var(--newAngle));
}

​​https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-timing-function​​

.circle-box{
position: relative;
margin: 100px auto;
width: 300px;
height: 300px;
background: #ccc;
border: 1px solid red;
border-radius: 50%;
transform: rotate(var(--defaultAngle));
/*transition: 1s 0.5s all ease-in-out; */
animation: autoRotate 1s 1 both ease;
}

.rotate-angle {
transform: rotate(var(--newAngle));
}

@keyframes autoRotate {
0% {
transform: rotate3d(0, 0, 1, var(--defaultAngle));
    }
to {
transform: rotate3d(0, 0, 1, var(--newAngle));
    }
}

@keyframes autoRotate {
0% {
transform: rotate3d(0, 0, 1, var(--beginAngle));
    }
to {
transform: rotate3d(0, 0, 1, var(--endAngle));
    }
}

full demo

@charset "UTf-8";

/* app.css */

:root{
--beginAngle: 0deg;
--endAngle: 0deg;
/* fixed angle enums */
--defaultAngle: 0deg;
--newAngle: 30deg;
/* positive */
--rotateAngle30: 30deg;
--rotateAngle60: 60deg;
--rotateAngle90: 90deg;
--rotateAngle120: 120deg;
--rotateAngle150: 150deg;
--rotateAngle180: 180deg;
--rotateAngle210: 210deg;
--rotateAngle240: 240deg;
--rotateAngle270: 270deg;
--rotateAngle300: 300deg;
--rotateAngle330: 330deg;
--rotateAngle360: 360deg;
/* negative */
--rotateAngle-30: -30deg;
--rotateAngle-60: -60deg;
--rotateAngle-90: -90deg;
--rotateAngle-120: -120deg;
--rotateAngle-150: -150deg;
--rotateAngle-180: -180deg;
--rotateAngle-210: -210deg;
--rotateAngle-240: -240deg;
--rotateAngle-270: -270deg;
--rotateAngle-300: -300deg;
--rotateAngle-330: -330deg;
--rotateAngle-360: -360deg;
}

* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

html, body, div, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, object, code, legend, button, input, textarea, th, td, a, img, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}

.data-btn{
padding: 1px 6px;
border-width: 2px;
border-style: outset;
border-color: buttonface;
border-image: initial;
cursor: default;
}


.circle-box{
position: relative;
margin: 100px auto;
width: 300px;
height: 300px;
background: #ccc;
border: 1px solid red;
border-radius: 50%;
transform: rotate(var(--defaultAngle));
transition: 1s 0.5s all ease-in-out;
/* animation: autoRotate 1s 1 both ease; */
}

.rotate-angle {
transform: rotate(var(--newAngle));
}

@keyframes autoRotate {
0% {
transform: rotate3d(0, 0, 1, var(--defaultAngle));
    }
to {
transform: rotate3d(0, 0, 1, var(--newAngle));
    }
}

@keyframes autoRotate {
0% {
transform: rotate3d(0, 0, 1, var(--beginAngle));
    }
to {
transform: rotate3d(0, 0, 1, var(--endAngle));
    }
}


.menus-mask {
position: absolute;
top: 230px;
left: 50%;
transform: translate(-50%);
width: 600px;
height: 400px;
background: rgba(123,123,123,0.5);
z-index: 999;
}
.horizontal-line{
position: absolute;
width: 50vw;
height: 0;
border-top: 1px solid red;
top: calc(100px + 300px / 2);
left: 50%;
transform: translateX(-50%);
}

.vertical-line {
position: absolute;
width: 0;
height: calc(50vh + 300px /2 );
border-left: 1px solid red;
top: calc(100px / 2);
left: 50%;
transform: translateX(-50%);
}

.circle {
/* position: absolute; */
width: 30px;
height: 30px;
line-height: 30px;
background: #f0f;
text-align: center;
vertical-align: middle;
cursor: pointer;
border-radius: 0 0 15px 15px;
}
/* 
.circle::before {
    content: "";
    width: 6px;
    height: 6px;
    position: absolute;
    left: 9px;
    top: 0px;
    border: 2px solid #FFF;
    border-radius: 50%;
    z-index: -1;
}
.circle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    height: 30px;
    width: 30px;
    background-color: #00c991;
    border-radius: 50% 50% 0;
    transform: translate(-50%, -50%) rotate(45deg);
    z-index: -1;
} */

.circle-highlight::after {
background-color: #f82eb5;
}


.circle1{
transform: rotate(-60deg) translateX(-50px) translateY(35px);
}
.circle2{
transform: rotate(-30deg) translateX(calc(150px - 87px)) translateY(9px);
}
.circle3{
transform: rotate(0deg) translateX(calc(150px - 15px)) translateY(-73px);
}
.circle4{
transform: rotate(30deg) translateX(calc(150px + -13px)) translateY(-175px);
}
.circle5{
transform: rotate(60deg) translateX(80px) translateY(-255px);
}
.circle6{
transform: rotate(90deg) translateX(-15px) translateY(calc(-300px + 15px));
}

.circle7{
transform: rotate(120deg) translateX(calc(-106px)) translateY(-243px);
}
.circle8{
transform: rotate(150deg) translateX(-155px) translateY(-150px);
}
.circle9{
transform: rotate(180deg) translateX(calc(-150px + 15px)) translateY(-45px);
}
.circle10{
transform: rotate(-150deg) translateX(-47px) translateY(35px);
}
.circle11{
transform: rotate(-120deg) translateX(77px) translateY(50px);
}
.circle12{
transform: rotate(-90deg) translateX(calc(195px)) translateY(-15px);
}

.menus {
background: url("./menus.svg")
}

---

cubic-bezier

cubic-bezier(p1, p2, p3, p4)

An author defined cubic-Bezier curve, where the p1 and p3 values must be in the range of 0 to 1.

​​https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function#cubic-bezier-timing-function​​

.test{
transition-timing-function: cubic-bezier(.29, 1.01, 1, -0.68);
}

.cb {
transition-timing-function: cubic-bezier(0.2,-2,0.8,2);
}

---

贝塞尔曲线

​​https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function​​

​​https://developer.mozilla.org/zh-CN/docs/Web/CSS/timing-function​​

​​https://en.wikipedia.org/wiki/Bézier_curve#Cubic_B.C3.A9zier_curves​​

repl online