kód:
<div class="element">
<p>
Az oldal PORTÁLÉPÍTÕ ami tartalmazza az alábbi linkeket:DESIGN,SCRIPT,HTML kód,Segítség.Készítettem ketto új menüt a neveSegítsetek nem megy! ide bárki írhat kérhet és adhat bárkinek segitséget.Másik menü a Hibát találtam az oldalon,ha bármelyik link hibás vagy a kóddal van probléma és te láttad kérlek ird ide.köszönöm.Segítség.2005.04.12.-én indult az oldal azóta várom a segítségre szoruló G-portálos.Ha bármi észrevételed van irhatsz e-mailt virag-78@gportal.hu vagy irhatsz a vendégkönyv be,meg a Chat-be is.TANULJ,SZÉPÍTSD az oldaladat de a legfontosabb hogy közbe jól érezd magad!
Virág!
</p>
</div>
<style>
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,900);
body {
background-color: #F5F5F5;
color: #555;
font-size: 1.1em;
font-family: 'Lato', sans-serif;
}
.note{
width: 600px;
margin: 20px auto 0;
}
.element {
background-color: #c0392b;
color: white;
width: 500px;
height: 500px;
margin: 30px auto;
text-align: justify;
transition: all 3s ease;
/* new function syntax for webkit browsers */
shape-inside: circle(210px at 250px 250px);
-webkit-clip-path: circle(210px at 250px 250px);
/* old function syntax in Blink */
shape-inside: circle(250px, 250px, 210px);
-webkit-clip-path: circle(250px, 250px, 210px);
shape-padding: 15px;
}
.element:hover{
-webkit-animation: scale 3s ease infinite;
}
.element:hover .extra {
-webkit-animation: show 3s ease infinite;
}
@-webkit-keyframes scale {
0% {
shape-inside: circle(250px, 250px, 210px);
-webkit-clip-path: circle(250px, 250px, 210px);
shape-inside: circle(210px at 250px 250px);
-webkit-clip-path: circle(210px at 250px 250px);
}
50% {
shape-inside: circle(250px, 250px, 250px);
-webkit-clip-path: circle(250px, 250px, 250px);
shape-inside: circle(250px at 250px 250px);
-webkit-clip-path: circle(250px at 250px 250px);
}
100% {
shape-inside: circle(250px, 250px, 210px);
-webkit-clip-path: circle(250px, 250px, 210px);
shape-inside: circle(210px at 250px 250px);
-webkit-clip-path: circle(210px at 250px 250px);
}
}
@keyframes scale {
0% {
shape-inside: circle(210px at 250px 250px);
-webkit-clip-path: circle(210px at 250px 250px);
}
50% {
shape-inside: circle(250px at 250px 250px);
-webkit-clip-path: circle(250px at 250px 250px);
}
100% {
shape-inside: circle(210px at 250px 250px);
-webkit-clip-path: circle(210px at 250px 250px);
}
}
</style>