html - How to get an automatic effect of rosace in css ? -

-

i making website , there effect have putted on circle. circle automaticlly opens on mouse hover , close when mouse away. want make automatic . mens should open , close automaticlly. here css code circle . enter image description here

html

<div class="circle">    <h1>trance-2014</h1> </div>

css 

    .circle {       background: rgb(255, 255, 255);       border-radius: 100%;       cursor: pointer;       position: relative;       margin: 0 auto;       width: 15em;       height: 15em;       overflow: hidden;       -webkit-transform: translatez(0);       -moz-transform: translatez(0);       -ms-transform: translatez(0);       transform: translatez(0);   }   .circle h1 {       color: rgba(189, 185, 199, 0);       font-family:'lato', sans-serif;       font-weight: 900;       font-size: 1.6em;       line-height: 8.2em;       text-align: center;       text-transform: uppercase;       -webkit-font-smoothing: antialiased;       -webkit-user-select: none;       -moz-user-select: none;       -ms-user-select: none;       user-select: none;       -webkit-transition: color 0.8s ease-in-out;       -moz-transition: color 0.8s ease-in-out;       -ms-transition: color 0.8s ease-in-out;       transition: color 0.8s ease-in-out;   }   .circle:before, .circle:after {       border-radius: 100%;       content:"";       position: absolute;       top: 0;       left: 0;       width: inherit;       height: inherit;       box-shadow: inset 10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 10.6em 0 rgba(30, 140, 209, 0.2), inset -10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 -10.6em 0 rgba(30, 140, 209, 0.2);       -webkit-transition: box-shadow 0.75s;       -moz-transition: box-shadow 0.75s;       -ms-transition: box-shadow 0.75s;       transition: box-shadow 0.75s;   }   .circle:after {       -webkit-transform: rotate(45deg);       -moz-transform: rotate(45deg);       transform: rotate(45deg);   }   .circle:hover:before, .circle:hover:after {       box-shadow: inset 0.86em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.86em 0 rgba(252, 150, 0, 0.5), inset -0.86em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.86em 0 rgba(0, 150, 255, 0.5);   }   .circle:hover > h1 {       color: rgba(185, 185, 185, 1);   }

i guess mean this demo ?

if have use @keyframes element of css. more info on mdn or on css-tricks.

css

.circle {     background: rgb(255, 255, 255);     border-radius: 100%;     cursor: pointer;     position: relative;     margin: 0 auto;     width: 15em;     height: 15em;     overflow: hidden;     -webkit-transform: translatez(0);     -moz-transform: translatez(0);     -ms-transform: translatez(0);     transform: translatez(0); } .circle h1 {     font-family:'lato', sans-serif;     font-weight: 900;     font-size: 1.6em;     line-height: 8.2em;     text-align: center;     text-transform: uppercase;     -webkit-font-smoothing: antialiased;     -webkit-user-select: none;     -moz-user-select: none;     -ms-user-select: none;     user-select: none;     -webkit-animation: showtext 2s infinite; /* safari/chrome 4+ */     -moz-animation: showtext 2s infinite;    /* firefox 5+ */     -o-animation: showtext 2s infinite;      /* opera 12+ */          animation: showtext 2s infinite;         /* ie 10+ */     animation-timing-function: ease-in-out;      /*     ** -webkit-transition: color 0.8s ease-in-out;     ** -moz-transition: color 0.8s ease-in-out;     ** -ms-transition: color 0.8s ease-in-out;     ** transition: color 0.8s ease-in-out;     */ } .circle:before, .circle:after {     border-radius: 100%;     content:"";     position: absolute;     top: 0;     left: 0;     width: inherit;     height: inherit;     -webkit-animation: movecircle 2s infinite; /* safari/chrome 4+ */     -moz-animation: movecircle 2s infinite;    /* firefox 5+ */     -o-animation: movecircle 2s infinite;      /* opera 12+ */     animation: movecircle 2s infinite;         /* ie 10+ */      /*     ** -webkit-transition: box-shadow 0.75s;     ** -moz-transition: box-shadow 0.75s;     ** -ms-transition: box-shadow 0.75s;     ** transition: box-shadow 0.75s;     */ } .circle:after {     -webkit-transform: rotate(45deg);     -moz-transform: rotate(45deg);     transform: rotate(45deg); } @-webkit-keyframes movecircle {     0% {         box-shadow: inset 10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 10.6em 0 rgba(30, 140, 209, 0.2), inset -10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 -10.6em 0 rgba(30, 140, 209, 0.2);     }     100% {         box-shadow: inset 0.86em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.86em 0 rgba(252, 150, 0, 0.5), inset -0.86em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.86em 0 rgba(0, 150, 255, 0.5);     } } @-moz-keyframes movecircle {     0% {         box-shadow: inset 10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 10.6em 0 rgba(30, 140, 209, 0.2), inset -10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 -10.6em 0 rgba(30, 140, 209, 0.2);     }     100% {         box-shadow: inset 0.86em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.86em 0 rgba(252, 150, 0, 0.5), inset -0.86em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.86em 0 rgba(0, 150, 255, 0.5);     } } @-o-keyframes movecircle {     0% {         box-shadow: inset 10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 10.6em 0 rgba(30, 140, 209, 0.2), inset -10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 -10.6em 0 rgba(30, 140, 209, 0.2);     }     100% {         box-shadow: inset 0.86em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.86em 0 rgba(252, 150, 0, 0.5), inset -0.86em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.86em 0 rgba(0, 150, 255, 0.5);     } } @keyframes movecircle {     0% {         box-shadow: inset 10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 10.6em 0 rgba(30, 140, 209, 0.2), inset -10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 -10.6em 0 rgba(30, 140, 209, 0.2);     }     100% {         box-shadow: inset 0.86em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.86em 0 rgba(252, 150, 0, 0.5), inset -0.86em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.86em 0 rgba(0, 150, 255, 0.5);     } } @-webkit-keyframes showtext {     0% {         color: rgba(189, 185, 199, 0);     }     100% {         color: rgba(185, 185, 185, 1);     } } @-moz-keyframes showtext {     0% {         color: rgba(189, 185, 199, 0);     }     100% {         color: rgba(185, 185, 185, 1);     } } @-o-keyframes showtext {     0% {         color: rgba(189, 185, 199, 0);     }     100% {         color: rgba(185, 185, 185, 1);     } } @keyframes showtext {     0% {         color: rgba(189, 185, 199, 0);     }     100% {         color: rgba(185, 185, 185, 1);     } }

Comments

Post a Comment

Popular posts from this blog

java - WrongTypeOfReturnValue exception thrown when unit testing using mockito -

-
my test list<person> mylist; @test public void testisvalidperson() { mylist = new arraylist<person>(); mylist.add(new person("tom")); when(persondao.get(person)).thenreturn(mylist); when((persondao.get(person)).isempty()).thenreturn(false);//------exception thrown boolean result = service.isvalid("tom"); assertfalse(result); } method tested: public boolean isvalid(string person){ persondao = new persondao(); person personobj = new person(person); return (persondao.get(person).isempty())?false : true; } exception thrown: org.mockito.exceptions.misusing.wrongtypeofreturnvalue: boolean cannot returned get() get() should return list *** if you're unsure why you're getting above error read on. due nature of syntax above problem might occur because: 1. exception *might* occur in wrongly written multi-threaded tests. please refer mockito faq on limitations of concurrency testing. 2. sp
Read more

php - Magento - Deleted Base url key -

-
i working on cleaning url: http://mydomain.com/shop/shop/deals i going through settings in configuration tab in admin panel on magento , change secure , unsecure base urls remove first base url "shop" web page read: http://mydomain.com/shop/deals so changed unsecure base urls mydomain.com/shop mydomain.com , secure 12.345.67.89/shop 12.345.67.89. wrong thing do. i cannot reload page or admin console. how access these files through ftp , change correctly there?? when make changes in admin panel changes made in database not in file. have make changes in database. 1.go database , select core_config_data table under table find web/unsecure/base_url , web/secure/base_url . make changes here. don't forget clear cache in var/cache folder
Read more

android - How to disable Button if EditText is empty ? -

-
i have edittext , button in application. when button clicked,the text entered in edittext added listview. i want disable button if edittext empty.how ? this code button click imagebutton imb=(imagebutton)findviewbyid(r.id.btn_send); imb.setonclicklistener(new onclicklistener() { @override public void onclick(view arg0) { edittext et = (edittext)findviewbyid(r.id.edittext1); string str = et.gettext().tostring(); web1.add(str); toast.maketext(shoutsingleprogram.this, "you entered...."+str, toast.length_short).show(); adapter1.notifydatasetchanged(); et.settext(""); } }); } how can ? edittext1.addtextchangedlistener(new textwatcher() { @override public void ontextchanged(charsequence s, int start, int before, in
Read more